Github 上已經(jīng)有一堆基于 React 的 HackerNews 客戶端横堡，為什么還需要一個新的埋市？
這一個是用 React 實現(xiàn)的 HackerNews 客戶端，項目地址在這 react-hacker-news命贴。
寫在前面
GitHub 上已經(jīng)有一堆基于 React 的 HackerNews 客戶端道宅，為什么還需要寫一個新的？
原因是前端技術發(fā)展太快了胸蛛。如果你看過《2016年里做前端是怎樣一種體驗》污茵，除了一笑而過之外，還想了解文章里的那些把人搞暈的名詞和術語葬项，那么這篇文章會有一些有用的信息省咨。
另外一個原因是，GitHub 上很多項目代碼都有點過時玷室，比如廣為傳播且 star 數(shù)最多的 insin/react-hn 使用 ES5 編寫零蓉，且沒有單元測試。
最后穷缤，我決定厚著臉皮敌蜂，拋個磚，引個玉津肛。這個 demo 項目是我學習 React 框架時做的第一個較完整的項目章喉。我決定獻丑寫出來，可能對一些初學者有幫助身坐。如果有幸有人指點一二秸脱，糾正我的錯誤觀念，那就更好了部蛇。
項目部署在 GitHub Pages 上摊唇，正式開始之前，可以體驗一下項目的成果：react-hacker-news涯鲁。
最佳實踐
哪些可以算得上 React 開發(fā)的最佳實踐巷查？我們展開看看有序。
- ES6: 絕大部分代碼使用 ES6 代碼編寫。特別是 React Component 相關的代碼也使用 ES6 語法岛请。除了少敲點字外旭寿，最大的好處是整潔。
- eslint-config-airbnb: 這是一個 eslint 擴展崇败。用完這個插件盅称，真正體會到站在巨人的肩膀上的感覺。這個插件可能會幫助你糾正很多你平時根本沒意識到的不良編碼習慣后室。
- webpack/babel: 使用 babel 把 ES6/React 代碼編譯成瀏覽器廣泛支持的 ES5 代碼缩膝，使用 webpack 打包以及開發(fā)環(huán)境/生產(chǎn)環(huán)境管理。
- 持續(xù)集成：使用
ghooks實現(xiàn)提交前的代碼靜態(tài)分析咧擂，以及 git commit msg 的格式檢查。當然檀蹋，還可以配置松申，在提交前自動執(zhí)行單元測試。 - 提交記錄規(guī)范: 有的人會在 git commit message 里罵人俯逾，有的會在里面寫微型小說贸桶，程序員這個群體總是不缺創(chuàng)意。但這里桌肴，我們借助 AngularJS 的規(guī)范皇筛。如果沒有按照規(guī)范寫 commit message 提交前無法通過自動檢查。還有一個好處是坠七，可以直接使用一個命令生成 change log水醋。
- 單元測試：使用 Mocha/Enzyme/chai/sinon 來做 React 的單元測試。多數(shù)情況下彪置，單元測試往往得不到重視拄踪。但從工程的角度，單元測試是質(zhì)量保證的最重要工具之一拳魁。完備的單元測試可以讓代碼取得別人天然的信任惶桐。
- Log 系統(tǒng): 使用輕量級的
loglevel來打印應用的調(diào)試信息。如果你還在使用console.log()來打印 Log潘懊，是時候規(guī)范一點了姚糊。 - 一鍵部署到 GitHub Pages：辛辛苦苦開發(fā)的應用，想和小伙伴們分享一下授舟。沒問題救恨，一鍵即可部署到 GitHub Pages 上。要使用這個功能释树，你需要有 Python 環(huán)境忿薇，并且使用
pip install ghp-import安裝一個ghp-import裙椭。
總結(jié)
榮耀屬于阮一峰，只要你沒有恐高癥署浩，站在巨人的肩膀上是個很好的提高效率的方式揉燃。這個項目以 ruanyf/react-babel-webpack-boilerplate 作為起點開發(fā)的。遠不止于此筋栋，阮一峰還在他博客上寫下 React 技術棧系列教程炊汤，推薦初學者閱讀。
我 Fork 阮一峰的 boilerplate 項目弊攘，增加了幾個 Feature:
- 把靜態(tài)文件移到
public目錄下 - 增加單元測試工具集
- 增加一鍵部署到 GitHub Pages 功能
項目地址是 kamidox/react-babel-webpack-boilerplate抢腐，如果你認同這里闡述的開發(fā)理念，可以作為 React 項目的開發(fā)起點襟交。
