實(shí)用的 reactjs 插件

本章節(jié)主要講的是目前非常火熱的reactjs的相關(guān)插件，Facebook出品必屬精品。雖然經(jīng)歷過(guò)一些風(fēng)波，但是仍然擋不住眾多程序員對(duì)其的喜愛(ài)。現(xiàn)在就跟著我來(lái)學(xué)習(xí)一下使用react過(guò)程中需要安裝什么插件。

1. Babel 插件

大名鼎鼎的Babel插件，它的功能非常強(qiáng)大，支持ES6、React.js、jsx代碼語(yǔ)法高亮。請(qǐng)跟著gif圖來(lái)安裝一下吧。

插件安裝完成之后，切換一下sublime的頁(yè)面或者重啟sublime即可生效。

2. React Templates 插件

這個(gè)插件可以讓我們只需要敲幾個(gè)字母即可生成大量react代碼，非常實(shí)用，安裝步驟類(lèi)似，就不贅述了。

2.1 如何使用

可以看到，我們敲 cdm 然后按下tab鍵即可生成 相應(yīng)代碼：

js相關(guān)
cdm ->
componentDidMount: function() {
  //...
},
cwu ->
componentWillUpdate: function(nextProps, nextState) {
  //... 
},
ss ->
this.setState({
  : 
});
...

通過(guò)動(dòng)圖，我們可以發(fā)現(xiàn)，react里面的方法等，我們只需要敲出幾個(gè)關(guān)鍵字母即可生成全部代碼。

3. Less 插件

這里只是拿less作為一個(gè)例子，事實(shí)上還有其他選擇，比如sass，stylus等。

3.1 安裝less插件

寫(xiě)組件離不開(kāi)寫(xiě)樣式，這里推薦使用less作為css預(yù)處理器。

3.2 如何使用

因?yàn)橛写a塊的提示功能，我們寫(xiě)css通常只用寫(xiě)幾個(gè)字母即可按下Tab補(bǔ)全。

css相關(guān)
w -> width:
h -> height: 
m -> margin: 
...

4. 總結(jié)

本章節(jié)我們學(xué)習(xí)了如何安裝react相關(guān)的插件，以及如何使用。同樣還是那句話，快捷鍵那么多，我們只需要記住常用的那幾個(gè)就好了。最好還是學(xué)會(huì)手寫(xiě)，不然萬(wàn)一哪天去面試，發(fā)現(xiàn)componentDidMount不會(huì)寫(xiě)那就尷尬無(wú)比了。

我們要把寫(xiě)代碼當(dāng)成一種愛(ài)好，一種藝術(shù)，而不是混飯吃的一種差事。