[譯] Say Hello to React CDK

這是一個 React 的 Componment Development Kit (CDK)。它是一個功能強大得多的工具，而不僅只是又一個腳手架。它是由Kadira 出品並提供支持。

Why？

React很是棒！！你能夠用它來創造一些很酷的東西，並且你想把你的做品分享到社區。可是，這會很難。

構建開發環境真的是很是的困難和繁瑣。咱們已經討論過這個問題。（JS Fatigue）

即便你已經很擅長搭建起正確的構建工具，可是維持他們而且更新它們仍然困難繁瑣。若是你同時在維持幾個 React 項目，這個問題將會變得更加困難。

React CDK 並非 JS Fatigue 的答案，可是它可使你在寫 React 組件和業務的時候沒必要擔憂構建工具和其餘的東西。你將會獲得最大的自由度，你也不須要再從新發明什麼輪子。

?: 聽起來很酷，告訴我更多的東西。

What React CDK Is?

React CDK 是一個 [yeoman] 構造器，包括一系列使 React 組件開發更加簡單和有趣的構建工具。你能夠用它來作不少事情，包括：

• 用一條命令構建一個項目。

• 用 ES2015+ 語法寫 React 組件。

• 使用React Storybook,一個實時開發環境。

• 使用 Mocha 和 Enzyme 來寫測試。

• 使用 Eslint，按照 Airbnb 的推薦語言規範。

• 輸出正確的編譯後代碼到 NPM。

• 部署你的 storybook 到 Github Pages。

• 升級核心的構建工具（因此，你總會保持最新）

?: 好吧，那我該怎麼開始？

很簡單。安裝 React CDK 只需下面這樣：

npm install -g yo generator-react-cdk

若是你以前安裝過 yo，你能夠不安裝。若是你不知道 yo 是什麼，也不用擔憂。

而後你能夠建立一個項目：

yo react-cdk react-wizard

它會在react-wizard文件夾下生成一個項目和一系列文件。它是一個典型的React和其餘工具配置的 NPM 模塊。

全部的源代碼文件都放在src文件夾下，這也是你須要關心的地方。你能夠用你最喜歡的編輯器來編寫src/index.js，開始開發一個組件。

?: 這些都不是什麼新東西。咱們有一大堆的 yeoman 構建器和 React 腳手架。

是的！下面纔是不同的地方。請繼續閱讀。

Live Development Environment

你老是須要一個示例 app 來測試你的組件。你能夠用你本身的 app，可是應該有更好的解決方案。咱們最近發佈了 React Storybook。它是解決這個問題的完美工具。

一個簡單的命令：

npm run storybook

而後你就擁有了一個 storybook console， 來配置你的測試組件。

你能夠在src/stories文件夾裏 write stories了。

用這個方法，在組件開發時你就能夠看到組件的樣子。同時，你還能夠虛擬的測試組件的各個狀態。

Testing, Linking and More

React CDK 會使用最好的 JavaScript代碼質量工具來配置你的項目。它推薦使用 Airbnb JavaScript style guide。它還配置了Enzyme 和 JSDOM 來作簡單的 React 測試。

你甚至可使用一條簡單的命令將你的 storybook 發佈到 GitHub Pages。

瞭解更多的關於 React CDK 的信息，請訪問這裏。

Support and Updates

不一樣於其餘的腳手架和構造器，使用CDK你能夠用一條簡單的命令來升級你項目中用到的工具。這意味着你徹底不用擔憂構造工具的升級問題。讓咱們 CDK 來擔憂這個。

下面是升級的命令：

## update react-cdk
npm install -g generator-react-cdk

## update your project
## First visit your component, then apply:
yo react-cdk:update

這些命令會把你的組建的開發和構造工具升級到最新的版本。你徹底不用手動的去更新它們。

?: 這確實很棒，可是我能夠按照個人須要來隨意配置這些構建工具嗎？

固然能夠。咱們提供了一種方式，讓你能夠按照你想要的方式來配置你的構建工具。關於這個，你能夠查看 configuration guide。

Build, Share and Help

我但願大家能夠迸發不少很酷的想法而且分享你的很酷的項目（或者你公司）中的組件。

讓咱們一塊兒來分享它們到 React 社區。你們會喜歡它們的。咱們但願 React CDK 可讓這件事變得簡單而且節省你的時間。

你也能夠把你現有的組件整合進 React CDK 。你只須要把你源代碼挪進來而且在package.json添加依賴便可。

我但願瞭解大家如何使用React CDK，而且讓咱們知道如何改進項目，使 CDK 變得更好。

譯自 Say Hello to React CDK