搭建react 项目过程

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、实现嵌套如图

在JS 文件中写入的 html 语法叫做JSX 语法，符合 XML 规范，但是需要下载babel 进行转换

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 导入组件的时候省略文件后缀如图