npm run build: bundle js file into bundle.js each time when you change .js filenpm run watch: auto keep update bundle result after each modify of .js file.
-
construct an index.html, have
- bundle.js script
- root element where to render React component
-
Dependencies
npm i react react-dom react-router-dom
-
construct an index.js, to render React DOM
-
install dependencies
npm i @reduxjs/toolkit react-redux
-
store folder store all files about redux
- index.js : define store
- slices folder: includes all definition of slice
-
Connect redux to react app in index.js (root)
-
install dev dependencies
npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader
-
create webpack.config.js in root directory
- entry: the entry point of index.js
- output: where to output the bundle result
- add rule to load js file, css file
module.exports = { mode: "development", entry: ["./index.js"], output: { path: __dirname, filename: "./public/dist/bundle.js", }, devtool: "source-map", module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], }, }, { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, };
- create .eslintrc.json at root directory
- add extent to ignore component unused warning
{ "extends": "react-app" }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent