The low version of the react project can be used as the basic environment for react-related testing, which is convenient for rapid testing.
git clone [email protected]:whosMeya/simple-react-app.git
git checkout v1.0.0
GitHub address: simple-react-app v1.0.0
The project construction process is as follows
Project initialization
# 新建文件夹
mkdir simple-react-app
# 进入文件夹
cd ./simple-react-app
# npm初始化 -y参数表示使用默认配置，执行后会生成package.json文件
npm init -y
Add React code
Install react related dependencies
npm install --save react react-dom @types/react @types/react-dom
Create a new index.js file and write the following code
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Create a new index.html file and write the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./index.js"></script>
</html>
Configuration
Install webpack related dependencies
npm install --save-dev webpack webpack-cli
Add webpack configuration file
Create a new file webpack.config.js in the root directory and write the following code
const path = require('path');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
}
module.exports = config;
Add plugin html-webpack-plugin
html-webpack-plugin is used to pack html files.
installation
npm install --save-dev html-webpack-plugin
Modify webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'index.html',
+ }),
+ ],
}
module.exports = config;
Install Babel related dependencies
Babel compiles the react syntax into the syntax recognized by the browser.
ps: Babel7 put all packages under @ babel /.
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/preset-react @babel/plugin-proposal-class-properties
Add Babel configuration file
Create a new file babel.config.json in the root directory and write the following code
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Add Babel configuration in webpack configuration file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ module: {
+ rules: [
+ { test: /\.js$/, use: 'babel-loader' }
+ ]
+ },
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
],
}
module.exports = config;
Add build command
Modify package.json
"scripts": {
+ "build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
Run the build command to see the effect
npm run build
If the packaging is successful, the root directory will generate dist.
Open index.html under dist, you will see Hello World!
Add start command
Use webpack-dev-server hot start.
npm install --save-dev webpack-dev-server
Modify package.json
"scripts": {
"build": "webpack --mode production",
+ "start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
Run the start command to see the effect
npm run start
The project runs successfully. Open http: // localhost: 8080 / and you will see Hello World!
Modify index.js, and the page will refresh synchronously after saving.