1、新建react 文件夹 进入文件夹 执行命令 npm init -y 会出现package.json 文件
2、新建src 文件夹 dist 文件夹
3、在src下创建一个新的index.html 文件 ，在src 下创建 main.js 文件
4、打开项目 安装 webpack 执行 npm i webpack -D
5、安装 webpack-cli 执行 npm i webpack-cli -D
合并命令： 第四步 第五步 可以 合并执行命令 npm i webpack webpack-cli -D
6、项目下新建 webpack.config.js 文件 写入 JS 代码（ 或者 mode 模式为 production）
两个模式的区别 大概就是 文件大小的区别
module.exports = {
mode:'development'
}
注意：在webpack 4.x 版本中 有 约定大于配置的约定 默认的打包路径 是src-> index.js 所以可以讲上面步骤中建的main.js 文件改名为index.js
执行 webpack 的时候会有报错信息
如图
如果 碰到 此命令 则 执行 Set-ExecutionPolicy Unrestricted -Scope CurrentUser 这个命令解决问题
以上步骤 为手动引入文件 每次更新文件都需要 再次打包 执行webpack 。
7、执行 npm i webpack-dev-server -D
8、在package.json 中增加 dev 命令 如图
9、增加 后执行命令 npm run dev 项目输出 如图
重新整理项目文件目录 新建public 文件夹
将src 目录下的index.html 文件移动到 public 下 ，重新启动项目 即可
10、配置实时打包功能 执行命令 npm i html-webpack-plugin -D
11、导入在内存中自动生成的index页面插件
12、增加 如下代码
这样的话 我们就可以删掉在public / index.html 中手动引入的main.js 文件了
13、执行 npm i react react-dom -S 安装react-dom ：专门进行dom 操作，主要应用场景就是ReactDom.render()，
react:专门用于创建组件和虚拟dom，同事组件的生命周期都在这个包中
14、引入 react 和 react-dom
引入 创建 挂载 等操作
15、React.createElement 参数说明
参数1：创建元素的类型，字符串，标识元素名称
参数2：一个对象，其中绑定例如 class title 等属性参数，或者为null
参数3：绑定节点或者子节点。
参数n：其他节点
16、ReactDOM.render() 参数说明
参数1：要渲染的虚拟dom元素
参数2：指定html页面中 的一个元素容器
17、实现嵌套 如图
18、执行命令
npm i babel-core babel-loader babel-plugin-transform-runtime -D （插件）
npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D （语法）
这三个执行完后 再进行配置，就可以将JSX语法转换成浏览器识别的react-creatElement
19、安装完后 在webpack.config.js 文件中配置刚才安装的第三方loader。webpack默认只能处理打包，.js 后缀类型的文件；像.png .vue 等其他文件类型，无法主动处理，所以需要配置第三方loader
根目录下新建 .babelrc 文件 再配置 刚才安装好的第三方loader
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
注意：把上面所有的步骤执行完后 再重新运行 npm run dev 你的项目可能会报 Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. 这个错误，这是因为安装的babel-loader 版本不兼容导致的。可以把你本地的 babel-loader 版本切换为^7.1.2
删除掉原来的node_modules 包，重新执行 npm install 安装好后 再执行 npm run dev 运行 则无报错信息
20、配置 webpack 导入组件的时候省略文件后缀 如图
21、设置引入文件或者组件 alias 别名
以上步骤 完成后 基本上react 的框架就搭建完毕了，项目运行成功；
接下来引入一下第三方UI组件
我选择的是 ant-design 的UI 组件 官网：https://ant.design/docs/react/introduce-cn
执行安装命令 npm install antd --save
注意 ：有的时候执行上面步骤的会报错 这是因为npm 版本兼容问题导致的 如图报错
碰到这种情况的话 就执行 cnpm 操作。
今天就消化到这里吧，明天再去解决安装UI 控件 样式导入的问题，
还有一个 CSS 样式 模块处理的问题需要回顾一下。基本上 整个react.js 的框架就搭建完毕了。
哦，还有一个 axios 还没有处理。
22、处理引入的 css 文件问题
执行 npm i style-loader css-loader -D 打包处理CSS样式的第三方loader
配置文件中要增加 相应的规则 如图
23、安装 处理第三方字体文件的loader
执行
npm i url-loader -D
npm i file-loader -D
配置文件中增加 对应的匹配规则 如图
24、执行
cnpm i sass-loader node-sass -D
注意：
其实我上图的这个报错 是因为我引入的文件错误，之前引入了.less的样式文件，后来改为.css的文件就不报错了。但是还是需要安装对应的sass loader 工具，写自己的样式。
