1.3 开发环境及工具介绍
“工欲善其事，必先利其器”。开发React应用需要一个由众多开发工具组建成的开发环境，这个复杂的开发环境也大大提高了应用的开发和调试效率。本节将简要介绍本书使用到的相关开发工具。
1.3.1 基础环境
1．Node.js
Node.js是一个JavaScript运行时，它让JavaScript在服务器端运行成为现实。React应用的执行并不依赖于Node.js环境，但React应用开发编译过程中用到的很多依赖（例如NPM、Webpack等）都是需要Node.js环境的。所以，在开发React应用前，需要先安装Node.js。Node.js的官方下载地址为https://nodejs.org。本书使用的Node.js的版本号为v8.4.0，建议读者安装的Node.js的版本不要低于本书使用的版本。
2．NPM
NPM是一个模块管理工具，用来管理模块的发布、下载及模块之间的依赖关系。开发React应用时，需要依赖很多其他的模块，这些模块就可以通过NPM下载。NPM已经集成到Node.js的安装包中，所以不需要单独安装。另外，Facebook联合Exponent、Google和Tilde共同推出了另一个模块管理工具Yarn（https://yarnpkg.com），可以作为NPM的替代工具。本书使用的是NPM。
1.3.2 辅助工具
1．Webpack
Webpack是用于现代JavaScript应用程序的模块打包工具。Webpack会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有模块打包到少量文件中。Webpack不仅可以打包JS文件，配合相关插件的使用，它还可以打包图片资源和样式文件，已经具备一站式的JavaScript应用打包能力。Webpack本身就是一个模块，因此可以通过NPM等模块管理工具安装。
2．Babel
我们已经提到，React应用中会大量使用ES 6语法，但是目前的浏览器环境并不完全支持ES 6语法。Babel是一个JavaScript编译器，它可以将ES 6及其以后的语法编译成ES 5的语法，从而让我们可以在开发过程中尽情使用最新的JavaScript语法，而不需要担心代码无法在浏览器端运行的问题。Babel一般会和Webpack一起使用，在Webpack编译打包的阶段，利用Babel插件将ES 6及其以后的语法编译成ES 5语法。
3．ESLint
ESLint是一个插件化的JavaScript代码检测工具，它既可以用于检查常见的JavaScript语法错误，又可以进行代码风格检查，从而保证团队内不同开发人员编写的代码都能遵循统一的代码规范。使用ESlint必须要指定一套代码规范的配置，然后ESlint就会根据这套规范对代码进行检查。目前，业内比较好的规范是Airbnb的规范，但这套规范过于严格，并不一定适合所有团队。在实际使用时，可以先继承这套规范，然后在它的基础上根据实际需求对规范进行修改。
4．代码编辑器
你可以在任何编辑器上编写React应用的代码，但一款好的编辑器能大大提高你的开发效率。本书推荐使用微软出品的Visual Studio Code（简称VS Code），它的操作简洁、功能强大，本书中的示例代码均在VS Code中完成，读者可自行到官方网站下载安装，地址为：https://code.visualstudio.com。此外，Sublime Text、Atom和WebStorm也是使用较多的代码编辑器。
1.3.3 Create React App
Webpack、Babel等工具是开发React应用所必需的，但这些工具的使用方法又比较烦琐，尤其是Webpack的使用，需要大量篇幅才能介绍清楚。为了避免读者还没有开始使用React，就被各种辅助工具的使用搞得“头晕目眩”，本书借助React官方提供的脚手架工程Create React App（https://github.com/facebookincubator/create-react-app）创建React应用。Create React App基于最佳实践，将Webpack、Babel、ESlint等工具的配置做了封装，使用Create React App创建的项目无须进行任何配置工作，从而使开发者可以专注于应用开发。
注意
虽然本书没有详细介绍Webpack、Babel等工具，但并不说明它们不重要，事实上，它们是现代Web开发工程化体系中的重要内容。建议读者在掌握React后，系统地学习这些工具。
1．安装
打开命令行终端，依次输入以下命令：
通过使用–g参数，我们将create-react-app安装到了系统的全局环境，这样就可以在任意路径下使用它了。
2．创建应用
使用create-react-app创建一个新应用，在命令行终端执行：
这时会在当前路径下新建一个名为my-app的文件夹，my-app也就是我们新创建的React应用。
3．运行应用
在命令行终端执行：
当应用启动成功后，在浏览器地址栏输入http://localhost:3000即可访问应用，界面如图1-1所示。
图1-1
用VS Code打开my-app文件夹，文件夹内的目录结构如图1-2所示。
图1-2
node_modules文件夹内是安装的所有依赖模块；package.json文件定义了项目的基本信息，如项目名称、版本号、在该项目下可执行的命令以及项目的依赖模块等；public文件夹下的index.html是应用的入口页面；src文件夹下是项目源代码，其中index.js是代码入口。
index.js导入了模块App.js，修改App.js，将它的render方法修改如下：
保存文件后，可以发现浏览器页面实时进行了更新，这是因为Create React App也包含热加载功能，可实时更新代码变化。新的页面白色背景区域显示“Hello，world!”，如图1-3所示。
图1-3
至此，我们完成了第一个React应用。