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的開發上面了。
假設要在網頁上配置一個包含三個 li 資料項目的ul清單如下:
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 技術能力即可。
2 則留言:
呂大,會出書嗎?
有系統還有課程未來幾個月要上線,今年應是不太可能的 ;)
張貼留言