
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需要的各种依赖包,无须开发者再次手动配置。该工具占用资源比较多,如果读者不喜欢,后面我们介绍项目时也会给出脚手架创建项目的方式,没有安装这个工具不会受到影响。