2018-07-02

无需配置,快速创建 React 应用

端技术

百家号17-03-2508:16

React

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

入门

安装

首先,安装全局包:

npm install -g create-react-app

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

创建一个应用程序

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

create-react-app hello-world

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

启动服务器

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

使用Webpack和Babel创建React应用。

控制台输出被调整为最小,以帮助您专注于问题:

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

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

用于生产环境的构建

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

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

一个依赖

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

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

零配置

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

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

无锁定

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

“Ejecting”特性让您可以随时离开创建React应用设置。

您只需运行单个命令,所有构建依赖项,配置和脚本就会移动到您的项目中。

在这一点上,你可以自定义你想要的一切,但更有效的方法是你fork我们的配置,然后按照自己的方式定义。

如果你对构建工具有经验,并且喜欢根据自己的喜好调整一切,那么你可以使用创建React应用作为样板生成器。

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

试试看!

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

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

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

背景故事

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

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

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

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

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

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

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

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

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

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

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

然而,Facebook的工具不同于许多小公司。

剥离(Linting),转换(transpilation)和打包(packaging)都由强大的远程开发服务器处理,产品工程师不需要配置它们。

虽然我们希望可以给每个React用户一个专用服务器,但是Facebook还不能扩展的那么好!

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

寻求一个React CLI

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

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

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,680评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,177评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,249评论 0 212
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,981评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,746评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,763评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,362评论 2 268
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,151评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,964评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,501评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,285评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,614评论 1 229
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,232评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,117评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,498评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,615评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,012评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,512评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,594评论 2 231

推荐阅读更多精彩内容

  • 无需配置,快速创建 React 应用 端技术 百家号17-03-2508:16 React Create Reac...
    萧玄辞阅读 182评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,374评论 25 707
  • 因为天气原因,本该今天一早醒来就在自己的院子里,拥满院的阳光,看蓝天白云然后刷朋友圈到处都是雾霾。此刻,我还在火车...
    fengnuan阅读 681评论 3 16
  • 我很enjoy 当我还有情感的时候 哪怕是为之惶恐心碎 可以用哭泣来抗拒麻木 那么我欲壑难填的心 还有被救赎的可能...
    我是宋一磊阅读 184评论 1 1
  • 在忙忙碌碌中,我突然间迟疑了,我究竟在追寻什么,以前在高中的时候,最大的目标就是考一个好的大学,可是现在一年...
    总会有希望阅读 200评论 0 2