###React簡介
RN是基於React設計，了解React有助於我們開發RN應用；
React希望將功能分解化，讓開發變得像搭積木一樣，快速而且可維護
React主要有如下3個特點：
*作為UI（Just the UI）
*虛擬DOM（Virtual DOM）
這是亮點 是React最重要的一個特性 放進內存 最小更新的視圖
差異部分更新 diff算法
*數據流（Date Flow）單向數據流
學習React需要掌握哪些知識？
*JSX語法 類似XML
*ES6相關知識
*前端基礎 CSS+DIV JS
舉例說明React的用法，IDE工具：WebStorm(JavaScript 開發工具 Web前端開發神器 插件很豐富)
比如：ReactNative 代碼智能提醒（webstorm）
`git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate`
下載模板：https://github.com/wix/react-templates安裝命令
`npm install react-templates -g`
[點擊下載WebStorm](https://www.jetbrains.com/webstorm/download/)
[點擊下載WebStorm破解版](http://www.cr173.com/soft/130969.html)
1.例子一（簡單組件和數據傳遞）
使用this.props 指向自己的屬性
從http://facebook.github.io/react/downloads.html下載react Kit
react.js react-dom.js：React的核心文件
JSXTransformer.js browser.min.js：講JSX轉譯成js和html的工具
最新的react版本：react-0.14.7
>在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js
在react 0.14后，這個依賴的庫改為browser.js，頁面script標簽的type也由text/jsx改為text/babel
但是以上只能用來測試學習react
生產環境需要借助編譯工具事先將jsx編譯成js
例如可以使用Node.js做預編譯，可以安裝react-tools工具
npm install -g react-tools
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass(
{
render:function(){
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是東方耀</h1>;
//這是注釋 React.createElement
}
}
);
ReactDOM.render(<HelloMessage name="React 語法基礎8" /> ,document.getElementById('example'));
</script>
</body>
</html>
2.例子二（通過this.state更新視圖）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第二個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Timer=React.createClass(
{
/*初始狀態*/
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(
<div> Seconds Elapsed:{this.state.secondsElapsed} </div>
);
}
}
);
React.render( <Timer /> ,document.getElementById('example'));
</script>
</body>
</html>
3.例子三（簡單應用）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第三個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor=React.createClass(
{
getInitialState:function(){
return {value:'你可以在這里輸入文字'};
},
handleChange:function(){
this.setState({value:React.findDOMNode(this.refs.textarea).value});
},
render:function(){
return (
<div>
<h3>輸入</h3>
<textarea style={{width:300,height:150,outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}
/>
<h3>輸出</h3>
<div> {this.state.value} </div>
</div>
);
}
}
);
React.render(<ShowEditor />,document.getElementById('example'));
</script>
</body>
</html>
###React Native簡介與代碼分析
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class DongFang extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!東方耀的第5課
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('DongFang', () => DongFang);
###為什么要使用React Native
如何在開發成本和用戶體驗做到更好的平衡？
很多時候，前端都有一種樂觀的想法：H5可以替代原生應用
RN不僅可以使用前端開發的模式來開發應用，還能調用原生應用的UI組件和API
##2、配套視頻(下載地址)：https://yunpan.cn/cY4JX8Aj5Vr9Y 訪問密碼 413d