Khởi tạo dự án
Tạo folder mới và chạy
npm init -y
Install Dependencies
Cài đặt react
npm i react react-dom
Cài đặt devDependencies
npm i -D @types/react@17 @types/react-dom@17 babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript webpack webpack-cli webpack-dev-server copy-webpack-plugin css-loader html-webpack-plugin style-loader
Công dụng
- react, react-dom, @types/react, @types/react-dom: Thư viện react và type definition của nó
- babel-loader, @babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript: compiler cho react và typescript
- webpack, webpack-cli: Module bundler
- webpack-dev-server: Tạo server webpack chạy trên localhost:3000
- copy-webpack-plugin: Plugin webpack để đưa mọi files trong folder public có thể truy cập được từ root.
- css-loader, style-loader: Load và bundle css.
- html-webpack-plugin: Thêm style và script vào file html sau bundle
Package.json
Thay đổi nội dung script trong file package.json
{ // ... "scripts": { "start": "webpack-dev-server --config webpack.config.js --mode development", "build": "webpack --mode production" }}
Config
Tạo file .babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-typescript", ["@babel/preset-react", { "runtime": "automatic" }] ]}
File tsconfig.json
{ "compilerOptions": { "outDir": "./public", "module": "ES6", "target": "ES6", "noEmit": true, "jsx": "react-jsx", "skipLibCheck": true, "rootDir": "./src", "baseUrl": "./src", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "jsxImportSource": "react" }, "include": ["src/**/*"]}
File webpack.config.js
const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");const CopyWebpackPlugin = require("copy-webpack-plugin");/** @type {import('webpack').Configuration} **/module.exports = { // Include những file typescript, javascript trong src và node_modules resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"], extensions: [".tsx", ".ts", ".jsx", ".js"], }, entry: ["./src/index.tsx"], module: { rules: [ // Load file typescript react bằng babel { test: /\.tsx?$/, exclude: /node_modules/, use: ["babel-loader"], }, // Load css bằng style-loader { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, // Thêm [chunkhash] để thêm hash vào file tránh bị cache bởi cdn nếu trùng file name. output: { filename: "[name].[chunkhash].js", chunkFilename: "[name].[chunkhash].js", path: path.resolve(__dirname, "dist"), publicPath: "/", }, // Dev server ở port 3000 devServer: { hot: true, port: 3000, historyApiFallback: true, static: { directory: path.resolve(__dirname, "public", "index.html"), serveIndex: true, watch: true, }, }, plugins: [ // Copy mọi files trong folder public trừ file index.html new CopyWebpackPlugin({ patterns: [ { from: "public", to: ".", filter: (name) => { return !name.endsWith("index.html"); }, }, ], }), // Plugin hỗ trợ thêm thẻ style và script vào index.html new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public", "index.html"), filename: "index.html", }), ],};
Tạo folder public và thêm file index.html ở trong đó
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>React App</title> </head> <body> <div id="root"></div> </body></html>
Tạo folder src và thêm file index.tsx
import App from "./App";import React from "react";import ReactDom from "react-dom";ReactDom.render(<App />, document.querySelector("#root"));
File App.tsx trong folder src
import { FC } from "react";const App: FC = () => { return <div>Hello world</div>;};export default App;
Thêm file .gitignore
node_modulesdist
Kết quả
Giờ đây bạn có thể chạy npm start
để chạy server trên localhost:3000 hoặc npm run build
để build như một dự án react bình thường.
Repository: https://github.com/naptestdev/react-typescript-template.git
Chúc các bạn thành công.