React 10分鐘快速入門
一、簡介：
React 是一個用於構建使用者介面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）。
React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。
1.1、React 特點
1.宣告式設計 −React採用聲明範式，可以輕鬆描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的互動。
3.靈活
4.JSX − JSX 是 JavaScript 語法的擴充套件。React 開發不一定使用 JSX ，但我們建議使用它。
5.元件 − 通過 React 構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中。
6.單向響應的資料流 − React 實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單。
1.2、為什麼使用 React?
React 是一個 Facebook 和 Instagram 用來建立使用者介面的 JavaScript 庫。很人多認為 React 是
我們創造 React 是為了解決一個問題：構建隨著時間資料不斷變化的大規模應用程式。為了達到這個目標，React 採用下面兩個主要的思想。
簡單
僅僅只要表達出你的應用程式在任一個時間點應該長的樣子，然後當底層的資料變了，React 會自動處理所有使用者介面的更新。
宣告式 (Declarative)
資料變化後，React 概念上與點選“重新整理”按鈕類似，但僅會更新變化的部分。
構建可組合的元件
React 都是關於構建可複用的元件。事實上，通過 React 你唯一要做的事情就是構建元件。得益於其良好的封裝性，元件使程式碼複用、測試和關注分離（separation of concerns）更加簡單。
1.3、 React學習資源
React英文官網：https://reactjs.org/
React中文官網：https://react.docschina.org/
Github地址： https://github.com/facebook/react
極客學院：http://wiki.jikexueyuan.com/project/react/
菜鳥教程：http://www.runoob.com/react/react-tutorial.html
react.js 中文論壇：http://www.react-china.org
Webpack 和 React 小書 - gitbook：https://fakefish.github.io/react-webpack-cookbook/
1.4、AngularJS簡介
AngularJS是一個前端MVVM框架。
angular的英文字面意思是：有角的; 用角測量的
AngularJS是協助搭建單頁面工程（SPA）的開源前端框架。它通過MVC模式使得開發與測試變得更容易。
AngularJS試圖成為WEB應用中的一種端對端的解決方案。它將指導開發整個應用。
AngularJS於2009年釋出第一個版本，由Google進行維護，壓縮版94k。
1.3版後不再支援IE8
1.3版後不支援全域性控制器
2.0版 alpha
git倉庫： https://github.com/angular/
官網： https://www.angularjs.org/
http://www.angularjs.cn/中文社群
http://www.apjs.net/ 中文網
a web framework for modern web apps
1.5、Vue.js
Vue.js是一個輕巧、高效能、可元件化的MVVM庫，同時擁有非常容易上手的API，作者是尤雨溪是中國人。
易用
已經會了HTML,CSS,JavaScript？即刻閱讀指南開始構建應用！
靈活
簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
效能
17kb min+gzip 執行大小、超快虛擬 DOM 、最省心的優化
當前三大前端MVC框架的對比：
1.6、React入門示例
獲取React
1、前往官網或者GitHub：http://react-cn.github.io/react/downloads.html
2、使用cdn
3、npm
npm install -g react-tools
1.6.1、宣告式渲染
示例：
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="javascript/react.min.js"></script>
<script>
React.render(
//建立一個虛擬Dom
React.createElement('h1', null, 'Hello, world!'),
//把內容新增到example裡
document.getElementById('example')
);
</script>
</body>
</html>
結果：
恭喜你，歡迎來到 React 的世界。
1.6.2、一個簡單的元件
React 元件通過一個render()方法，接受輸入的引數並返回展示的物件。
以下這個例子使用了 JSX，它類似於XML的語法
輸入的引數通過render()傳入元件後，將儲存在this.props
示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一個簡單的元件</title>
</head>
<body>
<div id="showMessage"></div>
<script src="javascript/react.min.js"></script>
<script>
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "你好， ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, {name: "湯姆先生"}), showMessage);
</script>
</body>
</html>
結果：
1.6.3、一個有狀態的元件
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時間旅行</title>
</head>
<body>
<div id="timer"></div>
<script src="javascript/react.min.js"></script>
<script>
var Timer = React.createClass({displayName: "Timer",
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
React.createElement("div", null, "經過的秒數: ", this.state.secondsElapsed," 秒")
);
}
});
React.render(React.createElement(Timer, null), timer);
</script>
</body>
</html>
結果： 
1.6.4、一個應用程式
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一個應用程式</title>
</head>
<body>
<div id="mountNode"></div>
<script src="javascript/react.min.js"></script>
<script>
var TodoList = React.createClass({displayName: "TodoList",
render: function() {
var createItem = function(itemText) {
return React.createElement("li", null, itemText);
};
return React.createElement("ul", null, this.props.items.map(createItem));
}
});
var TodoApp = React.createClass({displayName: "TodoApp",
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
React.createElement("div", null,
React.createElement("h3", null, "TODO"),
React.createElement(TodoList, {items: this.state.items}),
React.createElement("form", {onSubmit: this.handleSubmit},
React.createElement("input", {onChange: this.onChange, value: this.state.text}),
React.createElement("button", null, 'Add #' + (this.state.items.length + 1))
)
)
);
}
});
React.render(React.createElement(TodoApp, null), mountNode);
</script>
</body>
</html>
結果：
1.6.5、一個使用外部外掛的元件
showdown.js下載：https://github.com/showdownjs/showdown
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一個使用外部外掛的元件</title>
</head>
<body>
<div id="mountNode"></div>
<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/react.min.js"></script>
<script src="javascript/showdown.js"></script>
<script>
var converter = new showdown.Converter();
var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: this.refs.textarea.getDOMNode().value});
},
render: function() {
return (
React.createElement("div", {className: "MarkdownEditor"},
React.createElement("h3", null, "Input"),
React.createElement("textarea", {
onChange: this.handleChange,
ref: "textarea",
defaultValue: this.state.value}),
React.createElement("h3", null, "Output"),
React.createElement("div", {
className: "content",
dangerouslySetInnerHTML: {
__html: converter.makeHtml(this.state.value)
}}
)
)
);
}
});
React.render(React.createElement(MarkdownEditor, null), mountNode);
</script>
</body>
</html>
結果：
在此愉快的學習過程就結束啦，咋們下期再見！