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）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/493990.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

英特尔人工智能副总裁：AI不是一种技能，而是一种对于工作的描述

英特尔人工智能副总裁：AI不是一种技能，而是一种对于工作的描述

来源&#xff1a;网络大数据人工智能领域的迅速发展&#xff0c;相关人才不能满足需求已经成为业界共识。有报道称&#xff0c;因为人工智能工程师庞大的缺口&#xff0c;一些公司为了获得人才不得不支付数百万美元的薪水。如何满足对人工智能工程师不断增长的招聘和培训的需求…
阅读更多...
html 中表格长度固定

html 中表格长度固定

2010-02-03 14:25 1070人阅读 评论(0) 收藏 举报htmlclassxhtml产品bordertable<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns"http://www.w3.org/1999/xht…
阅读更多...
React Native实例

React Native实例

本文主要包括以下内容 View组件的实例 Text组件实例 Navigator组件实例 TextInput组件实例 View组件的实例 效果如下 代码如下 /*** Sample React Native App* https://github.com/facebook/react-native* flow*/import React, { Component } from react; import {AppRe…
阅读更多...
谷歌的硬件梦：Pixel手机、ChromeOS平板和Home音箱

谷歌的硬件梦：Pixel手机、ChromeOS平板和Home音箱

来源&#xff1a; 网易智能&#xff08;北京时间10月9日23点&#xff09;&#xff0c;谷歌在纽约如期举行了主题为“谷歌制造”&#xff08;Made By Google&#xff09;的硬件发布会&#xff0c;推出了Pixel手机、平板 笔记本&#xff0c;以及音箱等一系列新品硬件。一个月以来…
阅读更多...
浅用block 转

浅用block 转

block是一门有用的大后期学问。现在我只是列出一点基本用法。 1.快速枚举&#xff08;Enumeration&#xff09; 通常是和NSArray, NSDictionary, NSSet, NSIndexSet放在一起用。 当和以上这两种东西放在一起用时&#xff0c;通常block有两种用处。&#xff08;代码为实例操作&a…
阅读更多...
数据结构之图的实现

数据结构之图的实现

本文主要包括以下内容 邻接矩阵实现无向图 邻接表实现无向图 邻接矩阵实现有向图邻接表实现有向图 图的理论基础&#xff0c;请参考&#xff1a;图的理论基础 - 如果天空不死 - 博客园 邻接矩阵实现无向图 MatrixUDG是邻接矩阵对应的结构体。 mVexs用于保存顶点&#xf…
阅读更多...
“万维网之父”发文阐述其下一个网络时代：将数据与应用分离，互联网去中心化正在路上...

“万维网之父”发文阐述其下一个网络时代：将数据与应用分离，互联网去中心化正在路上...

来源&#xff1a;Deep Tech深科技关注“万维网之父”Tim Berners-Lee 动态的人&#xff0c;一定知道这位业内大神正在投身于下一代互联网的建设——一个去中心化的互联网。他正在领导其 MIT 团队搭建一个名为“ Solid ”&#xff08;Social Linked Data 社交关联数据&#xff0…
阅读更多...
设置easyui input默认值

设置easyui input默认值

/*设置input 焦点*/ $(function () {//集体调用 $(".formTextBoxes input").each(function () {$(this).setDefauleValue();});//单个调用 $(".textkey").setDefauleValue(); })//设置input,textarea默认值 .之前写法$.fn.seDefauleValue function(){ $.f…
阅读更多...
React Native官方DEMO

React Native官方DEMO

官方给我们提供了UIExplorer项目&#xff0c;这里边包含React Native的基本所有组件的使用介绍和方法。 运行官方DEMO步骤如下 安装react native环境 React Native项目源码下载下载安装cygwin软件 下载安装NDK然后安装以及配置 添加Node依赖模块:该命令行需要切到react-nati…
阅读更多...
牛津教授揭秘AI革命及其前沿进展

牛津教授揭秘AI革命及其前沿进展

来源&#xff1a;专知导读&#xff1a;2018年9月9日-14日&#xff0c;DeepMind主办的Deep Learning Indaba 2018大会在南非斯泰伦博斯举行。会上&#xff0c;牛津大学教授Nando de Freitas和其他15位专家做了《深度学习&#xff1a;AI革命及其前沿进展》的报告。报告导读&#…
阅读更多...
【will】JS去字符串首尾空格

【will】JS去字符串首尾空格

当IE不支持Jquery的Trim()方法时&#xff0c; 就需要JS的方法&#xff1a; function mytrim(str){return str.replace(/^\s|\s$/g,"");}转载于:https://www.cnblogs.com/EMTeam/p/3181471.html
阅读更多...
数据结构之DFS与BFS实现

数据结构之DFS与BFS实现

本文主要包括以下内容 邻接矩阵实现无向图的BFS与DFS 邻接表实现无向图的BFS与DFS 理论介绍 深度优先搜索介绍 图的深度优先搜索(Depth First Search)&#xff0c;和树的先序遍历比较类似。 它的思想&#xff1a;假设初始状态是图中所有顶点均未被访问&#xff0c;则从某…
阅读更多...
一图分析华为最新AI生态与未来趋势

一图分析华为最新AI生态与未来趋势

华为全联接大会2018年10月10日在上海召开&#xff0c;作为面向ICT产业的年度大会&#xff0c;华为公布了重要AI战略&#xff0c;将华为AI发展战略概括为以下五大方向&#xff1a;强力投资基础研究、打造全栈解决方案、投资开放生态和人才培养、解决方案增强以及内部效率提升。华…
阅读更多...
SQL SERVER 与ACCESS、EXCEL的数据导入导出转换

SQL SERVER 与ACCESS、EXCEL的数据导入导出转换

* 说明&#xff1a;复制表(只复制结构,源表名&#xff1a;a 新表名&#xff1a;b) select * into b from a where 1<>1* 说明&#xff1a;拷贝表(拷贝数据,源表名&#xff1a;a 目标表名&#xff1a;b) insert into b(a, b, c) select d,e,f from b;* 说明&am…
阅读更多...
数据结构之Dijkstra算法

数据结构之Dijkstra算法

基本思想 通过Dijkstra计算图G中的最短路径时&#xff0c;需要指定起点s(即从顶点s开始计算)。 此外&#xff0c;引进两个集合S和U。S的作用是记录已求出最短路径的顶点(以及相应的最短路径长度)&#xff0c;而U则是记录还未求出最短路径的顶点(以及该顶点到起点s的距离)。 …
阅读更多...
在读博士的第八年，她破解了量子计算领域最基本的问题之一

在读博士的第八年，她破解了量子计算领域最基本的问题之一

来源&#xff1a;原理Urmila Mahadev&#xff08;厄米拉马哈德夫&#xff09;花了八年时间在研究生院解决了量子计算领域最基本的问题之一&#xff1a;怎么知道量子计算机是否做了量子计算呢&#xff1f;2017年春天&#xff0c;Urmila Mahadev发现自己处于大多数研究生都会认为…
阅读更多...
页面加载完时再动态添加脚步

页面加载完时再动态添加脚步

//页面加载时不存在&#xff0c;加载完时再添加 function loadScript(url) {//外部文件var script document.createElement("script");script.type "text/javascript";script.src url;document.body.appendChild(script); }function loadScriptString(c…
阅读更多...
React Native实例之房产搜索APP

React Native实例之房产搜索APP

React Native 开发越来越火了&#xff0c;web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学习的过程&#xff0c;发现了一个房产搜索APP的实例&#xff0c;但只有ios版本&#xff0c; 本文…
阅读更多...
“间谍芯片”疑云：谁在撒谎？警示何在？

“间谍芯片”疑云：谁在撒谎？警示何在？

芯片级安全没有终点来演&#xff1a;科学网摘要&#xff1a;10月5日起&#xff0c;一则“苹果、亚马逊被卷入&#xff0c;中国黑客利用微芯片入侵美国”的消息不胫而走&#xff0c;消息所波及的中美科技企业的股价应声下跌。10月5日起&#xff0c;一则“苹果、亚马逊被卷入&…
阅读更多...
Extjs4前端开发代码规范参考

Extjs4前端开发代码规范参考

准则&#xff1a; 一致性&#xff0c; 隔离与统一管理&#xff0c; 螺旋式重构改进&#xff0c; 消除重复&#xff0c; 借鉴现有方案 1. 保证系统实现的一致性&#xff0c;寻求一致性方案&#xff0c; 相同或相似功能尽量用统一模式处理&#xff1b; 2. 尽可能使用隔离技…
阅读更多...
最新文章

Copyright @ 2022~2023