React进阶（四）开发环境的搭建

成都这座城市真的很nice

React的官方文档中，为了新的学习者能够更加容易接受React，在最初的介绍中，告诉我们可以通过在js中引入React库，并且在js中直接如下使用。

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

但是我个人并不认同这样的入门方式，因为在实践中，我们几乎不会这样使用。

与Vue一样，React同样具有非常优秀的构建工具，但是由于推广方式的原因，知道Vue的同学，即使刚入门不久，都或多或少知道vue-cli，但是我想有很多知道React的新人，却并不知道create-react-app。

作为最易上手的react脚手架，create-react-app并不需要花费太多时间就能够掌握，大家只需要按照我接下来的步骤安装需要的环境即可。当然，想要配置一个功能更强大，更适合实践的脚手架，则还需要在此基础上做更多的扩展与配置。这个我们在开发中慢慢完善。

1. 安装node

从nodejs官方网站下载你的操作系统对应的node版本。和普通应用一样安装即可。

最好选择稳定版

该页面会自动推荐更合适你电脑的node版本。点击左侧大按钮，将会下载最新的稳定版本。右侧的大按钮可能会有一些更新的，但还处于测试阶段的新特性。因此我们通常选择左侧的下载。

node安装的同时，npm也会一起被安装。npm是一个js包管理工具，我们可以利用该工具下载我们需要的js库。例如我们需要在项目中引入jQuery。那么可以直接这么干。

// 仅在当前项目安装
> npm install jquery

// 全局安装
> npm install jquery -g

安装完成之后，通过查看node版本的方式确保node已经正常安装。

node -v

由于网络原因，当我们想要通过npm下载项目依赖包时，可能会很慢甚至直接无法下载，因此在使用时我们通常会使用淘宝NPM镜像。

首先使用如下指令安装cnpm，用以替换默认的npm

> npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm来安装想要的模块了。

> cnpm install jquery

当然，现在更多的人更偏向于使用另外一个新的包管理工具yarn。在后续的教程中，我们可能也会使用到yarn而不使用npm。大家可以访问yarn官方网站按照教程安装yarn。

通常能够使用npm安装的模块，都能够使用yarn来安装，他们的常用指令如下：

// 安装模块
> npm install lodash
> yarn add lodash

// 启动项目
> npm start
> yarn start

// 构建项目
> npm run build
> yarn build

入门时只需要记住几个简单的即可，在这里不建议深究更多的指令，在学习过程中慢慢掌握即可。

2. 安装一个好用的命令行工具

对于windows系统来说，我们可以直接使用系统自带的cmd。但是cmd比较难用。因此我个人比较推荐大家安装git，并通过git中的git.bash工具进行指令操作。

点击下载git

git下载页面

也是与安装其他应用一样，在电脑上安装好git，找到git的安装目录，我们会发现有一个bash工具。双击它即可使用。

对于mac系统来说，使用起来则相对简单，我们可以直接使用系统自带的terminal工具即可。当然，也可以安装更加好用的iTerm。

点击下载iTerm

iTerm2下载页面

通常我们在安装好iTerm之后，会下载一个非常好用的集成补丁oh my zsh。它为我们使用指令提供了非常多的快捷操作与舒适的补全提示。

// 安装oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

对美观有自己要求的同学可以选择对应的主题。

oh my zsh主题选择

3. 安装 create-react-app

如果刚才我们的包管理工具(npm/yarn)已经安装好，那么安装create-react-app就比较简单。

> yarn add create-react-app -g

添加-g表示全局安装

接下来我们就可以使用create-react-app来创建项目啦。

4. 创建第一个react项目

找到一个你专门用来存放项目的目录，例如我的目录名字叫做develop。在命令行工具中进入到这个目录，然后使用如下指令创建项目。

// 进入目录
> cd develop

// 创建项目
> create-react-app first-react-app

创建完成之后，我们可以看到类似如下图所示的界面。

具体的操作指令都已经告诉我们啦

// 进入项目
> cd firstapp

// 启动项目
> yarn start

// 打包项目
> yarn build

// 暴露出项目的具体配置，以便于在此基础上扩展/修改更多的配置
> yarn eject

进入并启动项目，在浏览器中输入http://localhost:3000，我们可以看到如下界面。

第一个react项目

注意关注这里的两个地址

在命令行工具中，注意关注这里的提示。我们可以直接在电脑中输入http://localhost:3000访问项目。同时，我们也可以输入http://192.168.0.101:3000访问项目。如果你的手机与电脑处于同一局域网，我们也可以通过该地址在手机上访问项目，这对于移动端开发的调试非常有用。

手机上访问

5. 认识项目

打开项目，我们可以看到如下目录。

项目结构

• node_modules

node_modules文件夹是项目所有依赖包的存放地址，除了在项目初始化时安装的所必须的依赖包之外，我们后续通过yarn/npm安装的包都存放在该目录下。

• package.json 与 yarn.lock

项目的配置文件与依赖包的描述文件。目前我们暂时还不需要对他们有过多的了解。在未来如果你要学习webpack等构建工具时才会深入的了解他们。

• public

项目的入口文件。通常我们会将index.html存放在该目录里。

• src

模块与组件的存放目录。在create-react-app创建的项目中，每一个单独的文件都可以被看成一个模块，例如单独的image，单独的css，单独js等，而所有的组件都存放于src目录中，其中index.js则是js的入口文件。

通常我们创建一个web页面，则需要分别通过link与script标签引入对应的css与js文件。但是在create-react-app的开发环境中，构建工具帮助我们自动完成了这些操作，我们只需要按照当前开发环境的简单规则来组织自己的代码即可。当我们通过yarn build打包项目之后，我们会看到html页面则变成了我们熟知的样子。