專為建立 UI 而生的 JavaScript Library －React

2016/3/7 更新

React 的版號一直沒有提升到象徵穩定的 1.0 ，目前官網下載依然停留在 v0.14.7，今年稍早Rect 釋出了全新升級的訊息，版本號將一口氣提升至 v15.0 ，而就在 3/7 ，官方 Blog 宣告釋出 RC 版的 React v15 ，至於為什麼拖這麼久，官方解釋因為他們忙著追美劇《紙牌屋》。

看來 2016 年是在開發中導入 React 技術的時候了。XD

---

React是一套專門用來處理UI的JavaScript函式庫，既使JavaScript函式庫已經非常多了，Rect還是引起了我們的注意，當然我們並非因為Facebook 與 Instagram都在使用而去特別關注，最主要的原因，也是最特別的地方在於React專注在處理UI這件事情上面。

MVC架構近年大行其道，無論伺服器端的MVC，或是網頁端的MVC，都讓前端應用程式的複雜度愈來愈難以掌握，而如果你對MVC熟悉，可以將React視為MVC中的V這個部份進行處理，事實上HTML天生便是為了UI而生，React的出現讓我們可以更容易將前端開發的重心聚焦於UI的發展上面，讓複雜互動的Web應用分層開發變得更為精確。

既然是JavaScript函式庫，想當然耳將其直接引用進網頁，就可以開始運用React在網頁UI的開發上面了。

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

假設要在網頁上配置一個包含三個 li 資料項目的ul清單如下：

<ul id="fe">

<li>HTML

<li>CSS

<li>JavaScript

</ul>

為了方便呈現，我們在網頁上配置一個 div 並且透過 JavaScript 動態建立清單內容將其嵌入其中。

var ul = document.createElement('ul');

ul.setAttribute('id', 'fe');

var li1 = document.createElement('li');

var li2 = document.createElement('li');

var li3 = document.createElement('li');

li1.textContent = 'HTML';

li2.textContent = 'CSS';

li3.textContent = 'JavaScript';

ul.appendChild(li1);

ul.appendChild(li2);

ul.appendChild(li3);

document.getElementById('listArea').appendChild(ul);

同樣的結果，我們現在利用Rect進行處理如下：

var root = React.DOM.ul(

    {id:"fe"},

    React.DOM.li(null, 'HTML'),

    React.DOM.li(null, 'CSS'),

    React.DOM.li(null, 'JavaScript')

);

React.render(root, document.getElementById('listArea'));

以上的配置會得到相同結果。React有一套專屬的語法JSX，透過這個語法，可以讓處理UI內容的過程更為簡單，同樣的我們利用JSX改寫上述的內容：

<script type="text/jsx">

 React.render(

        <ul id="fe">

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>,

        document.getElementById('listArea')

  );

</script>

這一次直接透過 JSX 語法將 ul 元素的內容寫入網頁中，要注意當你要在網頁中使用 JSX 語法，必須將 script 的 type 屬性設定為 text/jsx ，如此一來 JSX 語法預處理器在網頁載入的過程中，會將其轉換成原始的 JavaScript 。

現代的網頁開發人員為了簡化資料與互動處理，往往導入更複雜的框架或是函式庫，React 完全專注在UI的建構與互動處理，以元件化為基礎進行開發，如此的概念與一堆氾濫成災的現代 JavaScript Library 相較依然相當先進，特別適合網頁應用化的趨勢，並且能夠真正降低開發人員的負擔，最重要的是，React不需要搭配其它技術，具備 JavaScript 技術能力即可。

如果你正打算將傳統應用程式 Web 化，React 是個非常值得你特別注意的 JavaScript Library，不過要提醒讀者的是，就如同支援出色圖表製作功能的 D3 函式庫，想要快速上手並且將 React 運用於開發中，良好的前端開發與JavaScript技術能力相當重要，如果你正為如何有效具備這些基礎技能、為自己武裝良好的技術能力而煩惱，歡迎參考我們已經釋出的前端開發技術文件。