文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Create React App 是一个全新的官方支持的创建单页React应用程序的方法。 它提供了一个无需配置的现代构建设置。

入门

安装

首先,安装全局包:

npm install -g create-react-app

需要Node.js 4 x或更高的要求。

创建一个应用程序

现在你可以用它来创建一个新的应用程序:

create-react-app hello-world

npm安装短暂的依赖将需要一段时间,可是一旦完成后,你将会看到一个可以在你创建的目录中执行的命令列表:

created folder

第 1 段(可获 2 积分)

启动服务器

运行 npm start 启动开发服务器。 浏览器将使用创建的应用程序的网址自动打开。

compiled successfully

使用Webpack和Babel创建React应用。
控制台输出被调整为最小,以帮助您专注于问题:

failed to compile

ESLint也被集成,所以lint警告显示在控制台中:

compiled with warnings

我们只选择了一小部分通常会导致bug的lint规则。

用于生产环境的构建

要构建优化的包,请运行npm run build:

npm run build

这个构建的体积已经被压缩过了,并且包含了用于缓存的内容哈希。

第 2 段(可获 2 积分)

一个依赖

你的 package.json 只包含一个构建依赖和一些脚本:

{
  "name": "hello-world",
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "devDependencies": {
    "react-scripts": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

我们负责将Babel,ESLint和Webpack更新为稳定的兼容版本,因此您可以更新单个依赖关系以获取它们。

零配置

值得重复的是:没有配置文件或复杂的文件夹结构。该工具仅生成构建应用程序所需的文件。

hello-world/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

所有构建设置都已预配置而且无法更改。某些功能(如测试)现在没有。我们故意这样限制,因为考虑到这些功能可能不是每个人都需要。这就引出了最后一点。

第 3 段(可获 2 积分)

无锁定

我们首先在Enclave中看到了这个功能,我们很喜欢它。 我们和 Ean 谈过,他很高兴能与我们合作。 他已经发出了几个拉取请求(pull requests)了!

“Ejecting”特性让您可以随时离开创建React应用设置。 您只需运行单个命令,所有构建依赖项,配置和脚本就会移动到您的项目中。 在这一点上,你可以自定义你想要的一切,但更有效的方法是你fork我们的配置,然后按照自己的方式定义。 如果你对构建工具有经验,并且喜欢根据自己的喜好调整一切,那么你可以使用创建React应用作为样板生成器。

第 4 段(可获 2 积分)

我们期望在早期阶段,许多人会因为某种原因“eject”,但是当我们从中学习时,我们将使默认设置越来越引人注目,同时仍然不提供配置。

试试看!

您可以在GitHub上找到创建React应用的其他说明。

这是一个实验,只有时间会证明它是否能够成为创建和构建React应用程序的一种流行方式,或者默默无闻的淡出人们的视线。

我们欢迎您参与此实验。 帮助我们构建更多人可以使用的React工具。 我们总是乐于接受反馈

第 5 段(可获 2 积分)

背景故事

React是第一个拥抱transpiling JavaScript的库之一。 因此,您可以在没有任何工具的情况下学习React,但是React生态系统通常与大量工具的爆炸相关联。

Eric Clemmons称这种现象为“JavaScript Fatigue”:

最终,问题是,通过选择React(和固有的JSX),你不知不觉地选择了一个令人困惑的构建工具,样板,linters和time-sinks,以便在你创建任何东西之前处理。

在ES2015和JSX中编写代码是很有诱惑力的。 使用bundler来保持代码模块化是明智的,并且使用linter来捕获常见的错误。 一个具有快速重建的开发服务器以及一个生成优化的bundle的命令令人愉快。

第 6 段(可获 2 积分)

组合这些工具需要一些经验。 即使如此,它也很容易陷入与不兼容性,不满意的依赖关系,和难以辨认的配置文件的斗争当中。

这些工具很多是插件平台,并不直接承认对方的存在。 把它们留给用户将它们连接在一起。 工具成熟和独立变化,教程很快就过时了。

这并不意味着这些工具不是很好。 对我们许多人来说,他们已经成为不可或缺的,我们非常感谢他们的维护者的努力。 对React生态系统的状态他们已经有太多需要担心的了。

不过,我们知道,当你只是想要学习React时,却要花费几天的时间设置一个项目,这是令人沮丧的。 我们想解决这个问题。

第 7 段(可获 2 积分)

我们可以解决这个问题吗?

我们发现自己处于一个不寻常的困境当中。

到目前为止,我们的策略是只发布我们在Facebook使用的代码。 这帮助我们确保每个项目都久经测试,并有明确的范围和优先级。

然而,Facebook的工具不同于许多小公司。 剥离(Linting),转换(transpilation)和打包(packaging)都由强大的远程开发服务器处理,产品工程师不需要配置它们。 虽然我们希望可以给每个React用户一个专用服务器,但是Facebook还不能扩展的那么好!

第 8 段(可获 2 积分)

React社区对我们非常重要。 我们知道我们无法在我们的开源哲学的范围内解决这个问题。 这就是为什么我们决定破例,并推出一些我们自己没有使用,但我们认为会对社会有用的东西。

寻求一个React CLI

一个星期前刚刚参加了 EmberCamp,我对Ember CLI感到非常兴奋。 Ember用户有一个很好的“入门”体验,得益于在一个单一的命令行界面下一个联合的策划的工具集合。 我也听到了关于Elm Reactor的类似反馈。

第 9 段(可获 2 积分)

提供一个连贯的策划经验本身是有价值的,即使在理论上用户可以自己组装这些部分。 Kathy Sierra解释得最好

如果你的UX要求用户做出选择,例如,即使这些选择既清楚又有用,决定 这种行为是一种认知的流失。 而不只是当他们决定...即使在我们选择后,一个无意识的认知背景线程正在慢慢消耗/泄漏资源,“这是正确的选择吗?

我从来没有试图为React应用程序编写命令行工具, Christopher也没有。 我们在Messenger上聊了这个想法,我们决定一起工作一个星期将它作为一个黑客马拉松项目。

第 10 段(可获 2 积分)

我们知道传统上这些项目在React生态系统中并不是非常成功。 Christopher告诉我,多个“React CLI”项目已经在Facebook上启动并且失败。 具有类似目标的社区工具也存在,但到目前为止,他们还没有获得足够的牵引力。

尽管如此,我们决定还是值得再试一次。 克里斯托弗和我在周末创造了一个非常粗略的概念证明, Kevin很快加入了我们。

我们邀请了一些社区成员与我们合作,并且在这个工具上工作了一周。 我们希望你喜欢使用它! 让我们知道你的想法。

我们要感谢 Max StoiberJonny BuchananEan PlatterTyler McGinnisKent C. Dodds, 和 Eric Clemmons 的早期反馈,想法和贡献。

第 11 段(可获 2 积分)

文章评论