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" },