Quartz 🪬

Create a React Application Manually

4 min read

Để sử dụng React một cách thủ công, ta cần phải cấu hình các package của Node. Nếu muốn dùng React ngay mà không cần quan tâm đến các cấu hình, có thể tham khảo Create React App hoặc Vite.

Installation

Trước tiên, ta cần phải tạo ra một dự án NodeJS thông qua các câu lệnh sau:

  • Với NPM:

    npm init

  • Với Yarn

    yarn init

Thư viện React cung cấp hai packages giúp chúng ta viết code React là react và react-dom:

yarn add react react-dom

Required Packages

Để chạy code React, ta cần hai thứ sau:

  1. Module Bundler dùng để đóng gói nhiều module lại thành một tập tin JavaScript duy nhất: Webpack.

    yarn add webpack webpack-cli webpack-dev-server -D

    Ta có thể chỉ cài đặt các package này ở devDependencies bằng cách sử dụng flag -D.

    Package webpack-cli dùng để thực thi các các câu lệnh của Webpack, webpack-dev-server dùng để chạy tập tin index.html trên một server và thực hiện đóng gói code bất cứ khi nào có sự thay đổi về code xảy ra.

  2. Transpiler dùng để transpile JSX thành JavaScript thuần mà có thể chạy trên trình duyệt: Babel.

    yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Ngoài hai công cụ trên, ta còn cần thêm package sau:

yarn add html-webpack-plugin

Package này giúp tạo ra tập tin index.html được liên kết với tập tin JavaScript đã được đóng gói.

Cụ thể, nếu tập tin index.html có dạng:

<!--/src/index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Tập tin index.html được sinh ra sẽ có dạng:

<!--/dist/index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index_bundle.js"></script>
  </body>
</html>

Vối index_bundle.js là tên của tập tin JavaScript đã được đóng gói.

Configuration

Ta cần cấu hình thuộc tính entry giúp liệt kê tập tin JavaScript đầu vào mà ta cần transpile (xem thêm webpack).

// webpack.config.js
module.exports = {
  entry: "./src/index.js",
}

Sau đó cấu hình thuộc tính output giúp xác định tên tập tin sau khi đóng gói và thư mục đầu ra. Ở đây, ta sử dụng thư mục dist.

// webpack.config.js
const path = require("path")
 
module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
}

Kế đến cấu hình thuộc tính plugins giúp ta khai báo sử dụng plugin html-webpack-plugin. Giá trị của template là đường dẫn đến tập tin HTML mà ta muốn đóng gói và liên kết với bundle.js.

// webpack.config.js
const HTMLWebpackPlugin = require("html-webpack-plugin")
 
module.exports = {
  plugins: [
    new HTMLWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
}

Cuối cùng, thuộc tính module giúp chúng ta cấu hình cho các module được transpile. Ở đây, ta transpile tất cả các tập tin có đuôi là .js hoặc .jsx (thể hiện thông qua regex /\.js|jsx$/) và loại trừ các tập tin có trong thư mục node_modles.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exlude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
}

Loader mà ta sử dụng là babel-loader, với hai presets là @babel/preset-env và @babel/preset-react.

Task Runners

Sau khi đã cấu hình, ta cần tạo ra các npm scripts1 để chạy webpack.

Development

//package.json
{
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot"
  }
}

Các option trong câu lệnh trên lần lượt là:

  • mode: chế độ đóng gói.
    • development: code được đóng gói sẽ có định dạng dễ đọc.
    • production: code được đóng gói sẽ được tối giản và không có khoảng trắng hay xuống dòng.
  • open: mở tập tin index.html được đóng gói trong một tab mới của trình duyệt.
  • hot: theo dõi những sự thay đổi trong code và tái đóng gói dựa khi có sự thay đổi xảy ra.

Production

Đối với môi trường production, ta cần dùng script sau:

//package.json
{
  "scripts": {
    "build": "webpack --mode production"
  }
}

Resources

Footnotes

  1. xem thêm Task runners ↩