孔明前端團隊React項目新手指南
對于程序員而言：駝峰和下劃線之間是一場宗派戰爭；大括號是否換行會成為一種黨派；逗號寫在行尾還是行首的人來自不同星球……
然而，無規矩不成方圓，任何一個團隊，要想有高質量的產出，第一步必須要對一些基本的代碼風格達成共識，否則用不了多長時間，你就會發現沒人愿意維護某些代碼了，因為那些代碼散發出半年以上沒沖過的馬桶的味道，而更可怕的是團隊成員之間的沖突和內耗會遠超你的想象。
好了，言歸正傳，我們進入正題：
首選開發工具WebStorm
工欲善其事必先利其器，對于程序員而言，一款趁手的編輯器將像屠龍寶刀一樣珍貴，許多程序員終其一生都在追尋更好的硬件、軟件、工作流程等。作為前端團隊，我們強烈推薦使用 WebStorm 。大體上，它長這樣：
關于怎么下載，怎么安裝，以及其他類似問題請自行Google。
新建項目
Talk is cheap. Show me the code. 好了，廢話少說，我們趕緊上代碼：
是的，我們的教程并不是手把手的，按上圖操作后將彈出輸入框，填入你所得到的git倉庫地址，并按照個人喜好選擇路徑和命名后 WebStorm 將會自動拉取我們最新的項目代碼。
初始設置
因為我們使用了最新最潮的ES6語法，并借助了 React.js 來開發這個項目，所以我們需要進行一些小設置來保證 WebStorm 能夠正常識別我們所寫的代碼。
按上圖所示進入設置面板：
在 Languages & Frameworks > JavaScript 條目下開啟JSX語法支持,并勾選 "Prefer Strict mode" 以啟用嚴格模式。
展開 JavaScript > Libraries ，勾選 ES6 語法支持。
我們使用ESlint來檢查基本的語法錯誤，請繼續展開 "JavaScript > Libraries > Code Quality Tools > ESLint" 菜單啟用 ESLint。 ESLint 規則以 airbnb 為基礎，考慮到中國國情以及團隊習慣，我們進行了部分細節調整：
{
"extends": "airbnb",
"rules": {
"comma-dangle": [1, "never"], // 不對數組或對象末尾逗號做強制要求
"spaced-comment": [0, "always"], // 不對注釋前的空格做強制要求
"func-names": 0 // 允許使用匿名函數
}
}其他完全沿用airbnb，詳見 https://github.com/airbnb/javascript
代碼風格設置
為了讓編輯器產生的代碼能夠順利通過ESLint的校驗，我們在airbnb開源的基礎上定制了自己的代碼風格： 
在 "Editor > Code Style" 菜單中點擊 "Manage..." 按鈕；
在彈出來的對話框里選擇 "Import..."
點擊確定后會出現文件選擇對話框，選擇本項目根目錄下的 .jscsrc 文件
建議命名為KM，以便和其他代碼風格區分。 本代碼風格總體依然沿用 airbnb ，同樣對部分細節做了調整：
{
"preset": "airbnb",
"excludeFiles": [
"dist/**", "node_modules/**", "webpack*", "styleguide.js"
],
"requirePaddingNewLinesBeforeLineComments": null, // 不強制注釋前空行
"requireTrailingComma": null, // 不強制要求末尾逗號
"validateQuoteMarks": null, // 字符串單引號，React 屬性雙引號
"validateIndentation": {
"value": 2,
"allExcept": [
"comments" // 忽略注釋中的縮進
]
},
"maximumLineLength": {
"value": 80, // 單行最長80個字符，注釋除外
"allExcept": [
"comments", "urlComments", "functionSignature"
]
},
"requirePaddingNewLinesAfterBlocks": null,// 區塊之間不強制空行
"disallowEmptyBlocks": {
"allExcept": "comments" // 不把注釋當成空處理
}
}調整后規則的直觀體現見 styleguide.html
快速啟動
-
首先請確保你已經安裝好了 node 和 npm，建議使用
iojs/2.5.0并配置國內源 -
進入工作目錄新建分支
請盡量以本次需要開發的功能或解決的問題進行分支命名，我們提倡使用 GitHub Flow 進行分支管理。 -
點擊編輯器底部的 'Terminal'面板，并輸入
npm i && npm start后回車
當顯示 webpack: bundle is now VALID.字樣時表示已經正常啟動
4.建議使用Chrome瀏覽器，訪問 http://localhost:8000/ 即可。
5.修改JS文件，瀏覽器內容將自動發生變化（頁面不會整體刷新）
目錄結構
[./]
| -- .editorconfig #編輯器配置，聲明縮進方式
| -- .eslintignore #ESLint忽略名單
| -- .eslintrc #ESLint配置
| -- .gitignore # Git忽略名單
| -- .jscsrc #JavaScript Code Style 配置
| -- README.md
| -- [css]
| | -- index.styl
| -- [dist] #打包后目錄
| | -- daefde64ebc9619286d8.js
| | -- fb5456ea68c860c4a4c93c71b1142220.css
| | -- index.html
| -- [docs] #說明文檔
| | -- [img]
| | -- styleguide.html
| -- [js]
| | -- app-router.js
| | -- [components] # 組件
| | | -- dashboard.js
| | | -- login.js
| | | -- main.js
| | -- index.js
| | -- [utils] # 各種輔助小工具
| | | -- ajax.js
| | | -- auth.js
| -- package.json
| -- server.js # 開發調試用
| -- webpack.config.develop.js # 開發環境配置
| -- webpack.config.js # 通用配置
| -- webpack.config.production.js # 生產環境配置
我們還缺人
是的，這篇文章是面向新手的，盡量保證通俗易懂，看圖說話。所以年輕人，不要怕，我們這里有耐心的老師傅一步一步慢慢教你。對于經驗豐富的老師傅我們當然也歡迎。
- 我們是一家工程師文化濃郁的科技公司（兩位老板都是程序員出身）
- 我們比大多數地方更尊重和敬畏工程師的價值（薪酬絕對讓你心動）
- 我們周末正常雙休、不無意義加班、不搞996，我們相信金字塔絕對不是奴隸建造的
- 我們有補充醫療（含親子），公司有多位幸福奶爸
- 每年一次集體出國旅游，每月一次集體腐敗，不定期爬山、騎馬什么的
- 我們連卷筒紙都是公司免費提供的！