無需配置，快速創(chuàng)建 React 應(yīng)用

端技術(shù)

百家號17-03-2508:16

React

Create React App 是一個全新的官方支持的創(chuàng)建單頁React應(yīng)用程序的方法。 它提供了一個無需配置的現(xiàn)代構(gòu)建設(shè)置。

入門

安裝

首先，安裝全局包：

npm install -g create-react-app

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

創(chuàng)建一個應(yīng)用程序

現(xiàn)在你可以用它來創(chuàng)建一個新的應(yīng)用程序：

create-react-app hello-world

npm安裝短暫的依賴將需要一段時間，可是一旦完成后，你將會看到一個可以在你創(chuàng)建的目錄中執(zhí)行的命令列表:

啟動服務(wù)器

運(yùn)行npm start 啟動開發(fā)服務(wù)器。 瀏覽器將使用創(chuàng)建的應(yīng)用程序的網(wǎng)址自動打開。

使用Webpack和Babel創(chuàng)建React應(yīng)用。

控制臺輸出被調(diào)整為最小，以幫助您專注于問題：

ESLint也被集成，所以lint警告顯示在控制臺中：

我們只選擇了一小部分通常會導(dǎo)致bug的lint規(guī)則。

用于生產(chǎn)環(huán)境的構(gòu)建

要構(gòu)建優(yōu)化的包，請運(yùn)行npm run build:

這個構(gòu)建的體積已經(jīng)被壓縮過了，并且包含了用于緩存的內(nèi)容哈希。

一個依賴

你的package.json 只包含一個構(gòu)建依賴和一些腳本：

我們負(fù)責(zé)將Babel，ESLint和Webpack更新為穩(wěn)定的兼容版本，因此您可以更新單個依賴關(guān)系以獲取它們。

零配置

值得重復(fù)的是：沒有配置文件或復(fù)雜的文件夾結(jié)構(gòu)。該工具僅生成構(gòu)建應(yīng)用程序所需的文件。hello-world/

所有構(gòu)建設(shè)置都已預(yù)配置而且無法更改。某些功能（如測試）現(xiàn)在沒有。我們故意這樣限制，因為考慮到這些功能可能不是每個人都需要。這就引出了最后一點(diǎn)。

無鎖定

我們首先在Enclave中看到了這個功能，我們很喜歡它。 我們和 Ean 談過，他很高興能與我們合作。 他已經(jīng)發(fā)出了幾個拉取請求（pull requests）了！

“Ejecting”特性讓您可以隨時離開創(chuàng)建React應(yīng)用設(shè)置。

您只需運(yùn)行單個命令，所有構(gòu)建依賴項，配置和腳本就會移動到您的項目中。

在這一點(diǎn)上，你可以自定義你想要的一切，但更有效的方法是你fork我們的配置，然后按照自己的方式定義。

如果你對構(gòu)建工具有經(jīng)驗，并且喜歡根據(jù)自己的喜好調(diào)整一切，那么你可以使用創(chuàng)建React應(yīng)用作為樣板生成器。

我們期望在早期階段，許多人會因為某種原因“eject”，但是當(dāng)我們從中學(xué)習(xí)時，我們將使默認(rèn)設(shè)置越來越引人注目，同時仍然不提供配置。

試試看!

您可以在GitHub上找到創(chuàng)建React應(yīng)用的其他說明。

這是一個實驗，只有時間會證明它是否能夠成為創(chuàng)建和構(gòu)建React應(yīng)用程序的一種流行方式，或者默默無聞的淡出人們的視線。

我們歡迎您參與此實驗。 幫助我們構(gòu)建更多人可以使用的React工具。 我們總是樂于接受反饋。

背景故事

React是第一個擁抱transpiling JavaScript的庫之一。 因此，您可以在沒有任何工具的情況下學(xué)習(xí)React，但是React生態(tài)系統(tǒng)通常與大量工具的爆炸相關(guān)聯(lián)。

Eric Clemmons稱這種現(xiàn)象為“JavaScript Fatigue”：

最終，問題是，通過選擇React（和固有的JSX），你不知不覺地選擇了一個令人困惑的構(gòu)建工具，樣板，linters和time-sinks，以便在你創(chuàng)建任何東西之前處理。

在ES2015和JSX中編寫代碼是很有誘惑力的。 使用bundler來保持代碼模塊化是明智的，并且使用linter來捕獲常見的錯誤。 一個具有快速重建的開發(fā)服務(wù)器以及一個生成優(yōu)化的bundle的命令令人愉快。

組合這些工具需要一些經(jīng)驗。 即使如此，它也很容易陷入與不兼容性，不滿意的依賴關(guān)系，和難以辨認(rèn)的配置文件的斗爭當(dāng)中。

這些工具很多是插件平臺，并不直接承認(rèn)對方的存在。 把它們留給用戶將它們連接在一起。 工具成熟和獨(dú)立變化，教程很快就過時了。

這并不意味著這些工具不是很好。 對我們許多人來說，他們已經(jīng)成為不可或缺的，我們非常感謝他們的維護(hù)者的努力。 對React生態(tài)系統(tǒng)的狀態(tài)他們已經(jīng)有太多需要擔(dān)心的了。

不過，我們知道，當(dāng)你只是想要學(xué)習(xí)React時，卻要花費(fèi)幾天的時間設(shè)置一個項目，這是令人沮喪的。 我們想解決這個問題。

我們可以解決這個問題嗎？

我們發(fā)現(xiàn)自己處于一個不尋常的困境當(dāng)中。

到目前為止，我們的策略是只發(fā)布我們在Facebook使用的代碼。 這幫助我們確保每個項目都久經(jīng)測試，并有明確的范圍和優(yōu)先級。

然而，F(xiàn)acebook的工具不同于許多小公司。

剝離（Linting），轉(zhuǎn)換（transpilation）和打包（packaging）都由強(qiáng)大的遠(yuǎn)程開發(fā)服務(wù)器處理，產(chǎn)品工程師不需要配置它們。

雖然我們希望可以給每個React用戶一個專用服務(wù)器，但是Facebook還不能擴(kuò)展的那么好！

React社區(qū)對我們非常重要。 我們知道我們無法在我們的開源哲學(xué)的范圍內(nèi)解決這個問題。 這就是為什么我們決定破例，并推出一些我們自己沒有使用，但我們認(rèn)為會對社會有用的東西。

尋求一個React CLI

一個星期前剛剛參加了 EmberCamp，我對Ember CLI感到非常興奮。 Ember用戶有一個很好的“入門”體驗，得益于在一個單一的命令行界面下一個聯(lián)合的策劃的工具集合。 我也聽到了關(guān)于Elm Reactor的類似反饋。

提供一個連貫的策劃經(jīng)驗本身是有價值的，即使在理論上用戶可以自己組裝這些部分。 Kathy Sierra解釋得最好：

如果你的UX要求用戶做出選擇，例如，即使這些選擇既清楚又有用，決定 這種行為是一種認(rèn)知的流失。 而不只是當(dāng)他們決定...即使在我們選擇后，一個無意識的認(rèn)知背景線程正在慢慢消耗/泄漏資源，“這是正確的選擇嗎？

我從來沒有試圖為React應(yīng)用程序編寫命令行工具， Christopher也沒有。 我們在Messenger上聊了這個想法，我們決定一起工作一個星期將它作為一個黑客馬拉松項目。

我們知道傳統(tǒng)上這些項目在React生態(tài)系統(tǒng)中并不是非常成功。 Christopher告訴我，多個“React CLI”項目已經(jīng)在Facebook上啟動并且失敗。 具有類似目標(biāo)的社區(qū)工具也存在，但到目前為止，他們還沒有獲得足夠的牽引力。

盡管如此，我們決定還是值得再試一次。 克里斯托弗和我在周末創(chuàng)造了一個非常粗略的概念證明， Kevin很快加入了我們。

我們邀請了一些社區(qū)成員與我們合作，并且在這個工具上工作了一周。 我們希望你喜歡使用它！ 讓我們知道你的想法