React系列（二）：React环境安装与初始化

React环境安装与初始化

本文主要对React项目的初始化与环境配置进行讲解，其中涉及到NodeJS的安装与使用、前端自动化构建工具——webpack的使用与配置、React项目的初始化配置等。

NodeJS安装

项目初始化

React环境配置

webpack配置

1、NodeJS安装

打开Node官网：http://nodejs.cn/。 进入下载页面，选择与自己电脑相对应的文件进行下载； 

下载node工具之后，进行默认安装，安装成功之后，打开电脑的命令面板(cmd打开)。 

版本检查：

检查node版本，在面板输入node –v；

检查npm环境，在面板输入npm –v。

具体如图： 

2、项目初始化

在命令面板通过文件访问，打开当前需要构建的项目目录，本例以在C盘某一文件夹为例，在本文件夹初始化项目，使用语句npm init ，之后需要设置相关的项目信息（回车键默认即可），最终生成配置文件package.json文件。 

具体如图所示： 

3、React环境配置

React环境安装需要配置相关文件，如下：

安装依赖：npm install react react-dom babelify babel-preset-react –save

安装ES6支持：npm install babel-preset-es2015 babel-loader –save

安装完成之后，package.json文件如下： 

4、webpack配置

完成项目环境安装之后，需要进行webpack热加载配置需要进行全局安装与项目安装，在命令面板输入：

全局安装 npm install -g webpack webpack-dev

项目安装 npm install webpack webpack-dev –save

在项目目录下新建配置文件：webpack.config.js，之后进行初始化配置，初始化配置包含：入口、出口、模块、插件等。具体的代码如下：

varwebpack =require('webpack');varpath =require('path');module.exports= {context: __dirname +"/src",entry:"./js/index.js",module: {loaders: [            {test:/\.js?$/,exclude:/(node_modules)/,loader:'babel-loader',query: {presets: ['react','es2015']                }            }        ]    },output: {path: __dirname +"/src",filename:"bundle.js"}};

此文件中需要寻找入口文件，在src文件夹下的js目录下的index.js，之后打包之后在src文件夹下生成bundle.js，完成配置之后，在命令面板输入webpack或者webpack –watch即可运行项目，如下是运行成功状态： 

最终项目目录如下： 

完成所有配置与代码书写，在网页文件index.html中引入打包后文件，如下： 

最后打开当前页面，页面会弹窗：“项目初始化”

总结

综上，我们完成了React项目的基本配置与初始化，使用了webpack热加载来进行项目管理，如需要完整项目初始化文件包请自行下载：

链接：https://pan.baidu.com/s/1dHgxvcH 密码：g03g

下载完毕之后，在命令面板丁文当当前项目，之后输入npm install进行环境安装，安装完毕之后，输入webpack，项目即可开始运行。