關於React的入門級安裝和最淺顯解釋

標籤：

春節臨近，辦公室裡半片空位，半片浮囂。

想到將放假，螢幕上的代碼也都變成了雀躍的小蟲。

無法專心了。

終於還是強迫自己讀了半篇文檔，寫了幾坨程式。

這次記錄的是關於React，最淺顯的內容。

 

———— 我是望眼欲穿的分割線 ————

 

Step 1：npm init

按照嚮導填寫各個欄位，最後產生package.json檔案。

容易出錯的是：name的值不要和包包同名。

比如我們後續需要使用npm安裝幾個包包：browserify react reactify ...

則name值如果寫作“browserify”或“react”，此依賴會安裝失敗！

提示如下：

npm WARN install Refusing to install react as a dependency of itself

在OS X裡一個依賴安裝失敗會Block其他依賴的安裝，

Ubuntu裡只會失敗當前包的安裝，不會Block其他包。

總之，name不要和包名等關鍵字重名就對了。

 

Step 2：npm install --save-dev blah blah blah

package.json檔案完成後，即可安裝所需的依賴了：

sudo npm install --save-dev browserify react reactify react-dom uglify-js

這裡的安裝不要使用全域（-g）安裝。只裝在目前的目錄裡即可。

多個依賴之間是空格。

安裝成功後，需要手動在package.json檔案裡的scripts屬性中做個配置：

（假設package.json檔案裡的main檔案是index.js）

"build": "browserify --debug index.js > myBundle.js",

"build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > myBundle.min.js",

browserify 是一個JS檔案的打包工具，網上很多介紹，此不贅述。

任何包含require語句的JavaScript檔案運行Browserify都會自動打包所有的依賴項。

只不過它只支援.js檔案。很專一。

這個Step還沒完，在package.json裡還要添加一個屬性：

"browserify": {
  "transform": [
    "reactify"
  ]
}

好了，這個Step完了。

 

Step 3：npm run build 

這個命令就建立了打包檔案myBundle.js。

然後在index.html頁面裡引用之即可。

接下來，對index.js的每一次修改，都要run一次，頁面才會有更新。

補充半句，

webpack也可以完成browserify的任務，

並且它不僅僅支援.js檔案，很強大。不解釋了。

 

Step 4：現在可以在index.js裡美美的寫React代碼了

先require：

var React = require("react");

var ReactDOM = require(‘react-dom‘);

初次接觸React代碼對於用慣了jQuery的人來說不適應。

但如果寫過AngularJS就容易接受了。

不僅想起了兩年前寫AngularJS時的痛苦，一身冷汗！

好在經過修鍊，再新奇的JS寫起來也不再冒冷汗了。

複述有助於自我理解，以下是對原理的通俗解釋，可忽略：

jQuery對事件的監聽會綁定在DOM元素上，

事件每次發生，都會對DOM有所動作。

而React通過“狀態”來監聽事件，每當事件發生時，狀態改變，

然後在render屬性裡將最新狀態渲染到頁面上。

因此，React會通過建立UI組件，

將事件監聽、狀態修改、DOM結構都整合在一個組件裡，

對於需要多個組件的大型WEB應用來說，這種結構更方便維護。

 

Step 5：React.createClass({ ... })建立UI組件

其中一個內建屬性 getInitialState 要初始化各個“狀態”：

注意這個函數每次建立組件時只運行一次。

getInitialState: function() {

  return {

    text: "",

    closed: false

  }

}

然後我們可以自訂自己的監聽函數，比如：

myHandleChange: function(event) {

  this.setState({

    text: event.target.value,

    closed: true

  })

}

每次執行myHandleChange函數時都會在setState裡更新狀態，

這裡是重寫了text的值和closed的值。

如何觸發myHandleChange函數，就不是React的問題了，

比如將其寫在input元素的onChange屬性裡就可以在輸入時觸發。

 

Step 6：最後將UI組件render到頁面裡

ReactDOM.render(<TweetBox />, document.body);

render函數接收的兩個參數，一個是帶尖角括弧的組件變數名，

另一個是容器，這裡是document.body

但似乎官方不建議直接使用body作容器，

最好建立一個body下的容器元素。

 

Step 7：render函數裡奇異的return

這個要單獨提出來講一下，是因我個人看它不順眼。。。

在render函數裡的return返回的是一段HTML結構，

但它的寫法既不同於JS原生文法，也不遵循HTML文法，

據說這貨叫作JSX什麼的，Whatever。

總之，這裡要注意的是4點：

a：return 後面的內容都放在小括弧裡

b：這段HTML結構必須包含在一個最外層元素中，不可出現兩個並列的最外層元素。

c：結構裡的class要寫成“className”

d：引用組件內的變數時，不要帶引號，例如 onChange={this.myHandleChange}

 

———— 我是赤裸裸的分割線 ————

 

以上是最淺顯的內容。

但也足夠支援我寫一坨小程式了。

準備放假了呢。

 

關於React的入門級安裝和最淺顯解釋