什麼是React.js?

• 用於構建使用者介面的庫
• 由Facebook建立維護
• MVC中的V
• 可以執行在Client && Server

虛擬DOM

• 虛擬DOM對真實的DOM進行了抽象，所以使得程式設計更加簡單
• 是剪裁版的DOM，只更新這些DOM的部分
• 更快
• 單向資料流動

為何使用React.js?

• 簡單 ：React管理所有的UI更新
• 宣告式：知道重新整理時只更新應用的一部分
• 可讀性高，可重用：所有東西都被看作元件

JSX

• tag風格的語法，類似XML & HTML
• 推薦使用，但不強制

Babel編譯器

• 將JSX程式碼翻譯成JS
• 可以使用ES6風格語法
• 與Webpack協作良好，這是很棒的模組打包工具

<script type="text/babel">

示例：

var helloMessage = React.createClass({
	render: function() {
		return <div>Hello {this.props.name}</div>;
	}
});

ReactDOM.render(<HelloMessage name="John"
 
 />, 
	document.getElementById('app')
);

States & Props

• props: 元件間資料傳遞
• state: 元件的內部狀態

當元件的state改變時，元件重新渲染，標記將會被更新，這樣實現的效果就是比較動態的。

生命週期

React會在元件渲染或者更新時觸發特定的函式：

• render: 渲染元件
• getInitialState:
• getDefaultProps
• componentWillMount
• componentDidMount

外掛

• 輔助開發React.js應用的元件
• 動畫元件
• 雙向資料繫結元件
• 測試元件等

END.

參考：https://www.youtube.com/watch?v=vYldnghykaU&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO