2.2　本地环境搭建

在使用React之前，需要提前搭建React的开发环境。React有3种搭建环境的方式。

（1）引用React CDN资源：这种方式通过＜Script＞＜／Script＞标签引用后即可使用。

（2）通过npm安装React：这种方式使用包管理工具npm安装React。

（3）利用脚手架create-react-app来安装React。

第3种环境搭建方式适合React开发初学者，故本书以该方式讲解React的环境搭建。

Facebook为了简化开发者的环境搭建过程，提供了一个脚手架create-react-app，其提供了项目开发中通用的包依赖，开发者在利用create-react-app创建项目时，该脚手架会自动下载所有的依赖包，轻松地搭建React开发环境。目前create-react-app是市面上最流行的一个脚手架。

2.2.1　Node与npm安装

在讲述Node及npm安装之前，先带领读者熟悉一下这两种技术。npm已在1.4节中讲过，读者可以返回查阅。下面简单介绍一下Node。

2009年Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js，简称Node。Node是一个基于Chrome V8引擎的JavaScript运行环境，使用事件驱动、非阻塞的I/O模型，使其轻量而高效。简单来说，Node是运行在服务器端的JavaScript。

利用create-react-app搭建React开发环境之前，需要安装Node和npm，以前这两个包需要分别安装，后来npm注入Node中，所以现在安装了Node，就默认安装了npm。

Node官网下载链接为https://nodejs.org/en/download/current/。通过此链接进入官网，可以看到各个系统的Node版本，如图2-1所示。

图2-1　Node下载页面

目前Node最新并且稳定的版本为10.0.0。读者可以根据自己的系统情况对应下载Node并安装。安装完毕后，可通过查看Node版本号来确认是否安装成功，在终端输入命令“node–v”即可查看，如图2-2所示。

图2-2　查看Node版本号

提示

如果读者电脑曾安装过版本比较低的Node，想把Node升级为最新最稳定的版本，这里给读者一个小小的提示。不需要卸载后再安装，只需要执行以下命令即可：

由于Node自带npm，所以安装Node后，npm也已安装。查看npm是否安装成功，也可以通过查看其版本号来验证，命令为“npm –v”，如图2-3所示。

图2-3　查看npm版本号

2.2.2　打造属于你的编辑器

俗话说，工欲善其事，必先利其器。一个优秀的开发工具能够极大地提高前端工程师的开发效率。开发前端的IDE有很多，比如Dreamweaver、Sublime、IntelliJ IDEA、WebStorm等，就目前各大互联网公司的前端开发环境来说，多数前端工程师选用的是WebStorm，所以本书主要介绍WebStorm开发工具。

WebStorm是JetBrains公司旗下一款JavaScript开发工具，被国内前端工程师称为“前端开发神器”。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JavaScript功能。

WebStorm官网下载链接为http://www.jetbrains.com/webstorm/，通过该链接可以进入WebStorm下载界面，如图2-4所示。

图2-4　WebStorm下载页面

注：官网下载的WebStorm可以试用30天，试用期过后需要购买。

下载安装后，即可使用WebStorm。WebStorm集成了React的开发环境，在创建一个React App后，WebStorm会自动下载React需要的各种依赖包，无须开发者再次手动配置。该工具占用资源比较多，如果读者不喜欢，后面我们介绍项目时也会给出脚手架创建项目的方式，没有安装这个工具不会受到影响。

上一章目录下一章