Setup React Webpack Babel
Bài đăng này đã không được cập nhật trong 6 năm
Chào tất cả các bạn, thời gian gần đây mình giành khá nhiều thời gian tìm hiểu về React và cũng đã thử setup một vài demo nho nhỏ. Sau cùng, mình cũng đã khởi tạo được một React Boilerplate. Nếu ai đã tìm hiểu qua về React hoặc đang làm việc với nó thì chắc chắn rằng các bạn sẽ có nhiều cách để khởi tạo một structure dự án cho riêng mình. Chính vì có rất nhiều cách để khởi tạo một dự án sử dụng React, nên hôm nay mình sẽ giới thiệu, hướng dẫn các bạn setup một source React cơ bản nhất, bạn có thể sử dụng nó để thực hành React bất cứ khi nào nhé. Bắt đầu nào...
Nội dung
- Project setup
- Webpack setup
- Hot Reloading
- Babel setup
- React setup
Project setup
Trước khi bắt đầu, bạn nên có một Editor và Terminal trên thiết bị của mình nhé. Tiếp theo là Node và NPM Hãy tạo một folder với các lệnh sau.
mkdir react-boilerplate
cd react-boilerplate
npm init -y
Câu lệnh cuối npm init -y sẽ giúp tự động tạo ra một file có tên là package.json, -y ở đây có nghĩa file được tạo ra với cấu hình mặc định. Trong file này bạn sẽ nhìn thấy cấu hình của dự án, những Node Package đã được cài đặt và Scripts.v.v.
Bước tiếp theo chúng ta tạo một thư mục distribution. Thư mục này sẽ được sử dụng để phục vụ ứng dụng của chúng ta. Trình duyệt sẽ lắng nghe những thay đổi trong thư mục này và hiển thị ra nội dung tương ứng. Nó chỉ chứa hai file thôi: file_name.html và file_name.js. File file_name.js sẽ được tự động tạo ra từ tất cả mã Javascript của chúng ta thông qua Webpack. File file_name.html bạn phải tạo thủ công nhé. Nó sẽ đóng vai trò là một Entry Point (Cổng vào) cho ứng dụng của chúng ta.
Từ thư mục gốc (react-boilerplate)
mkdir dist
cd dist
touch index.html
Như mình đã trình bày trước đó: Thư mục distribution sẽ chứa những thứ chúng ta cần để publish ứng dụng của mình đến một hosting server. Nó chỉ cần file HTML và JS. Tệp được tạo nên có nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title>Setup React Webpack Babel</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Có 2 điểm bạn cần chú ý:
- File
bundle.jssẽ là file được tạo ra bởi Webpack. id="app"sẽ giúp cho các Component React tìm thấy cái gọi là Entry Point (Từ này nên dịch thế nào cho chính xác ta).
Các bước tiếp theo sẽ là:
* (1) Thiết lập Webpack để đóng gói tất cả tài nguyên của ứng dụng vào trong một file duy nhất là bundle.js
* (2) Build Component React đầu tiên sử dụng Entry Point là id="app"
Tiếp tục nào...
Webpack setup
Chúng ta sẽ sử dụng Webpack như một module bundler and build tool. Bạn sẽ sử dụng wepack-dev-server để phục vụ ứng dụng đã được đóng gói trong môi trường local. Với webpack-dev-server trình duyệt sẽ ngay lập tức cập nhật những thay đổi được tạo ra từ trong source code của chúng ta. Từ thư mục gốc (react-boilerplate)
npm install --save-dev webpack webpack-dev-server
Lúc này, bạn sẽ thấy một thư mục node_modules nơi chứa các dependencies (third party) đã được cài đặt. Những dependencies đồng thời sẽ được liệt kê trong tập tin package.json. Lí do là vì chúng ta sử dụng lệnh --save-dev khi cài đặt.
Thư mục dự án của chúng ta lúc này sẽ có dạng như sau:
- dist
-- index.html
- node_modules
- package.json
Trong file package.json. Hãy thêm một đoạn mã script để khởi động dependency webpack-dev-server nhé.
package.json
...
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
...
},
...
Đoạn mã này có ý nghĩa rằng chúng ta muốn sử dụng webpack-dev-server với một vài cấu hình rất căn bản và nó yêu cầu một file có tên là wepback.config.js. Cùng tạo file này nha.
Từ thư mục gốc (react-boilerplate)
touch webpack.config.js
Tiếp tục cấu hình nào: webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
Mình giải thích nhé: * Chúng ta đang muốn sử dụng src/index.js như một cái cổng vào (Entry Point) để đóng gói tất cả các file được import vào. * Những tập tin được đóng gói sẽ dẫn đến file bundle.js (File được tạo ra tự động trong folder /dist của dự án). Folder dist sẽ được phục vụ cho ứng dụng của chúng ta. Chúng ta đang bỏ rơi src/index.js đó nhé. Hì hì
Từ thư mục gốc (react-boilerplate)
mkdir src
cd src
touch index.js
src/index.js
console.log('Setup React Webpack Babel');
Cấu trúc folder bây giờ sẽ là:
- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js
Khởi động webpack-dev-server nào Từ thư mục gốc (react-boilerplate)
npm start
Ứng dụng sẽ xuất hiện trên trình duyệt. Check console để thấy kết quả nha.
Hot Reloading
Cơ bản thì Hot Reloading được hiểu là bất cứ khi nào bạn thay đổi một vài thứ trong source code của dự án, những thay đổi đó sẽ được browser cập nhât, apply ngay lập tức mà bạn không cần phải bỏ công reload page. Từ thư mục gốc (react-boilerplate)
npm install --save-dev react-hot-loader
Bạn sẽ phải thêm một vài cấu hình trong file webpack config. webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
Trong tập tin src/index.js bạn thêm đoạn mã sau để apply hot reloading nhé: src/index.js
console.log('Setup React Webpack Babel');
module.hot.accept();
Chạy ứng dụng một lần nữa để thấy kết quả. Từ thư mục gốc (react-boilerplate)
npm start
Bạn vẫn sẽ nhìn thấy console.log() trong tab console của Chrome DevTools. Nhưng mỗi lần bạn thay đổi console.log() trong src/index.js , bạn sẽ nhìn thấy những cập nhật ngay lập tức.
Tiếp tục với Babel các bạn nhé...
Babel setup
Babel cho phép chúng ta viết code ES6(ES2015). Với Babel mã sẽ được chuyển đổi thành ES5 nên đảm bảo mọi trình duyệt có thể hiểu được ứng dụng của chúng ta. Từ thư mục gốc (react-boilerplate)
npm install --save-dev babel-core babel-loader babel-preset-es2015
Ngoài ra, bạn có thể muốn sử dụng một số tính năng khác trong ES6 (object spread chẳng hạn) nó được giải quyết đơn gian với stages nhé. Từ thư mục gốc (react-boilerplate)
npm install --save-dev babel-preset-stage-2
Bước cuối cùng, chúng ta muốn sử dụng React, nên cần thêm một chút cấu hình để chuyển đổi tập tin .jsx sang .js. Nó rất là tiện lợi đúng không nào. Hì hì.
Từ thư mục gốc (react-boilerplate)
npm install --save-dev babel-preset-react
Bây giờ, các bạn điều chỉnh file package.json và webpack.config.js đế apply Babel vào nhé. package.json
...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
...
webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
Chạy lệnh npm start lúc này sẽ gặp lỗi ngay. Bởi vì ứng dụng của chúng ta đang chưa biết về React là gì, ở đâu.Hihi. Cùng fix tiếp nhé.
React setup
Để sử dụng React, chúng ta cần hai Node Package, đó là react và react-dom. Từ thư mục gốc (react-boilerplate)
npm install --save react react-dom
Trong src/index.js bạn có thể viết code sử dụng cú pháp của React rồi đấy. src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'Setup React Webpack Babel';
ReactDOM.render(
<h1 className="title">{title}</h1>,
document.getElementById('app')
);
module.hot.accept();
Kết quả sẽ cho ra câu tiêu đề có nội dung Setup React Webpack Babel
Ok, đến đây các bạn đã xây dựng thành công một source React có đầy đủ các thành phần cần thiết rồi đấy.
Các bạn có thể tham khảo source code của mình trên Github để được rõ ràng hơn nhé.
Chúc các bạn học tốt. Hẹn gặp lại các bạn trong các bài viết sau!
All rights reserved
