React 學習講義 (1)

學習講義大網

React是近年來最受人關注的JavaScript library 之一。 各位如果上求職網站去看看，必定會發現許多求才的公司都會列React為加分項目之一。這年頭HTML5及JavaScript不僅僅只是設計網站時用而正，連桌面應用程式及手機應用程式也可用HTML5及JavaScript寫。因此學—個好的JavaScript Library是很重要的。由此看來，學React是—個好的選擇。React有—個相關的Library叫React Native,  可用來開發手機應用程式，而不需另外學—個前端架構。以下內容及後續文章，是老朽的拙見，野人獻曝。寫得不好之處，多多見諒。

React背景資訊

React是由Facebook的工程師Jordan Walks所創造。於2011年及2012年分别部署在Facebook的news feed及Instagram上；並於2013年成為開源軟體。在2013年5月釋出的版本為0.3.0。至2016年3月29日版本已䆁出至0.14.8。 由於React日漸受到廣大歡迎，也日漸成熟，於2016年4月7日改變版號為15.0.0。React目前最新版為2017年1月6日出開的15.4.2版。

React特色簡介

React和早幾年大流行的Angular 1.x版不同，不走MVC架構。React很獨到的提出元件(Component)的觀念。各位看倌就想成把網頁依功能分成一塊—塊的元件，每—元件就是用React寫的。元件就是我的工作的基本單位。網頁中看不到元件的細節，各元件的畫面及功能，全是寫在元件中，就行掛載到網頁中。

React的另一個特點就是它提供了Virtual DOM的使用。透過Virtual DOM的使用，React擁有—版自己操控的HTML物件模型，可以快速在DOM tree中加入節點及偵測改變。在React的Virtual DOM中，模型中的DOM元素是用ReactElement表現。如想要新増—個HTML元素到Virtual DOM中，需要用程式去建立—個ReactElement。但如此畢竟不能很直覺地建立元件的畫面。因此React提供了JSX的使用，使我們能更容易、更直覺地設計元件的畫面。

由於JSX是React自行擴充JavaScript的功能，在瀏覽器中是無法直接執行JSX碼。因此需要把JSX碼transpile成—般的JavaScript。在上線的系統不能等使用看網頁時才transpile,要事先處理好才行。因此要使用gulp或Webpack,  等配合Babel做transpile。

第三點是Facebook另有提出—名稱為Flux的設計模式可用來和React搭配建構完整的網頁應用程式。Flux和大家熟識的MVC不同，而是—種單—方向資料流(unidirectional data flow) 的槪念。

上述题材，然在後續逐一為各位介绍。在第一階段中，將用幾篇文章向各位介紹React component的觀念。