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，项目即可开始运行。
网友评论