如何开发由Create-React-App 引导的应用（一）

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

1. 如何开发由Create-React-App 引导的应用
2. 如何开发由Create-React-App 引导的应用（二）
3. 如何开发由Create-React-App 引导的应用（三）
4. 如何开发由Create-React-App 引导的应用（四）

Updating to New Release

Creat React App 分红两个包：

• create-react-app 是用于建立新项目的全局命令行工具。
• react-scripts 是在新建项目中的开发依赖。

几乎不须要更新create-react-app 自身：它将全部的设置委托给了react-scripts 。

当你运行create-react-app 时，它老是使用react-scripts 的最新版原本建立项目，以便你自动得到全部的新特性和改进。

要将现有项目更新为react-scripts 的最新版本，打开更新日志，找到你当前正在用的版本（能够在package.json中找到），按照最新版本的迁移说明来操做。

在大多数状况下，更改packages.json 中react-scripts 的版本号，而后运行npm install 应该就能够了，可是对于潜在的重大变化，请参考更新日志。

咱们致力于保持最小的重大变化，从而能够无痛的升级react-scripts。

Sending Feedback

咱们老是关注您的反馈。

Folder Structure

建立完成后，你的项目应该看上去像这样：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

对于要构建的项目，这些文件必须存在：

• public/index.html 是页面模版；
• src/index.js 是JavaScript 入门点。

你能够删除或重命名其它的文件。

你能够在src 中建立子目录。为了更快的重构，只有位于src 中的文件会被Webpack 处理。
你须要将任何JS 和CSS 放到src 中，不然Webpack 将不会处理。

public/index.html 只能使用public 中的文件。
阅读使用JavaScript 和HTML 资源的说明。

可是，你能够建立更多的顶级目录。
它们不会被包含在生产版本中，所以你能够将它们用于文档说明等。

Available Scripts

在项目目录中，你能够运行：

npm start

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

若是你进行了修改，页面将从新加载。
你还能够在控制台中看到lint error。

npm test

在交互观察者模式下，启动test runner。
更多信息请参考running tests 章节。

npm run build

构建生产版本应用到build 文件夹。
它在生产模式下正确地绑定了React，而且优化了构建以得到最佳性能。

构建是minified 而且文件名包含哈希值。
你的应用已经准备好部署了！

更多信息请参考deployment 章节。

npm run eject

注意：这是一个单向操做。一旦你eject，你不能返回！

若是你对构建工具和配置选项不满意，你能够运行eject。此命令将从项目中删除单个构建依赖。

相反，它会将全部配置文件和转变的依赖（Webpack、Babel、ESLint 等）复制到你的项目中，因此你能够彻底控制它们。除了eject 外全部的命令仍将其做用，但它们将指向复制的脚本，以便你调整它们。在这一点，彻底看你本身。

你没必要使用eject。The curated feature set 适用于中小型部署。可是咱们明白，当你准备使用这个工具时，若是你不能自定义它，则它将没有用。

Supported Language Features and Polyfills

这个项目支持最新JavaScript 标准的超集。
除了ES6 语法，它还支持：

• Exponentiation Operator（ES2016）
• Async/await（ES2017）
• Object Rest/Spread Properites（stage 3 proposal）
• Class Field and Static Properties（stage 3 proposal）
• JSX 和 Flow 语法

学习更多关于不一样提案阶段。

虽然咱们建议你谨慎使用这些实验性提案，但Facebook 在产品代码中大量使用这些功能，所以，若是未来这些提案发生变化，我吗将提供codemods。

注意这个项目只包括几个ES6polyfills：

• Object.assign() 经过object-assign
• Promise 经过promise
• fetch() 经过whatwg-fetch

若是你使用任何须要运行时支持的ES6+ 特性（像Array.from() 或Symbol）,确保你手动添加了合适的polyfill，或者你的目标浏览器已经支持它们了。

Syntax Highlighting in the Editor

要在你喜欢的文本编辑器中配置语法高亮，前往相关的Babel 文档说明页，而后按照说明操做。包含大部分流行的编辑器。

Displaying Lint Output in the Editor

注意：这个特性需呀react-scripts@0.2.0 或更高。

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

对于linting 它们不是必需要的。你会在终端以及浏览器控制台中看到linter 输出。可是，若是你喜欢在编辑器中显示lint 结果，则须要执行一些额外的操做。

首先，你须要为你的编辑器安装ESLint 插件。

Atom 用户使用 linter-eslint 笔记
若是你正在使用Atom linter-eslint 插件，确保 Use global ESLint installation 选项已经选中：

Visual Studio Code 用户
VS Code ESLint 插件会自动侦测Create React App 的配置文件。因此你不须要在根目录下建立eslintrc.json 文件，除非你想要添加你本身的规则。在这种状况下，你应该包含CRA 的配置，经过添加下面这行：

{
 // ...
 "extends": "react-app"
}

而后将下面这块代码添加到你的项目中的package.json 文件中

{
 //...
 "eslintConfig": {
    "extends": "react-app"
  }
}

最后，你须要全局安装一些包：

npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0

咱们认识到这是次优的，因为咱们隐藏ESLint 依赖的方式，它目前是必须的。ESLint 团队已经在为此提供解决方案，所以在几个月内能够会变得没必要要。

Debugging in the Editor

这个特性目前只有Visual Studio Code编辑器支持。

Visual Studio Code 支持实时编辑和调试，使用Create React App 开箱即用。这可以使你做为一个开发者不须要离开编辑器就能够进行编写和调试你的React 代码，最重要的是它可让您拥有持续的开发工做流程，其中上下文切换是最小的，由于你没必要在不一样工具之间进行切换。

你须要确保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",
    "userDataDir": "${workspaceRoot}/.vscode/chrome",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

运行npm start 启动你的应用，按F5 或点击绿色debug 图标在VS Code 中调试。如今你能够写代码、设置断点、修改代码以及调试你最新修改的代码--全部都在你的编辑器中实现。

Changing the Page title

你能够在生成项目的public 文件夹下知道源HTML 文件。你能够编辑<title> 标签，把“React App” 标题改成其余任何东西。

请注意，一般你不会常常在public 目录下编辑文件。例如，能够在不更改HTML 状况下，添加CSS 文件。

若是你须要根据内容来动态更新页面的标题，你可使用浏览器的document.title API。对于要从React 组件更改标题的更复杂的场景，可使用React Helmet 这个第三方库。

在生产环境中，你为本身的应用使用自定义服务器，要将标题在发送到浏览器以前修改，你能够遵循本章 建议。或者，你能够预构建每个页面为静态HTML 文件，而后加载JavaScript 包，将在这里介绍。

Installing a Dependency

生成的项目中包括React 和ReactDOM 依赖。它也包括Create React App 使用的一组脚本做为开发依赖。你也可使用npm安装其它的依赖（例如，React Router）：

npm install --save <library-name>