React环境搭建

标签（空格分隔）： React

---

[TOC]

最近在研究React+Bootstrap来来写前端，搜了很多的教程，每个教程都教的各自一家，都不一样，而且很多自己尝试都还运行不起来。因为大部分教程都是教你怎么安装一整套的运行环境。这种方式其实不太利于初学者理解React的工作机制。经过一番折腾以后，决定直接去React官网去看官方文档。(最好的教程就是官方文档)

官方文档地址

下面提供两种安装方式，一种是官方提供的标准安装方法，一种是自己对React工作机制理解后的安装方式。
对于初学者推荐使用官方文档的方式。

React开发环境安装方法一(官方文档方式)

• 首先全局安装create-react-app模块

npm install -g create-react-app

• 通过create-react-app创建一个经典的hello-world项目

上一步安装create-react-app模块的时候是全局安装，所以不需要进入到你希望创建项目的那个目录。但这一步建议你先在命令行中cd进入到你希望把项目存放到的目录中，防止等会安装完以后不知道项目存放到了什么位置，然后执行以下命令创建项目

create-react-app hello-world

经过上诉复杂的安装步骤，你的React开发环境已经安装完毕，现在可以启动运行一下你的项目了

• 进入到项目目录并运行React项目

cd hello-world
npm start

注意
这段运行时界面出现等待的时间可能会比较长(根据你的网速)，因为index.html页面中的Bootstrap是通过cdn的方式获取的

当看到以下页面时，说明你的React环境已经搭建好了

React.png

推荐

由于通过npm方式获取国外资源速度太慢，所以建议切换到国内淘宝cnpm。通过执行以下命令即可全局安装cnpm

npm install -g cnpm

安装完以后，上诉所有通过npm安装的React的方式都可以将npm改成cnpm.速度会快很多

React开发环境搭建方法二

对React工作方式有了简单的了解以后，推出了下面这套方法。对于初学者，还是建议使用方法一中的官方文档推荐的方法来搭建环境。

方法二步骤如下:

• 创建一个package.json文件

首先在工作目录下创建一个package.json文件

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

• cd到package.json文件目录中，然后执行以下命令

npm install

现在,你的React开发环境就已经搭建好了，直接执行以下命令启动你的React工作环境即可

• 启动React

npm start

package.json文件注解

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

scripts字段

scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

下面的设置指定了npm run start、npm run build、npm run test、npm run eject时，所要执行的命令。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

dependencies字段，devDependencies字段

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

  "devDependencies": {
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },

对应的版本可以加上各种限定，主要有以下几种：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
latest：安装最新版本。

package.json文件可以手工编写，也可以使用npm init命令自动生成。

npm init

这个命令采用互动方式，要求用户回答一些问题，然后在当前目录生成一个基本的package.json文件。所有问题之中，只有项目名称（name）和项目版本（version）是必填的，其他都是选填的。

有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。

$ npm install express --save
$ npm install express --save-dev

上面代码表示单独安装express模块，--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。

具体详细的package.json解析请看大神的文章：package.json文件

如果你只是想用React做一个静态页面的话，可以使用之前写的这个方法React开发环境配置(方式一)