React之JSX入门
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入门的更多相关文章
- 转: React系统的入门系统
评注:React系统的入门系统. 转: http://www.infoq.com/cn/search.action?queryString=%E6%B7%B1%E5%85%A5%E6%B5%85%E ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
- React Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
- React Native基础&入门教程：初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- React Native小白入门学习路径——五
React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
- React Native小白入门学习路径——二
万万没想到,RN组仅剩的一个学长也走了,刚进实验室没几天就被告知这样的事情,一下子还真的有点接受不了,现在RN组就成了为一个没有前辈带的组了,以后学习就更得靠自己了吧.唉,看来得再努力一点了. 这一周 ...
- react基础&JSX基础
一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...
- React.js基础入门
本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...
随机推荐
- Redis学习笔记四：独立功能之发布与订阅
客户端可以通过执行 subscribe 命令订阅一个或多个频道,每当有其他客户端向被订阅的频道发送消息时,频道所有的订阅者都会收到这条消息. 客户端还可以通过执行 psubscribe 命令订阅一个或 ...
- 理解js中this的指向
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...
- iOS 不规则的ImageView
http://blog.csdn.net/kevinpake/article/details/41205715 我们在做iOS开发的时候,往往需要实现不规则形状的头像,如: 那如何去实现? 通常图片都 ...
- ios 异常捕获
@try { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate c ...
- angularjs的$http.jsonp跨域的用法
var app = angular.module("app",[]); app.run(function ($rootScope,$http) { $http.jsonp(&quo ...
- BZOJ 2685: Sgu385 highlander
Sol 期望DP. \(f[i][j][k]\) 表示已经确定了 \(i\) 个点, 最大环大小为 \(j\) ,个数为 \(k\) 的方案数. 转移非常复杂,因为细节特别多. \(f[i][j][1 ...
- Android的一种MVP模式框架
今天给大家分享的是一种将view的初始化和逻辑与activity分离的架构,采用的是mvp模式.但令人遗憾的是,这仅仅是一个新的思路,我在实际使用中发现其并不能完全将UI逻辑与activity分开,所 ...
- Linux下多网卡同网段多IP网络分流设定方法
Linux下多网卡同网段多IP网络分流设定方法 -- :: 标签:Linux下多网卡同网段多IP网络分流设定方法 当服务器需要较高的网络流量时,在其它资源不造成瓶颈的情况下无疑会用到多网卡. 第1选项 ...
- register_shutdown_function 函数详解
设定错误和异常处理三函数 register_shutdown_function(array(‘Debug’,'fatalError’)); //定义PHP程序执行完成后执行的函数 set_error_ ...
- ASP.NET MVC 如何解决“上下文的模型已在数据库创建后发生更改”问题
问题描述:支持"XXContext"(泛指之类的数据库上下文模型)上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库. 问题解决:坑爹的MVC会 ...