###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的更多相关文章

  1. 手把手教你React Native 实战之开山篇《一》

    先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...

  2. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

  3. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  4. 【React Native 实战】二维码扫描

    1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...

  5. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  6. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  7. 6、手把手教React Native实战之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...

  8. 5、手把手教React Native实战之盒子模型BoxApp

    用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/0 ...

  9. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

随机推荐

  1. mysql 严格模式取消 group by 和 date zore

    取消单个库的时间严格模式 set global sql_mode=(select replace(@@sql_mode,'NO_ZERO_IN_DATE,NO_ZERO_DATE',''));

  2. angular -- $resource 用法

    安装 ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js <script type="text/javascript" src=&q ...

  3. canvas光晕

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. struts struts拦截器(过滤器)

    在struts中尽量避免自定义拦截器,因为大部分需要自己定义拦截器的时候,设计思路就不对了.大部分拦截器框架都有给你定义好了.而且如果在struts中定义拦截器相当于和这个框架绑定了,假如以后要扩展或 ...

  5. 在Docker中执行web应用

    启动一个简单的web 应用 使用社区提供的模板,启动一个简单的web应用,熟悉下各种Docker命令的使用: # docker run -d -P training/webapp python app ...

  6. golang 的编译安装以及supervisord部署

    go的编译 go的编译相对很简单,只需要一个命令即可完成,进入项目开发路径,输入 go install <appName> 即可在bin文件夹下生成可执行文件 appName.此文件可直接 ...

  7. vue的组件(先学习其他的ES6知识,之后再看这个) (未完)

    https://blog.csdn.net/qq20004604/article/details/56965703

  8. HR问“预期薪资是多少”,这么说能加薪zz

    每年过完节,收好上一年的年终奖,身边人就开始蠢蠢欲动,招聘市场也异常火爆,节前各种裁员的新闻,过了个节都变成了“我们还要继续招人”. 年景不好,人才更是成了紧俏货.可现实中,我却发现,优质的人才未必能 ...

  9. atitit.userService 用户系统设计 v6 q413

    atitit.userService 用户系统设计 v6 q413 1. 新特性1 2. Admin  login1 3. 用户注册登录2 3.1. <!-- 会员注册使用 -->  商家 ...

  10. 查看selinux的状态

    sh-4.1# getenforce Disabled sh-4.1# getenforce Disabled 永久方法 – 需要重启服务器 修改/etc/selinux/config文件中设置SEL ...