這是一個 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 變得更好。