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
2、手把手教React Native实战之从React到RN的更多相关文章
- 手把手教你React Native 实战之开山篇《一》
先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...
- RN 实战 & React Native 实战
RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- 【React Native 实战】二维码扫描
1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 3、手把手教React Native实战之flexbox布局
flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...
- 6、手把手教React Native实战之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...
- 5、手把手教React Native实战之盒子模型BoxApp
用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 
###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...
随机推荐
- BroadcastReceiver应用详解——广播
转自:http://blog.csdn.net/liuhe688/article/details/6955668 BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收 ...
- 01-spring安装，hello word
环境搭建 第一步:安装spring 可以参考这个:http://blog.csdn.net/boredbird32/article/details/50932458 安装成功后,重启后有下面这个Spr ...
- C++MFC编程笔记day03 MFC工具栏、状态栏、视图窗体
MFC工具栏 相关类: CToolBarCtrl - 父类是 CWnd 封装了工具栏控件相关操作 CToolBar - 父类是CControlBar 封装了工具栏和框架窗体之间的关系 工具栏使用: ...
- Android 4.4KitKat AudioTrack 流程分析
Android Audio 系统的主要内容: AudioManager:这个主要是用来管理Audio系统的,需要考虑整个系统上声音的策略问题,例如来电话铃声,短信铃声等,主要是策略上的问题. Audi ...
- C# 异或校验算法
C# 的异或校验算法 直接上代码 public partial class FormCRC : Form { public FormCRC() { InitializeComponent(); } p ...
- oracle 数据导入和导出(原创)
oracle的数据导入导出必须是在两个地方建立相同的用户才能完整导入(本地导入新的数据库需重建权限).所以导入就得按以下步骤进行: 假定服务器端用户为puser 服务器端导出可以这样做: 导出数据:e ...
- 关于wxpy，使用Python玩转微信的问题
在github上下载了,安装了之后在idle上运行,好像是说Python不能上网.新手求助.现在问题已经解决,是ssl 证书的问题,不能用最新的 复制内容到剪贴板 代码: sudo pip unins ...
- 定时检测Memcached进程是否存在，若不存在自动启动它
由于一台WEB服务器的Memcached死掉而导致在访问网站的某些页面时候打不开.下面脚本会自动检测Memcached的进程,如果挂掉则自动重启Memcached服务. vim memcached_c ...
- Atitit.增强系统稳定性----虚拟内存的设置
Atitit.增强系统稳定性----虚拟内存的设置 1.1. 读取虚拟内存配置1 1.2. 禁止虚拟内存1 1.3. 默认所有驱动器虚拟内存1 1.4. 设置c d盘虚拟内存为系统管理1 1.5. 设 ...
- Atitti.数据操作crud js sdk dataServiceV3设计说明
Atitti.数据操作crud js sdk dataServiceV3设计说明 1. 增加数据1 1.1. 参数哦说明1 2. 查询数据1 2.1. 参数说明2 3. 更新数据2 3.1. 参数说明 ...