React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native

是ReactJS思想在native上的体现!

JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个

HTML标签都转化为JavaScript代码来运行

1.环境

2.载入方式

3.标签 HTML标签 与 ReactJS创建的组件类标签(首字母一定要大写)

4.转换 解析器

输入

转换成:
React.createElement(“h3”,null,”输入”) 返回一个ReactElement对象

5.执行JavaScript表达式

var msg=”我是东方耀”;

{msg}

React.createElement(“h1”,null,msg)

6.注释 单行:// 多行:/注释文本/

7.属性

var msg=

我是东方耀

React.createElement(“h1”,{width:”10px”},”我是东方耀”)

8.延展属性
使用ES6的语法
var props={}; props.foo=”1”; props.bar=”1”;

ReactJS

ReactJS核心思想:组件化 维护自己的状态和UI 自动重新渲染

多个组件组成了一个ReactJS应用

  • React是全局对象 顶层API与组件API
  • React.createClass创建组件类的方法
  • React.render渲染,将指定组件渲染到指定DOM节点
  • render:组件级API,返回组件的内部结构
  • React.render被ReactDOM.render替代

ReactJS组件生命周期

1.创建阶段

getDefaultProps:处理props的默认值 在React.createClass调用

2.实例化阶段

React.render(

<!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(
{
//1、创建阶段
getDefaultProps:function(){
//在创建类的时候被调用 this.props该组件的默认属性
console.log("getDefaultProps");
return {};
}, //2、实例化阶段
getInitialState:function(){
//初始化组件的state值,其返回值会赋值给组件的this.state属性
//获取this.state的默认值
console.log("getInitialState");
return {};
}, componentWillMount:function(){
//在render之前调用此方法
//业务逻辑的处理都应该放在这里,如对state的操作等
console.log("componentWillMount");
}, render:function(){
//根据state值,渲染并返回一个虚拟DOM
console.log("render");
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;
//这是注释 React.createElement
}, componentDidMount:function(){
//该方便发生在render方法之后
//在该方法中,ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
//组件内部可以通过this.getDOMNode()来获取当前组件的节点
console.log("componentDidMount");
}, //3、更新阶段,主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整 componentWillReceiveProps:function(){
//该方法发生在this.props被修改或父组件调用setProps()方法之后
//调用this.setState方法来完成对state的修改
console.log("componentWillRecieveProps");
},
shouldComponentUpdate:function() {
//用来拦截新的props或state,根据逻辑来判断
//是否需要更新
console.log("shouldComponentUpdate"); return true;
}, componentWillUpdate:function(){
//shouldComponentUpdate返回true的时候执行
//组件将更新
console.log("componentWillUpdate"); }, componentDidUpdate:function(){
//组件更新完毕,我们常在这里做一些DOM操作
console.log("componentDidUpdate");
}, //4、销毁阶段
componentWillUnmount:function(){
//销毁时被调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作
console.log("componentWillUnmount");
} }
); ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example')); </script>
</body>
</html>

组件之间通信实例

<!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 Parent=React.createClass(
{
click:function(){
this.refs.child.getDOMNode().style.color="red";
},
render:function(){
return (
<div onClick={this.click} >Parent is :
<Child name={this.props.name} ref="child"></Child>
</div> ); }
}
); var Child=React.createClass({ render:function(){
return <span> {this.props.name} </span>;
} }); ReactDOM.render(<Parent name="React语法基础" /> ,document.getElementById('example')); </script>
</body>
</html>

React Native实战之调试与打包发布

http://localhost:8081/index.android.bundle?platform=android;当应用启动运行的时候,会自动拉取这

个bundle文件,该文件里存放的是应用的全部逻辑代码,在目录中并不存在这个文件,事实上,这个

地址只是一个请求地址,而非真正的静态资源文件,是通过包服务器packager通过动态分析

index.android.js中的依赖,并对其进行合并得到的,而且该服务允许代码实时渲染。

1.生成一个签名密钥

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

最后它会生成一个叫做my-release-key.keystore的密钥库文件

2.找到路径/android/app/src/main,并在该目录下新建assets文件夹

3.在工程目录下将index.android.bundle下载并保存到assets资源文件夹中

curl -k “http://localhost:8081/index.android.bundle” > android/app/src/main/assets/index.android.bundle

这句命令是重点,如果assets目录中不存在该文件,则打包的apk在执行时显示空白。

Protocol ‘http not supported or disabled in libcurl

Windows下安装使用curl命令:http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html

4.添加gradle的android keystore配置

打包的apk在未签名的情况下,在手机中(非root)是不允许安装的

在build.gradle文件中

//签名
signingConfigs{ release { storeFile file("/my-release-key.keystore") storePassword "密码" keyAlias "keyAlias的名字" keyPassword "密码" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release //添加这句话引用签名配置 } }

5.启用Proguard代码混淆来缩小APK文件的大小

Proguard是一个Java字节码混淆压缩工具,它可以移除掉React Native Java(和它的依赖库中)中没

有被使用到的部分,最终有效的减少APK的大小。

重要:启用Proguard之后,你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原

生库做一些额外的配置。参见app/proguard-rules.pro文件。

def enableProguardInReleaseBuilds = true

6.在/android/目录中执行gradle assembleRelease命令,打包后的文件在

android/app/build/outputs/apk目录中,例如app-release.apk。如果打包碰到问题可以先执行 gradle

clean 清理一下。

安装gradle工具(版本与android\gradle\wrapper下的一致),并配置环境变量,配置GRADLEHOME

到你的gradle根目录当中,然后把%GRADLEHOME%/bin(linux或mac的是$GRADLE_HOME/bin)加

到PATH的环境变量。

配置完成之后,运行gradle -v,检查一下是否安装无误

7.将apk发布到各大应用市场(BUILD SUCCESSFUL)

React之JSX入门的更多相关文章

  1. 转: React系统的入门系统

    评注:React系统的入门系统. 转:  http://www.infoq.com/cn/search.action?queryString=%E6%B7%B1%E5%85%A5%E6%B5%85%E ...

  2. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  3. React Native 从入门到原理一

    React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...

  4. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  5. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  6. React Native小白入门学习路径——五

    React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...

  7. React Native小白入门学习路径——二

    万万没想到,RN组仅剩的一个学长也走了,刚进实验室没几天就被告知这样的事情,一下子还真的有点接受不了,现在RN组就成了为一个没有前辈带的组了,以后学习就更得靠自己了吧.唉,看来得再努力一点了. 这一周 ...

  8. react基础&JSX基础

    一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...

  9. React.js基础入门

    本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...

随机推荐

  1. Effective Java 读书笔记之九 并发

    一.访问共享的可变数据时要同步 1.synchronized关键字既然保证访问的可见性也能保证原子性.而volatile修饰符只能保证变量的线程可见性. 2.增量操作符等不是原子性,多线程操作时可能导 ...

  2. iOS开发——UI进阶篇(十五)Quartz2D介绍

    一.Quartz2D简介 1.什么是Quartz2DQuartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作绘制图形 : 线条\三角形\矩形\圆\弧等绘制文字绘 ...

  3. 通过Unity3d创建二维码(利用zxing2.2)

    http://blog.csdn.net/liulala16/article/details/14521979 2013-11-08 14:53 1965人阅读 评论(3) 收藏 举报 首先 下载ZX ...

  4. (转)一个JavaWeb项目开发总结

    原文地址:http://www.cnblogs.com/lzb1096101803/p/4907775.html 一.学会如何读一个JavaWeb项目源代码 步骤:表结构->web.xml-&g ...

  5. Delphi 中的 procedure of object

    转载:http://www.cnblogs.com/ywangzi/archive/2012/08/28/2659811.html 总结:TMyEvent = procedure of object; ...

  6. 微博地址url(id)与mid的相互转换 Java版

    原理: 新浪微博的URL都是如:http://weibo.com/2480531040/z8ElgBLeQ这样三部分. 第一部分(绿色部分)为新浪微博的域名,第二部分(红色部分)为博主Uid,第三部分 ...

  7. POJ 2479

    ---恢复内容开始--- http://poj.org/problem?id=2479 #include <stdio.h> #include <iostream> using ...

  8. ajax 几种提交方式

    方式一: $.ajax({ type: 'POST', url: "/user/editPwd.htm", data: {"oldPassword":oldPa ...

  9. 79 两个整数集合A和B,求其交集

    [本文链接] http://www.cnblogs.com/hellogiser/p/ab-intersect.html [题目] 两个整数集合A和B,求其交集. [分析]   1. 读取整数集合A中 ...

  10. 使用eclipse开发的兼容性配置

    通常使用eclipse开发程序的时候,正常情况下放到Linux中运行一般是没有什么问题,最明显的就是编码问题,这个一般都会统一为utf-8,另外还有Windows和Linux的换行符不同的原因,还有当 ...