編輯器選擇
最近在學習ReactJS，這東西確實不錯，但是在實際開發中卻有很多問題。不是ReactJS本身的問題，而是開發環境，目前而言並沒發現一個真正完美支持JSX語法的編輯器或IDE，這對於ReactJS開發者來說無疑是一個很頭疼的事情，以往所習慣的碼字方式都要改變，基本上要純手打，雖然純手打可以幫助記憶代碼，但在工作效率上卻就會大打折扣。
HBuilder
之前一直用的是DCloud研發的Hbuilder來做WEB開發，可能很多人都不熟悉這個工具，簡單說就是一個國產的WEB開發專用的IDE，集成了很多功能，習慣了之後工作效率確實提升不少。但Hbuilder在第三方插件方面比較弱，ReactJS的相關插件一個都沒有，於是我只能換編輯器了。
Atom
現在的編輯器也很多，這裏就不一一列舉了。就目前我瞭解的來說，支持JSX語法高亮、代碼提示以及代碼校驗的插件不多。Atom上有一個比較完善的ReactJS插件ATOM REACT，試用了一下，確實功能挺多，讓我小激動了一下。但是Atom的性能卻讓我很不爽，首先是內存佔用太大，我用的OSX，內存一下飆到900M+，一個IDE都沒這麼佔內存。其次就是編輯較大的文件就會卡頓，那敲代碼的延遲感簡直不能忍，於是我放棄了Atom，可惜了這麼好的一個插件。
SublimeText
這個編輯器就不多說明了，做WEB開發的多少都瞭解一些，我之前用過一段時間的SublimeText，覺得找插件很麻煩，就投靠了可以一次搞定的HBuilder。現在重新啓用了這個神器，因爲我找到了幾個很棒的ReactJS插件，下面就來具體說說。
SublimeText插件
做ReactJS開發最需要的無疑是這兩條：語法高亮、代碼提示，如果能夠想Emmet那樣自動擴展就更好了，這裏我可以告訴你，確實可以實現。
語法高亮
Babel-Sublime插件很好的支持了JSX語法的高亮顯示，連包裹在組件中的HTML標籤都能實現高亮顯示，具體的插件安裝以及設置方法就不多說了，自行看GitHub上的介紹吧，很簡單。
代碼提示
Sublime-React插件嚴格的說並不是一個代碼提示插件，而是一個類似於Emmet的自動擴展代碼插件，只需要簡單敲幾個字母然後按下TAB鍵就能自動擴展成你想要的完整代碼片段，效果如下圖所示。
//支持的代碼片段如下cdm→ componentDidMount: fn() { ... }
cdup→ componentDidUpdate: fn(pp, ps) { ... }
cs→ var cx = React.addons.classSet;
cwm→ componentWillMount: fn() { ... }
cwr→ componentWillReceiveProps: fn(np) { ... }
cwu→ componentWillUpdate: fn(np, ns) { ... }
cwun→ componentWillUnmount: fn() { ... }
cx→ cx({ ... })
fdn→ React.findDOMNode(...)
fup→ forceUpdate(...)
gdp→ getDefaultProps: fn() { return {...} }
gis→ getInitialState: fn() { return {...} }
ism→ isMounted()
props→ this.props.
pt→ propTypes { ... }
rcc→ component skeleton
refs→ this.refs.
ren→ render: fn() { return ... }
scu→ shouldComponentUpdate: fn(np, ns) { ... }
sst→ this.setState({ ... })
state→ this.state.JSX中使用Emmet
雖然上面這個插件可以實現JSX的代碼擴展，但是在JSX中包裹的HTML卻不能直接支持Emmet，需要通過安裝其他插件以及修改相應設置來實現。
首先是安裝需要的插件：RegReplace和Chain Of Command，直接在插件庫中搜索安裝即可。
接下來就是設置了，先在KeyBinding – Users中插入下面這段代碼：
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
},{
"key": "preceding_text",
"operator": "regex_contains",
"operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)",
"match_all": true
},{
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}] }這樣就實現了在JSX中按TAB鍵來擴展HTML片段了，但是JSX中的HTML和標準的HTML又有不同的地方，就是HTML中的class，在JSX中是className，所以這裏就需要修改RegReplace的設置，找到Packagea Setting --> Reg Replace --> Settings-User，插入下面這段代碼：
{
"replacements": {
"js_class": {
"find": " class=\"",
"replace": " className=\"",
"greedy": true,
"case": false
} }}這樣就大功告成了，開始快樂的學習ReactJS吧~~！歡迎各位大神來補充。