配置React项目的运行环境

两种配置react项目运行环境的方法

第一种方法，一步步配置项目的运行环境：
1）下载node，在官方网站可以下载，安装步骤不难，差不多一步步意
点next就行；
2）运行cmd 输入node -v npm -v两行命令检查是否安装成功；
3）接下来在cmd下输入npm install -g webpack (最好使用cnpm命令进行下载，快一点)，全局安装webpack打包软件；
4）然后输入npm install -g webpack-cli 全局安装webpack-cli脚手架；
5）接下来安装webpack-dev-server,介绍一下这个是什么webpack-dev-server是一个小型的Node.js Express服务器，注意知识点：“服务器，可以将我们打包好的工程项目运行在浏览器上，在终端输入
npm install webpack-dev-server就可以完成下载；
6）安装html-webpack-plugin插件，加快浏览器的访问速度，使用html-webpack-plugin插件来启动页面 可将html页面放入内存 以提升页面的加载速度 ,并且还能自动设置index.html页面中JS文件引入的路径,(安装好插件后得在webpack-config-js中进行配置）

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    entry: './src/script/main.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'head'
        })
    ]
}

根据自己项目中的文件路径来配置；
7）上面安装的都是关于项目的，方便我们对项目的操作。接下来将要安装我们编写项目的框架react。
打开终端输入npm install react 安装react组件；
然后输入npm install react-dom 安装react虚拟dom；

通过上面的步骤已经完成了初步react项目环境的搭建。在终端输入npm run dev就可以看见自己的项目运行效果图。如果后续项目还有什么功能需求，可以通过npm进行安装。

注释：方法只讲了大致的步骤，有一些细小的代码编写就没有细说！

第二种方法，这种方法就是在第一种方法上面的浓缩，封装。
1）第一步还是一样安装node 并检查是否安装成功，这里就不细说了；
2）打开cmd全局安装react项目搭建脚手架；输入npm install -g creacte-react-app命令（等待时间可能有点久）；
3）然后在cmd中输入creacte-react-app 项目名 （注意项目名的命名规范）
4）在编译器终端中输入npm start运行程序即可；

参考文献：用脚手架搭建react项目

总结：第一种方法虽然步骤繁多，但是可以一步步让我们理解项目环境的搭建过程，便于理解；第二种方法，优点在于便捷，一两步就可以解决，但是对于初学者来说不能理解所搭建的项目的构成。