React提高08 Create React App

已同步到个人博客，欢迎访问。

一个由Facebook官方出品的React脚手架工具，无需额外配置，迅速搭建React应用脚手架。

这里只对它进行简单的尝试和入门，如果需要进一步的学习，官网在这里，文档在这里，也可以参考这篇文章进行更高阶更深入的配置和学习。

使用Create React App开发React应用不必再安装Webpack或者Babel，它们已经被内置在脚手架中了

它提供的功能：

1. 开箱即用的React支持
2. 开发模式和生产模式的编译
3. 开发模式的热更新
4. 提供了单元测试测试的接口支持
5. 其他配置工具的默认配置（亦可以个性化配置）

快速开始

npx create-react-app my-app
cd my-app
npm start

React应用会运行在http://localhost:3000/，开发完成后使用npm run build打包

安装

安装需要Node的版本在8.10.0以上

# 使用npx
npx create-react-app my-app

# npm在5.1版本下不能使用npx
# 需要使用npm，首先进行全局安装
npm install -g create-react-app
# 创建应用
create-react-app my-app

运行

npm start

在http://localhost:3000以开发模式运行React应用，页面提供了热跟新功能，在控制台会显示错误和警告。

单元测试

基本使用

npm test

使用Jest运行单元测试，默认情况下会运行从上次提交commit后有改动的文件的单元测试。

需要react-scripts@0.3.0及更高版本，老项目开启单元测试看这里。

Jest是基于Node的运行期，速度很快，并且动过jsdom提供了浏览器的全局变量，比如window，但Jest对于DOM的测试是不准确的，它的目的是对逻辑和组件进行单元测试，而非测试DOM

在运行时Jest会自动寻找以test.js/spec.js或者__tests__文件夹下以.js结尾的文件，这些文件可以位于src目录下任意深度的文件夹内。

建议将测试文件（或__test__文件夹）和北侧文件放在一起，有两个好处：

1. 便于管理，一眼就能看到文件的单元测试文件
2. 引入组件的时候更简洁, 例如import App from './App'

命令行接口

使用npm test时，Jest会以watch模式运行，每次更改文件都会重新运行测试文件

这个模式下的命令行接口提供了各种能力，可以一直开着这个窗口进行快速的重复测试

版本管理接口

使用npm test默认情况下会运行从上次提交commit后有改动的文件的单元测试。可以在watch模式下按a来要求Jest执行全部的测试

如果当前的工程没有使用版本管理，那么Jest会默认运行全部的测试

测试组件

关于Jest的使用，以前学习在Vue中使用Jest时总结过，Jest的基本用法是相同的，在测试组件时有所区别，Vue测试组件使用的将组件和Jest进行连接的工具是Vue-test-utils，而React则是Enzyme（更准确些，jest-enzyme更接近于Vue-test-utils，封装了很多方便的API）

内容比较多，这里不展开，文档在这里，慢慢单独学习。

构建生产文件

npm run build

打包出的文件是经过压缩的，文件名带有Hash值

个性化配置

因为Create-React-App将Webpack、Babel、ESLit的配置隐藏起来，简化了用户的配置操作