標籤：
###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
2、手把手教React Native實戰之從React到RN
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
