第一步：首先安装NodeJS，官方网址 nodejs官网，根据自己电脑系统，选择下载；下载安装包后，无脑安装，下一步，下一步即可；安装完成后检验是否安装成功 ：win键+R键 打开cmd命令窗口，输入命令node -v ,弹出nodejs的版本号，说明安装成功。
node版本号
第二步：安装webpack，打开cmd命令窗口，输入命令 npm install -g webpack webpack-cli，安装完成后，输入webpack --version，检查是否安装成功，成功后显示版本号，说明安装成功。
webpack版本号
第三步：安装webpack-dev-server，在cmd命令窗口，输入命令npm install -g webpack-dev-server，安装成功后创建空文件夹react_study.
第四步：配置配置webpack-dev-server的打包环境，也就是webpack.config.js文件；
module.exports = {
mode: "development",
entry: "./app/main.js",
output: {
filename: "bundle.js",
publicPath: "xuni"
}
}
第五步： 创建app文件夹，
创建main.js文件，
创建身份证输入命令npm init，改变script：
{
"name": "react_study",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC"
}
第六步：配置css-loader、style-loader，目的是让webpack能够认识css文件，在命令行输入
npm install --save css-loader style-loader
配webpack.config.js文件，去 npm社区 ， 改变后文件
module.exports = {
mode: 'development',
entry: './app/main.js',
output: {
filename: 'bundle.js',
publicPath: 'xuni'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
}
}
第七步：配置babel，用来翻译jsx语法；命令行输入npm install --save babel-loader @babel/core @babel/preset-react；去npm社区，配置webpack.config.js后文件：
module.exports = {
mode: 'development',
entry: './app/main.js',
output: {
filename: 'bundle.js',
publicPath: 'xuni'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
}
}
第八步：安装最后两个依赖：命令行输入npm install --save react react-dom，然后起步开始：
创建index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head>
<body>
<div id="app"></div>
<script src="xuni/bundle.js"></script>
</body>
</html>
main.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<div>**Hello React**</div>,
document.querySelector('#app')
);
最后一步：命令行输入npm run dev 浏览器打开打开127.0.0.1:8080，你就能看到
起步
起步完成！
网友评论