Create React App

Create React App

English
简体中文

无构建配置下创建React应用。

入门 – 如何创建新应用。
用户指南 – 如何根据引导开发React应用。

创建在macOS、 Windows、和Linux下通用的React应用
如遇到问题请提交issue.

快速预览

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

打开http://localhost:3000/查看应用.
当准备部署应用时, 通过 npm run build 命令创建一个精简包.

npm start

立即开始

你不需要安装或配置像Webpack、Babel这类工具
这些工具是预设好并隐藏的，因此你可以专注于代码。

仅需要创建个项目, 然后就可以继续了。

入门

安装

全局安装一次:

npm install -g create-react-app

你机器上的Node版本需要>=4.

为了更快的安装速度和更好的磁盘利用，我们强烈建议使用 6 以上版本的Node和 3 以上版本的npm。 你可以通过 nvm 在不同的项目之间轻松地切换Node版本。

此工具不提供Node后端. Node的安装仅是Create React App所需。

创建应用

创建一个新应用, 执行命令:

create-react-app my-app
cd my-app

它会在当前文件夹下创建一个叫做 my-app 的目录。
在该目录下会生成初始的项目结构并安装相关的依赖：

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

无需配置，也没有复杂的目录结构，只有你构建应用所需的文件。
安装完成后，你就可以在项目文件夹中执行一些命令：

`npm start` 或 `yarn start`

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

你做出编辑时，页面会重新加载
在控制台能看到构建错误和警告。

Build errors

`npm test` 或 `yarn test`

在交互模式下运行测试观察者(test watcher)。
默认情况下，运行与自上次提交以来有改变的文件有联系的测试。

`npm run build` 或 `yarn build`

将应用作为产品构建到 build 文件夹。
它在生产模式下正确打包React，并优化构建以获得最佳性能。

此构建是已压缩的，文件名含有散列值(hash)
现在你的应用可以部署了!

用户指南

用户指南包括不同话题的信息，例如：

用户指南的一份副本将会以 README.md 创建在你的项目文件夹下。

如何更新到新版本?

请参阅用户指南以了解相关信息。

理念

单一依赖: 只构建一个依赖。它使用了Webpack，Babel，ESLint和一些其他惊人项目，但提供了它们之上的体验。(译者注：屏蔽了这些工具的具体使用细节，体验更友好)
无需配置: 你不需要配置任何东西。开发和生产的构建所需的合理配置都已经替你处理好了，因此可以专心撸代码了。
无锁定: 你可以随时”eject”到自定义设置。运行单个命令，所有需要的配置和依赖会直接移至你的项目中，因此可以从上次停下来的地方继续。

为什么用这个?

如果你已经入门了 React, 通过 create-react-app 命令来自动化应用的构建。没有配置文件， package.json中的react-scripts 是唯一额外的构建依赖。你的环境中将有构建一个现代化React应用所需的一切：

React, JSX, ES6, 和链式语法支持。
ES6之外的语言扩展，如对象扩展运算符。
一个能检查出常见错误的开发服务器。
直接从JavaScript导入CSS和图像文件。
自动添加CSS前缀，因此不再需要-webkit或其它前缀。
通过一个build脚本绑定Js、CSS和image到你的产品, 使用 Source map.

功能设置被有意限制. 不支持高级功能,例如服务端渲染或者CSS模块. 这写工具是 不可配置的 因为当用户可能调整什么时，它很难提供一致的体验和通过一组工具完成更新。

你可以不用这个. 从以往经验来看，逐步采用 React很容易. 然而很多人每天匆匆的创建新的React单页面应用. 我们响亮、清晰地听到这个处理可能容易出错而且繁琐, 尤其是如果这个是你第一个JavaScript构建的栈. 这个项目是一个试图找出一个好的方法开始开发React应用程序。

转换为一个自定义设置

如果你是一个资深用户 并且你不满意默认的配置, 你可以使用“eject”工具并且使用它作为模板生成器.

运行 npm run eject 正确的拷贝所有配置文件和传递性依赖(Webpack, Babel, ESLint, etc)到你的项目中,如此你可以完全的控制他们. 像npm start和npm run build 命令让然可以工作, 但是他们指向复制的版本因此你可以操作他们.在这个版本上, 处理的是自己的.

注意: 这是一个单向操作. 一旦eject了, 你不能撤回!

你不必一直使用eject. 这个管理功能设置适合于中小部署, 你不应该感觉有义务使用这个功能. 然而我们知道如果你不能自定义这个工具将不会被使用.

局限性

当前有些功能 不支持:

服务端渲染.
一些实验性语法扩展 (e.g. 修饰器).
CSS 模块.
直接导入 LESS 或者 Sass (但是你仍然可以使用它们).
组件的热更新.

未来可能会添加一些稳定的,对大多数React应用有用的, 不与现有的工具冲突, 并且不需要引入额外配置的功能.

内部都有什么？

创建React应用程序使用的工具可能会改变. 目前许多神奇的社区项目基础还比较薄弱,例如:

webpack 支持 webpack-dev-server, html-webpack-plugin 支持 style-loader
Babel 支持ES6并使用Facebook的扩展 (JSX, object spread, class properties)
Autoprefixer
ESLint
Jest
其他.

他们都提供npm包来传递依赖关系的.

贡献

我们很愿意你的帮助来传递 create-react-app! 有关我们正在寻找的和如何开始学习的更多信息请看CONTRIBUTING.md.

React Native

在寻找一些类似的, 有没有关于React Native的?
请参阅Create React Native App.

感谢

我们感谢现有相关项目的作者的想法和合作:

备选方案

在这个项目里如果你不同意做出选择, 你可能想通过不同的权衡寻找替代品.
下面这些很受欢迎并且被积极维护:

值得注意的包括:

你可以直接使用像 webpack 和 Browserify 模块打包.
React文档包括这个话题的演示.

Create React App

Create React App

快速预览

立即开始

入门

安装

创建应用

npm start 或 yarn start

npm test 或 yarn test

npm run build 或 yarn build

用户指南

如何更新到新版本?

理念

为什么用这个?

转换为一个自定义设置

局限性

内部都有什么？

贡献

React Native

感谢

备选方案

`npm start` 或 `yarn start`

`npm test` 或 `yarn test`

`npm run build` 或 `yarn build`