Để bắt đầu sử dụng ReactJS, ta cần cài đặt một số công cụ sau đây:
Node.js: ReactJS là một thư viện JavaScript, vì vậy chúng ta cần sử dụng Node.js để chạy ứng dụng React trên máy tính. Bạn có thể tải Node.js từ trang chủ và cài đặt theo hướng dẫn.
Trình quản lý gói (Package Manager): Để quản lý các gói thư viện của ReactJS, ta cần sử dụng trình quản lý gói như npm hay Yarn. Trong bài viết này sẽ sử dụng npm để cài đặt và quản lý các gói thư viện.
Trình biên dịch JSX: React sử dụng JSX (định dạng mở rộng của JavaScript) để tạo ra các thành phần UI. Để biên dịch JSX thành mã JavaScript thông thường, ta sử dụng công cụ Babel. Bạn có thể tìm hiểu thêm về Babel tại đây.
Sau khi đã có môi trường cần thiết, ta có thể bắt đầu cài đặt ReactJS bằng cách thực hiện các bước sau:
Tạo một thư mục mới và mở nó bằng terminal hoặc command prompt.
Sử dụng lệnh sau để tạo một package.json mới:
npm init -y
- Tiếp theo, cài đặt React và ReactDOM bằng cách chạy lệnh sau:
npm install react react-dom --save
- Cài đặt Babel và các plugin cần thiết để biên dịch JSX bằng các lệnh sau:
npm install babel-core babel-loader babel-preset-react-app --save-dev
- Tạo một file có tên
index.htmltrong thư mục gốc và thêm các đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
- Tạo một file mới có tên
index.jsvà thêm đoạn mã sau:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello, World!</h1>, document.getElementById('root'));
- Cuối cùng, cài đặt webpack và các plugin cần thiết để đóng gói ứng dụng React bằng lệnh sau:
npm install webpack webpack-dev-server html-webpack-plugin --save-dev
- Tạo một file có tên
webpack.config.jsvà thêm đoạn mã sau:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
},
devServer: {
port: 3000,
open: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
};
- Cuối cùng, chạy lệnh sau để bắt đầu server và xem kết quả:
npm start
Vậy là ta đã cài đặt thành công ReactJS và có thể bắt đầu viết các ứng dụng hấp dẫn bằng thư viện này. Chúc bạn thành công!
