2、手把手教React Native实战之从React到RN
###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
最新文章
- Oracle 数据库--一个用户同步的sql
- 可嵌入式的动态http服务minihttp组件
- Java语法糖2:自动装箱和自动拆箱
- WPF仿Win7便笺
- Linux的磁盘分区(1)
- 【Math】余弦相似度 和 Pearson相关系数
- 使用jQuery Mobile实现新闻浏览器(3)
- OpenGL 加载位图(BMP)贴图
- JAVA对象之生
- H5的本地存储
- Pycharm在创建py文件时,如何自动添加文件头注释(类似于钩子特性)?
- CentOS下Mysql安装调试
- php简单数据缓存类
- Qt学习 之 多线程程序设计(QT通过三种形式提供了对线程的支持)
- ThinkPHP - 模板使用函数
- clear命令新认识
- 使用Python查询JMX
- Java学习从菜鸟变大鸟之二 输入输出流(IO)
- pandas.read_csv() 报错 OSError: Initializing from file failed,报错原因分析和解决方法
- python中的猴子补丁Monkey Patch
热门文章
- vue 不能检测数组长度 值变化原因解析
- javascript Date日期类
- 10-spring学习-注入Resource
- hibernate 关系映射之 主键关联一对一
- 项目启动报错:No suitable driver found for jdbc:oracle:thin:@192.168.7.146:1521:oracle
- RPM卸载
- Linux命令-网络命令:mail
- PayPal 对接
- JavaScript点击按钮显示 确认对话框
- Ubuntu13.04使用Jlink和ST-Link V2烧写STM32F1x和STM32F4x