一、簡介：
React 是一個用於構建用戶界面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
1.1、React 特點
1.聲明式設計 −React采用聲明范式，可以輕松描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。
1.2、為什么使用 React?
React 是一個 Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。很人多認為 React 是 MVC 中的 V（視圖）。
我們創造 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>
結果：
1.6.6、渲染數據到表格中
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<style>
table{
text-align: center;
}
#showNowTime{
text-align: center;
}
</style>
</head>
<body>
<div id="example"></div>
<div id="Goods"></div>
<table id="table">
</table>
<script src="javascript/common/babel.min.js"></script>
<script src="javascript/common/react.development.js"></script>
<script src="javascript/common/react-dom.development.js"></script>
<script type="text/babel">
/*當前時間*/
function tick() {
const element = (
<div id="showNowTime">
<h1>火火水果商店</h1>
<h3>當前時間: {new Date().toLocaleTimeString()}</h3>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);
(function showGood(){
//定義數組
const goods = [{id:1,name:'橘子',price:5,number:20},{id:2,name:'香蕉',price:3.5,number:10},
{id:3,name:'梨子',price:6,number:10},{id:4,name:'西瓜',price:30,number:40},
{id:5,name:'蘋果',price:7,number:42},{id:6,name:'山竹',price:20.5,number:50}];
const todoItems = goods.map((obj, index) =>
// 只有在沒有確定的 id 時使用
<tr key={index}>
<td>{index+1}</td>
<td>{obj.name}</td>
<td>{obj.price}/斤</td>
<td>{obj.number}</td>
</tr>
);
/*渲染數據到table中*/
ReactDOM.render(
<table border="1" width="100%" cellPadding="0" cellSpacing="0">
<tr>
<th>編號</th><th>名稱</th><th>單價</th><th>數量</th>
</tr>
<tbody>
{todoItems}
</tbody>
</table>,
document.getElementById('Goods')
);
})();
</script>
</body>
</html>
結果：
在此愉快的學習過程就結束啦，咋們下期再見！