###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. c++11 学习

    #include <iostream> // std::cout #include <functional> // std::ref #include <thread&g ...

  2. SugarCE问题点记录

    问:如何获取module参数?如果module参数不存在,如何处理?答:首先检查$_REQUEST['module'],然后再检查$sugar_config['default_module']是否有设 ...

  3. java的日期格式使用

    转自:  关于java中六个时间类的使用和区别     java.util.Date java.sql.Date  java.sql.Time  java.sql.Timestamp java.tex ...

  4. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  5. golang中使用mongodb的操作类以及如何封装

    mgo简介 mongodb官方没有关于go的mongodb的驱动,因此只能使用第三方驱动,mgo就是使用最多的一种. mgo(音mango)是MongoDB的Go语言驱动,它用基于Go语法的简单API ...

  6. angularJS使用内置服务

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

  7. 折腾docker安装笔记

    最近尝试把netcore迁移到docker,然后在本地虚拟机尝试装下 发现yum安装好复杂 于是记录下 1.7.2 centos的ios装虚拟机 2.修改网络 配置文件 查看网络地址 然后xshell ...

  8. Python sklearn 分类效果评估

    https://blog.csdn.net/sinat_26917383/article/details/75199996

  9. OSI7层网络模型

    物理层在OSI参考模型中,物理层(Physical Layer)是参考模型的最低层,也是OSI模型的第一层.物理层的主要功能是:利用传输介质为数据链路层提供物理连接,实现比特流的透明传输.物理层的作用 ...

  10. SQL Like中的逗号分隔符

    SQL Like中的逗号分隔符   在与数据库交互的过程中,我们经常需要把一串ID组成的字符串当作参数传给存储过程获取数据.很多时候我们希望把这个字符串转成集合以方便用于in操作. 有两种方式可以方便 ...