一、快速入门

1、创建应用程序

你需要在本地开发计算机上使用 Node >= 6（但在服务器上不需要）。 你可以使用 nvm (macOS/Linux) 或 nvm-windows 轻松地在不同项目之间切换 Node 版本。

要创建新应用，你可以选择以下方法之一：

npx

npx create-react-app my-app

(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)

npm

npm init react-app my-app

npm init <initializer> 在 npm 6+ 中可用

Yarn

yarn create react-app my-app

yarn create 在 Yarn 0.25+ 中可用

2、输出(文件夹结构)

运行任何这些命令都会在当前目录中创建一个名为 my-app 的目录。在该目录中，它将生成初始项目结构并安装依赖项：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

没有配置或复杂的文件夹结构，只是构建应用程序所需的文件。安装完成后，你可以打开项目目录：

cd my-app

3、Scripts

在新创建的项目中，你可以运行一些内置命令：

npm start 或 yarn start

在开发模式下运行应用程序。 打开 http://localhost:3000 在浏览器中查看它。

如果你更改代码，页面将自动重新加载。 你将在控制台中看到构建错误和 lint 警告。

npm test 或 yarn test

以交互模式运行测试观察程序。 默认情况下，运行与上次提交后更改的文件相关的测试。

详细了解测试。

npm run build 或 yarn build

将生产环境的应用程序构建到 build 目录。 它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。

构建将被压缩，文件名中将包含哈希。

这样应用即是已准备好部署。

4、支持的浏览器和特性

支持的浏览器

默认情况下，生成的项目支持所有现代浏览器。 如果你的项目想支持 Internet Explorer 9 , 10 和 11 ，那么需要 polyfills。

支持的语言特性

该项目支持最新 JavaScript 标准的超集。 除了 ES6 语法功能外，它还支持：

• 指数运算符 (ES2016).
• Async/await (ES2017).
• Object Rest(剩余)/Spread(展开) 属性 (ES2018).
• 动态 import() (stage 3 proposal)
• Class 字段和静态属性 (part of stage 3 proposal).
• JSX, Flow 和 TypeScript.

详细了解 不同的提案阶段 。

虽然我们建议谨慎使用实验性建议，但 Facebook 在产品代码中大量使用这些功能，因此如果这些提案中的任何一个在将来发生变化，我们打算提供 codemods 。

请注意，**此项目默认不包含 polyfills **。

如果你使用任何其他需要 运行时（runtime）支持 的 ES6+ 特性（例如 Array.from() 或 Symbol ），请确保 手动包含相应的 polyfill ，或者你所定位的浏览器已经支持它们。

更新到新版本

Create React App 分为两个包：

• create-react-app 是一个全局命令行实用程序，可用于创建新项目。
• react-scripts 是生成项目中的开发依赖项（包括此项）。

你几乎从不需要更新 create-react-app 本身：它将所有设置委托给 react-scripts 。

当你运行 create-react-app 时，它始终使用最新版本的 react-scripts 创建项目，以便你自动获得新创建的应用程序中的所有新功能和改进。

要将现有项目更新为新版本的 react-scripts ，请 打开更改日志 ，找到你当前所在的版本（如果你不确定，请查看此文件夹中的 package.json ），并应用新版本的迁移说明说明。

在大多数情况下，在 package.json 中替换 react-scripts 版本，并在此文件夹中运行 npm install (或 yarn install) 应该已经足够了，但最好查看 更改日志 以了解潜在的重大更改。

二、开发

设置编辑器

如果配置正确，Create React App 附带了许多可以改善编辑器体验的工具。 这里有一些提高效率的技巧：

语法高亮显示

要在你喜欢的文本编辑器中配置语法高亮显示，请转到 相关的 Babel 文档页面 并按照说明进行操作。 一些最受欢迎的编辑已经都覆盖到了。

在编辑器中显示 Lint 输出

注意：此功能适用于 react-scripts@0.2.0 及更高版本。
它也适用于 npm 3 或更高版本。

一些编辑器，包括 Sublime Text，Atom 和 Visual Studio Code，都为 ESLint 提供了插件。

他们不是必需的。你应该在终端和浏览器控制台中查看 linter 输出。但是，如果你希望在编辑器中显示 lint 结果，则可以执行一些额外的步骤。

你需要先为编辑器安装 ESLint 插件。 然后，将名为 .eslintrc.json 的文件添加到项目根目录：

{
  "extends": "react-app"
}

现在你的编辑应该报告 linting 警告了。

请注意，即使你进一步编辑 .eslintrc.json 文件，这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。

如果要为项目强制执行编码风格，请考虑使用 Prettier 而不是 ESLint 样式规则。

在编辑器中进行调试

目前只有 Visual Studio Code 和 WebStorm 支持此功能。

Visual Studio Code 和 WebStorm 支持使用 Create React App 开箱即用的调试。这使你作为开发人员可以在不离开编辑器的情况下编写和调试 React 代码，最重要的是，它使你能够拥有连续开发工作流，其中上下文切换是最小的，因为你不必在工具之间来回切换。

Visual Studio Code

你需要安装最新版本的 VS Code 和 VS Code Chrome Debugger Extension 。

然后将下面的代码块添加到 launch.json 文件中，并将其放在应用程序根目录中的 .vscode 文件夹中。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

注意：如果你对 HOST 或 PORT 环境变量 进行了调整，则 URL 可能会有所不同。

通过运行 npm start 启动应用程序，然后按 F5 或单击绿色调试图标在 VS Code 中开始调试。你现在可以编辑代码，设置断点，更改代码，以及从编辑器调试新修改的代码。

有 VS Code 调试问题？请参阅 故障排除指南。

自动格式化代码

Prettier 是一个固定的代码格式化程序，支持 JavaScript ，CSS 和 JSON 。使用 Prettier，你可以自动格式化你编写的代码，以确保项目中的代码风格。有关详细信息，请参阅 Prettier 的 GitHub 页面 ，并在 此页面查看其实际效果。

要在 git 中进行提交时格式化代码，我们需要安装以下依赖项：

npm install --save husky lint-staged prettier

或者你可以使用 yarn:

yarn add husky lint-staged prettier

• husky 使得使用 githooks 变得很容易，就好像它们是 npm 脚本一样。
• lint-staged 允许我们在 git 中的 staged 文件上运行脚本。有关 lint-staged 的更多信息，请参阅 这篇博客文章。
• prettier 的是我们将在提交运行之前的 JavaScript 格式化程序。

现在，我们可以通过向项目根目录中的 package.json 添加几行来确保每个文件的格式正确。

将以下字段添加到 package.json ：

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

接下来，我们在 package.json 中添加一个 'lint-staged' 字段，例如：

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {

现在，无论何时进行提交，Prettier 都会自动格式化已更改的文件。你也可以在配置完成后运行一次 ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" 来格式化整个项目。

接下来，你可能希望将 Prettier 集成到你喜欢的编辑器中。阅读 Prettier GitHub页面上的 编辑器集成 部分。

隔离开发组件

通常，在应用程序中，你有许多 UI 组件，并且每个组件都有许多不同的 states(状态)。 例如，一个简单的按钮组件可以具有以下 states(状态)：

• 在常规状态下，带有文本标签。
• 在禁用模式下。
• 处于加载状态。

通常，如果没有运行示例应用程序或一些示例，很难看到这些状态。

默认情况下，Create React App 不包含任何工具，但你可以轻松地将 Storybook for React (源代码) 或 React Styleguidist (源代码) 添加到项目中。这些是第三方工具，可让你开发组件并独立于应用程序查看其所有状态。

你还可以将 Storybook 或 风格指南 部署为静态应用程序。 这样，团队中的每个人都可以查看和查看 UI 组件的不同状态，而无需启动后端服务器或在应用中创建帐户。

Storybook 入门

Storybook 是 React UI 组件的开发环境。 它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。

在应用程序的目录中运行以下命令：

npx -p @storybook/cli sb init

之后，请按照说明进行操作。

了解有关 React Storybook 的更多信息：

• 学习 Storybook (tutorial)
• 文档
• GitHub 仓库
• Snapshot Testing UI 使用 Storybook + addon/storyshot

Styleguidist 入门

Styleguidist 结合了一个风格指南，其中所有组件都显示在一个页面上，包含 props 文档和用法示例，以及一个独立开发组件的环境，类似于 Storybook 。 在Styleguidist 中，你可以在 Markdown 中编写示例，其中每个代码段都呈现为可以实时可编辑的操练场。

首先，安装 Styleguidist:

npm install --save react-styleguidist

或者你可以使用 yarn:

yarn add react-styleguidist

然后，将这些脚本添加到 package.json:

   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

然后，在应用程序的目录中运行以下命令：

npm run styleguide

之后，请按照说明进行操作。

了解有关 React Styleguidist 的更多信息：

• GitHub 仓库
• 文档

分析 Bundle (包) 大小

Source map explorer 使用 source maps 分析 JavaScript 包。 这有助于你了解代码膨胀的来源。

要将 Source map explorer 添加到 Create React App 项目，请按照下列步骤操作：

npm install --save source-map-explorer

或者你可以使用 yarn:

yarn add source-map-explorer

然后在 package.json 中，将以下行添加到 scripts 中：

   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

然后分析 bundle(包) 运行生产构建然后运行分析脚本。

npm run build
npm run analyze

在开发环境中使用 HTTPS

注意：此功能适用于 react-scripts@0.4.0 及更高版本。

你可能需要开发服务器通过 HTTPS 提供页面。 当 API 服务器本身为 HTTPS 服务时，使用 "proxy"（代理）功能 将请求代理到 API 服务器，这可能是有用的。

为此，请将 HTTPS 环境变量设置为 true ，然后像往常一样使用 npm start 启动开发服务器：

Windows (cmd.exe)

set HTTPS=true&&npm start

（注意：缺少空格是必须的。）

Windows (Powershell)

($env:HTTPS = "true") -and (npm start)

Linux, macOS (Bash)

HTTPS=true npm start

请注意，服务器将使用自签名证书，因此你的 Web 浏览器在访问页面时基本上会显示警告。

三、样式和资源

添加一个样式表

此项目设置使用 Webpack 处理所有资源。 Webpack 提供了一种自定义方式，可以将导入概念 “扩展” 到 JavaScript 之外。 要表明 JavaScript 文件依赖于某个 CSS 文件，你需要 在 JavaScript 文件中导入 CSS：

Button.css

.Button {
  padding: 20px;
}

Button.js

import React, { Component } from 'react';
import './Button.css'; // 告诉 Webpack Button.js 使用这些样式

class Button extends Component {
  render() {
    // 你可以将它们用作常规 CSS 样式
    return <div className="Button" />;
  }
}

对于 React 来说，这不是所必需的，但很多人发现这个功能很方便。 你可以在这里了解这种方法的好处。但是你应该意识到，这使得你的代码很难以移植到除 Webpack 之外的其他构建工具和环境中。

在开发过程中，通过这种方式表达依赖关系，可以在编辑样式时会动态重新加载样式。 在生产中，所有 CSS 文件将连接到构建输出中的单独压缩的 .css 文件中。

如果你担心使用特定于 Webpack 的语义，可以将所有 CSS 放入 src/index.css 中。 他仍然会从 src/index.js 导入，但是如果稍后迁移到其他构建工具，则可以随时删除该导入。

添加 Sass 样式表

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

通常，我们建议你不要在不同的组件中重用相同的 CSS 类。 例如，我们建议不要在 <AcceptButton> 和 <RejectButton> 组件中使用同一个 .Button CSS 类，而是使用自己的 .Button 样式创建一个 <Button> 组件，<AcceptButton> 和 <RejectButton>都可以渲染（但 不是继承）。

遵循这个规则通常会使 CSS 预处理器变得不那么有用，因为 mixins 和嵌套等功能会被组件组合所取代。 但是，如果你觉得 CSS 预处理程序有价值，你可以集成它。

要使用Sass，首先安装 node-sass ：

$ npm install node-sass --save
$ # or
$ yarn add node-sass

现在你可以将 src/App.css 重命名为 src/App.scss 并更新 src/App.js 以导入 src/App.scss 。 此文件和任何其他文件将会自动编译，如果使用扩展名 .scss 或 .sass 导入的话。

要在 Sass 文件之间共享变量，可以使用 Sass 导入。 例如，src/App.scss 和其他组件样式文件可能包含 @import "./shared.scss"; 中定义的变量。

允许你像这样导入

@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下
@import '~nprogress/nprogress'; // 从 nprogress node模块导入 一个 css 文件

注意：  你必须在 node_modules 之前添加 ~ 前缀，如上所示。

node-sass 还支持 SASS_PATH 变量。

要使用你指定的相对路径导入，并且在不添加 ~ 前缀的情况下从 node_modules 使用导入，可以在项目根目录中使用变量 SASS_PATH=node_modules:src 添加 .env 文件。 要指定更多目录，可以将它们添加到 SASS_PATH ，用 : 分隔，例如 path1:path2:path3 。

如果你设置 SASS_PATH=node_modules:src ，这将允许像这样导入

@import 'styles/colors'; //假设 src/ 下的 styles 目录中存在 _colors.scss 文件。 
@import 'nprogress/nprogress'; // // 从 nprogress node模块导入 一个 css 文件

提示：  你也可以选择将此功能与 CSS modules 配合使用！

注意：  如果你正在使用Flow，请覆盖 .flowconfig 中的 module.file_ext 设置，以便它识别 .sass 或 .scss 文件。 你还需要包含 .js，.jsx，.mjs 和 .json文件的 module.file_ext 默认设置。

[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.mjs
module.file_ext=.json
module.file_ext=.sass
module.file_ext=.scss

添加图片，字体和文件

使用 Webpack，添加图片和字体等静态资源的工作方式与 CSS 类似。

你可以 直接在 JavaScript 模块中 import 文件。 这会告诉 Webpack 将该文件包含在 bundle(包) 中。 与 CSS 导入不同，导入文件会为你提供字符串值。 此值是你可以在代码中引用的最终路径，例如 image 的 src 属性或链接到 PDF 的 href 属性。

要减少对服务器的请求数，导入小于 10,000 字节的图片将返回 data URI 而不是路径。 这适用于以下文件扩展名：bmp ，gif ，jpg ，jpeg 和 png 。 由于 #1153 ，SVG文件被排除在外。

例如：

import React from 'react';
import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 导入结果是图片的 URL 
  return <img src={logo} alt="Logo" />;
}

export default Header;

这确保了在构建项目时，Webpack 可以正确地将该图片移动到构建文件夹中，并为我们提供正确的路径。

这也适用于 CSS ：

.Logo {
  background-image: url(./logo.png);
}

Webpack 在 CSS 中找到所有相关模块引用（它们以 ./ 开头），并用编译后的 bundle(包) 中的最终路径替换它们。如果输入拼写错误或意外删除重要文件，你将看到编译错误信息，就像导入不存在的 JavaScript 模块一样。编译包中的最终文件名由 Webpack 从内容哈希生成。如果文件内容将来发生变化，Webpack 将在生产中为其指定一个不同的名称，因此你无需担心这些静态资源的长期缓存。

请注意，这也是 Webpack 的自定义功能。

React 不需要它，但许多人喜欢它（ React Native 使用类似的图片机制）。
处理静态资源的另一种方法将在下一节中介绍。

添加 SVG

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

上面的部分介绍了添加 SVG 文件的一种方法。你还可以直接导入 SVG 作为 React 组件。你可以使用这两种方法中的任何一种。在你的代码中，它看起来像这样：

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo 是一个实际的 React 组件 */}
    <Logo />
  </div>
);

如果你不想将 SVG 作为单独的文件加载，这很方便。不要忘记导入中的花括号！ ReactComponent 导入名称是特殊的，它告诉 Create React App 你想要一个渲染 SVG 的 React 组件，而不是它的文件名。```

使用 public 文件夹

注意：此功能适用于 react-scripts@0.5.0 及更高版本。

更改HTML

public 文件夹包含 HTML 文件，因此你可以对其进行调整，例如，设置页面标题。带有编译代码的 <script> 标记将在构建过程中自动添加到该标记中。

在模块系统之外添加静态资源

你还可以将其他资源添加到 public 文件夹。

请注意，我们通常建议你改为在 JavaScript 文件中导入资源。例如，请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处：

• 脚本和样式被压缩并打包在一起，以避免额外的网络请求。
• 缺少文件会导致编译错误，而不是给用户 404 错误。
• 结果文件名包含内容哈希，因此你无需担心浏览器会缓存旧版本。

但是，你可以使用 escape hatch(逃生舱)  ，在模块系统之外添加资源。

如果将文件放入 public 文件夹，Webpack 将 不会 处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。

在 index.html 中，你可以像这样使用它：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。如果你需要使用 src 或 node_modules 中的文件，则必须将其复制到 public 文件夹，以显式指定将该文件作为构建的一部分的意图。

当你运行 npm run build 时，Create React App 将使用正确的绝对路径替换 %PUBLIC_URL% ，这样即使你使用客户端路由或将其托管在 non-root 上，你的项目也能正常工作。

在 JavaScript 代码中，你可以使用 process.env.PUBLIC_URL 用于类似目的：

render() {
  // 注意：这是一个逃生舱（escape hatch），应该谨慎使用！
  // 通常我们建议使用`import`来获取资源的 URL 
  // 如我们上一节 “添加图片和字体”中所述。
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

请记住这种方法的缺点：

• public 文件夹中的所有文件都不会进行后处理或压缩。
• 在编译时不会调用丢失的文件，并且会导致用户出现 404 错误。
• 结果文件名不包含内容哈希值，因此你需要添加查询参数或在每次更改时重命名它们（，以便清除浏览器缓存）。

何时使用 public 文件夹 When to Use the public Folder

通常我们建议从 JavaScript 导入 stylesheets ，图片和字体 。 public文件夹可用作许多不常见情况的变通方法：

• 你需要在构建输出中具有特定名称的文件，例如 manifest.webmanifest 。
• 你有数千张图片，需要动态引用它们的路径。
• 你希望在打包代码之外包含一个像 pace.js 这样的小脚本。
• 某些库可能与 Webpack 不兼容，你没有其他选择，只能将其包含为 <script> 标记。

请注意，如果添加声明全局变量的 <script> ，则还需要阅读有关使用它们的下一部分。

四、构建app

安装依赖项

生成的项目包括 React 和 ReactDOM 作为依赖项。 它还包括 Create React App 用作开发依赖项的一组 scripts 。 你可以使用 npm 安装其他依赖项（例如，React Router）：

npm install --save react-router-dom

或者你可以使用 yarn:

yarn add react-router-dom

这适用于任何库，而不仅仅是 react-router-dom 。

导入组件

感谢 Webpack ，该项目设置支持 ES6 modules。
虽然你仍然可以使用 require() 和 module.exports ，但我们建议你使用 import 和 export。

例如：

Button.js

import React, { Component } from 'react';

class Button extends Component {
  render() {
    // ...
  }
}

export default Button; // 别忘了使用 export default ！ 

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; // 从其他文件导入一个组件

class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}

export default DangerButton;

请注意 默认导出和命名导出之间的区别。 这是一个常见的错误来源。

我们建议你在模块仅导出单个内容（例如，组件）时坚持使用默认import 和 export。 当你使用 export default Button 时，可以使用 import Button from './Button'导入。

命名导出对于导出多个函数的实用程序模块很有用。 一个模块最多可以有一个默认导出和任意多个命名导出。

了解有关ES6模块的更多信息：

• 什么时候使用花括号？
• 探索ES6：Modules （中文）
• 了解ES6：Modules

使用全局变量

当你在 HTML 文件中包含一个定义全局变量的脚本，并试图在代码中使用这些变量之一时，linter 将会出警告，因为它无法发现变量的定义。

你可以通过从 window 对象中显式读取全局变量来避免这种情况，例如：

const $ = window.$;

这显然是你故意使用全局变量而不是因为拼写错误。

或者，你可以通过在其后添加 // eslint-disable-line 来强制 linter 忽略该行。

添加 Bootstrap

你不必将 reactstrap 与 React 一起使用，但它是一个用于集成 Bootstrap 和 React 应用程序的流行库。 如果需要，可以按照以下步骤将其与 Create React App 集成：

从 npm 安装 reactstrap 和 Bootstrap 。 reactstrap 不包括 Bootstrap CSS 所以这也需要安装：

npm install --save reactstrap bootstrap@4

或者你可以使用 yarn:

yarn add bootstrap@4 reactstrap

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS ：

import 'bootstrap/dist/css/bootstrap.css';
// 在下面放置任何其他导入，
// 以便组件中的CSS优先于默认样式。

在 src/App.js 文件或自定义组件文件中导入所需的 reactstrap 组件：

import { Button } from 'reactstrap';

现在，你已准备好在 render 方法中定义的组件层次结构中使用导入的 reactstrap 组件。 这是使用 reactstrap 重构的 App.js 的示例。

使用自定义主题

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

有时你可能需要调整 Bootstrap（或等效包）的视觉样式。
从 react-scripts@2.0.0 开始，你可以导入 .scss 文件。 这使得可以将包的内置 Sass 变量用于全局样式首选项。

要自定义 Bootstrap ，请创建一个名为 src/custom.scss（或类似文件）的文件，然后导入 Bootstrap 源样式文件。 在导入的文件 之前 添加一些覆盖样式。 你可以参考 Bootstrap的文档 以获取可用变量的名称。

// 在导入之前覆盖默认变量
$body-bg: #000;

// 导入 Bootstrap 及其默认变量
@import '~bootstrap/scss/bootstrap.scss';

注意：  你必须在 node_modules 之前添加 ~ 前缀，如上所示。

最后，导入新创建的 .scss 文件，而不是 src/index.js 文件开头的默认 Bootstrap .css，例如：

import './custom.scss';

添加 Flow

Flow是一种静态类型检查器，可帮助你编写出错误更少的代码。 如果你不熟悉这个概念，请查看 JavaScript中使用静态类型的介绍。

Flow 的最新版本与 Create React App 项目一起开箱即用。

要将 Flow 添加到 Create React App 项目，请按照下列步骤操作：

1. 运行 npm install --save flow-bin（或 yarn add flow-bin）。
2. 将 "flow": "flow" 添加到 package.json 的 scripts 部分。
3. 运行 npm run flow init （或 yarn flow init ）以在根目录中创建 .flowconfig 文件 。
4. 将 // @flow 添加到要类型检查的任何文件中（例如，添加到 src/App.js）。

现在你可以运行 npm run flow (或 yarn flow) 来检查文件是否存在类型错误。 你可以选择使用像 Nuclide 这样的IDE来获得更好的集成体验。 在未来，我们计划将其更紧密地集成到 Create React App 中。

要了解有关Flow的更多信息，请查看 其文档。

添加 TypeScript

注意：此功能适用于 react-scripts@2.1.0 及更高版本。

TypeScript 是 JavaScript 的类型超集，可编译为纯 JavaScript 。

要使用 TypeScript 启动新的 Create React App 项目，你可以运行：

$ npx create-react-app my-app --typescript
$ # 或者
$ yarn create react-app my-app --typescript

要将 TypeScript 添加到 Create React App 项目，请先安装它：

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # 或者
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

接下来，将任何文件重命名为 TypeScript 文件（例如 src/index.js 重命名为 src/index.tsx ）并 重新启动开发服务器！

类型错误将显示在与构建错误相同的控制台中。

要了解有关 TypeScript 的更多信息，请查看 其文档 。

注意：  你不需要制作 tsconfig.json 文件，我们将为你制作一个文件。 你可以编辑生成的 TypeScript 配置。

注意：  如果你当前正在使用 create-react-app-typescript，请参阅此 博客文章，了解有关如何迁移到 Create React App 的说明。

注意：  我们建议使用 VSCode 以获得更好的集成体验。

注意：  不支持常量枚举和命名空间。

添加 Router(路由)

Create React App 并未规定特定的Router(路由)解决方案，但 React Router 是最受欢迎的 Router(路由) 解决方案。

要添加它，请运行：

npm install --save react-router-dom

或者你可以使用 yarn:

yarn add react-router-dom

要尝试它，删除 src/App.js 中的所有代码，并将其替换为其网站上的任何示例。 基本示例 是开始尝试的好地方。

请注意，在部署应用程序之前，你可能需要配置生产服务器以支持客户端路由。