專為建立 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技術能力相當重要,如果你正為如何有效具備這些基礎技能、為自己武裝良好的技術能力而煩惱,歡迎參考我們已經釋出的前端開發技術文件


2 則留言:

KEN 提到...

呂大,會出書嗎?

康廷數位 提到...

有系統還有課程未來幾個月要上線,今年應是不太可能的 ;)