Bài 1: Khởi tạo dự án bằng create react app

I – Khởi tạo dự án bằng câu lệnh

npx create-react-app project-name --template typecript

Câu lệnh trên sẽ khởi tạo dự án reactjs với ngôn ngữ typecript

II – Cấu hình port cho dự án nếu bị trùng port.

tạo 1 file .env.local cùng cấp vời folder src

PORT=3001

yarn start lại với port 3001

III – Cài đặt thư viên babel plugin module resolver

chạy câu lệnh cài đặt

yarn add --dev babel-plugin-module-resolver

Đây là 1 plugin Babel xử lý các module con quá trình compile code của bạn khi sử dụng babel.
Plugin này cho phép bạn thêm 1 thư mục ‘root’ mới chứa các modules của bạn. Nó cũng cho phép các bạn thiết lập alias cho các thư mục.
CỤ thể nó có thể đơn giản hoá các import path trong project của bạn.
Thay vì sử dụng các đường dẫn như “../../../../utils/my-utils” bạn có thể viết “utils/my-utils”

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');

sau khi chạy xong câu lệnh cài đặt, bạn sẽ tạo 1 file có tên là .babelrc trong thư mục gốc và sau đó paste đoạn mã

{
 {
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "~": "./src"
        }
      }
    ]
  ]
}

Cấu hình cho editor Vs code. trong file jsconfig.json hoặc tsconfig.json thêm cấu hình “baseUrl”: ‘.’

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
      "test/*": ["test/*"],
      "underscore": ["lodash"]
    }
  }
}

Sửa lại nội dung file config-overrides.js

const { override, useBabelRc } = require("customize-cra");

module.exports = override(
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useBabelRc()
);

IV- Cuối cùng cài đặt thư viện

yarn add customize-cra react-app-rewired --dev

Đây là thư viện dùng để Ghi đè các cấu hình webpack cho create-react-app 2.0
tạo 1 file cùng cấp với package.json có tên là config-overrides.js

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
};

sửa lại các đoạn script trong package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },