[譯]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
bash
bash

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

所有的源代碼文件都放在src文件夾下,這也是你需要關心的地方。你可以用你最喜歡的編輯器來編寫src/index.js,開始開發一個組件。

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

是的!下面才是不一樣的地方。請繼續閱讀。

Live Development Environment

你總是需要一個示例 app 來測試你的組件。你可以用你自己的 app,但是應該有更好的解決方案。我們最近發布了 React Storybook。它是解決這個問題的完美工具。

一個簡單的命令:

npm run storybook

然后你就擁有了一個 storybook console, 來配置你的測試組件。

storybook
storybook

你可以在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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,611評論 25 708
  • Spring Boot 參考指南 介紹 轉載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,889評論 6 342
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,781評論 18 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,151評論 4 61
  • 不知道你是否也和我一樣,遇見這樣一個人,他忽近忽遠,忽冷忽熱,喜歡把自己藏起來,喜歡和不同的人說不同的話,...
    深井冫閱讀 314評論 0 0