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，之后进行初始化配置，初始化配置包含：入口、出口、模块、插件等。具体的代码如下：

var webpack = require('webpack');
var path = 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，项目即可开始运行。