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. CodeForces 615B Longtail Hedgehog

    题目: http://codeforces.com/problemset/problem/615/B 题意:题目描述很复杂,但实际上很简单.大意就是连续的几个点组成尾巴,要求尾巴的长度乘以尾巴终点的分 ...

  2. gcc 和g++区别

    gcc和g++都是GNU的一个编译器;这两者的区别:1.从源文件上看,对于文件后缀(扩展名)为.c的test.c文件,gcc会把它看成是C程序,而g++则会把它看成是C++程序;而对于文件后缀(扩展名 ...

  3. DP~数塔(hrbustoj1004)

    aaarticlea/bmp;base64,iVBORw0KGgoAAAANSUhEUgAAAtQAAAPgCAYAAAASsev/AAAgAElEQVR4nOzdf4w0x33n9/4rQP4L8s

  4. 写给喜欢用Block的朋友(ios Block)

    作者:fengsh998原文地址:http://blog.csdn.net/fengsh998/article/details/38090205转载请注明出处如果觉得文章对你有所帮助,请通过留言或关注 ...

  5. jquery的change():下拉框值改变时触发

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  6. 这些情况下onReume不应该是你的选择

    面试Android程序员的时候问过以下几个基本问题,得到的回答经常不尽人意: 1, Activity A跳转到Activity B,Activity B完成后,Activity A要刷新一下自己的数据 ...

  7. Servlet的使用方法详细说明

    Servlet的生命周期方法: init() destroy() doGet(HttpServletRequest request,HttpServletResponse response) 客户端请 ...

  8. BOM基础部分

    打开.关闭窗口 •open –蓝色理想运行代码功能 •close –关闭时提示问题   常用属性 •window.navigator.userAgent •window.location   窗口尺寸 ...

  9. 获取shell脚本自身所在目录的Shell脚本分享

    前几天写的七牛的参赛demo,用bash写了一个便捷安装的脚本,涉及到了路径相关的判断,从stackoverflow,加上自己的实践整理一下. 简单版 下面是一个最简单的实现,可以解决大多数问题,缺陷 ...

  10. 【GoLang】golang垃圾回收 & 性能调优

    golang垃圾回收 & 性能调优 参考资料: 如何监控 golang 程序的垃圾回收_Go语言_第七城市 golang的垃圾回收(GC)机制 - 两只羊的博客 - 博客频道 - CSDN.N ...