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值,渲染并返回一个虚拟DOMconsole.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教程从入门到精通包教包会-ReactJS
最新完整react教程从入门到精通包教包会 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客 ...
- React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例 目的 巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
- React VR 快速入门完全教程
React VR 快速入门 什么是React React是一个开放源代码的JavaScript库,为HTML呈现的数据提供了视图渲染.React视图通常使用指定的像HTML标签一样的组件来进行UI渲染 ...
- React Native小白入门学习路径——五
React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
- [react] 在JSX中如何写注释?
[react] 在JSX中如何写注释? {/* A JSX comment */} 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起 ...
- React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
- react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
- react中jsx行内样式(style)的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释 运行效果: i ...
最新文章
- 计算机编程书籍-Python硬件开发树莓派从入门到实践无人驾驶 AndroidTV 自动循迹
- 后端返回html标签到前端,后端返回的HTML代码字符串怎么能自动渲染到前端页面...
- jboss eap_带有自定义模块的JBoss EAP上的骆驼
- 深度学习-Tensorflow1.x之Softmax函数代码实现对比在Tensorflow1.x与 Numpy
- java实现二叉查找树_二叉查找树BST----java实现(示例代码)
- 如何阻止事件冒泡和默认事件
- c语言程序调试方法有哪些,c语言程序的调试方法有哪些
- TiDB源码学习笔记:启动TiDB
- pythonrestapicctv_Python Web服务(15) 持续更新
- 特斯拉中国裁员约10%,撕下了外企新能源的遮羞布!
- php mysql 白屏_PHP出现空白页面与无法载入mysql
- 特殊的搜狗拼音输入法
- 小猿日记(8) - 接口优化从13秒到3秒,我做了什么
- 球差电镜测试常见的问题及解答(一)
- 腾讯云高防服务器 腾讯云BGP高防IP是如何防DDos和cc攻击的?
- 孙正义:不出50年,人类驾驶汽车会消失
- java中类变量局部量_java入门---变量类型类变量局部变量实例变量静态变量
- fft2 二维快速傅里叶变换(Matlab)
- c语言米粒数实验报告,数字图像处理实验报告米粒
- 入门PHP教程:PHP根据身份证号码,获取性别、获取生日、计算年龄等多个信息