6、手把手教React Native实战之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现!
JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个HTML标签都转化为JavaScript代码来运行
1.环境
2.载入方式
3.标签 HTML标签 与 ReactJS创建的组件类标签(首字母一定要大写)
4.转换 解析器
`<h3>输入</h3>` 转换成:
React.createElement("h3",null,"输入") 返回一个ReactElement对象
5.执行JavaScript表达式
var msg="我是东方耀";
`<h1>{msg}</h1>`
React.createElement("h1",null,msg)
6.注释
单行://
多行:/*注释文本*/
7.属性
`var msg=<h1 width="10px">我是东方耀</h1>`
React.createElement("h1",{width:"10px"},"我是东方耀")
8.延展属性
使用ES6的语法
var props={};
props.foo="1";
props.bar="1";
`<h1 {...props} foo="2" >欢迎关注我的微信号</h1>` 转换成:
React.createElement("h1",React.__spread({},props,{foo:"2"}),"欢迎关注我的微信号")
9.自定义属性(HTML5给出了方案,凡是以data-开头的自定义属性,可渲染到页面)
10.显示HTML 显示一段HMTL字符串,而不是html节点
借助一个属性 _html
`<div>{{_html:'<h1>我是东方耀,欢迎关注我的微信号</h1>'}}</div>`
11.样式的使用
style属性 js对象 外层{}按照JSX语法 内层{}是JavaScript对象
12.事件绑定
注意:onClick 调用bind方法(设定作用域,要传递的参数)
##6、配套视频(下载地址):https://yunpan.cn/cYINUwNP6nj57 访问密码 6890
6、手把手教React Native实战之JSX入门的更多相关文章
- 2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
- 3、手把手教React Native实战之flexbox布局
flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...
- 5、手把手教React Native实战之盒子模型BoxApp
用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 
###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...
- 1、手把手教React Native实战之环境搭建
React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk 在墙的环境下,为了 ...
- 0、手把手教React Native实战之开山篇
##作者简介 东方耀 Android开发 RN技术 facebook github android ios 原生开发 react reactjs nodejs 前端 ...
- 8、手把手教React Native实战之ReactJS组件生命周期
1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...
- 7、手把手教React Native实战之ReactJS
ReactJS核心思想:组件化 维护自己的状态和UI 自动重新渲染 多个组件组成了一个ReactJS应用 React是全局对象 顶层API与组件API React.createClass创建组 ...
- RN 实战 & React Native 实战
RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...
随机推荐
- CSS优先级的详细解说
一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...
- 【leetcode】Reorder List (python)
问题的思路是这样: 循环取头部合并,事实上也能够换个角度来看,就是将后面的链表结点,一次隔空插入到第一部分的链表中. class Solution: # @param head, a ListNode ...
- STL源码剖析(仿函数/bind2nd)
仿函数(functors)其实就是重载了operator()的对象. 下面简单先看看它的一个例子: #include <iostream> using namespace std; tem ...
- Request to https://bower.herokuapp.com failed with 502
bower 版本过低,需要升级为最新bower版本, 如果升级版本后依然无法使用,更改.bowerrc配置,如下所示 { "directory": "bower_comp ...
- C#面试题汇总2
http://www.cnblogs.com/wangjisi/archive/2010/06/14/1758347.html 用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及 ...
- Mac 學習系列之Python Challenge 11-20
11.给你一个正整数列表 L, 如 L=[2,8,3,50], 输出L内全部数字的乘积末尾0的个数, 如例子L的结果为2.(提示:不要直接相乘,数字非常多,可能溢出) Answer: n_2 = 0 ...
- VirtualBox错误ID: PAEmode解决
今天在导入virtualbox的虚拟机ubuntu系统时,报错,无法打开虚拟机 报错内容如下: 错误 ID: PAEmode 严重: 致命错误 The guest is trying to switc ...
- TPM--Trusted Platform Module
trouSerS是IBM的一帮牛人搞的TSS软件栈,提供了与TPM交互的API,从而可以让我们方便地编写应用程序. 地址:https://sourceforge.net/projects/trouse ...
- IT 服务管理工具 iTop
iTop,作为全面支持ITIL流程的一款ITSM工具,具有强大的ITSM功能,开源免费.简单易用. iTop,即IT运营门户(IT Operation Portal),是一个开源web应用程序,用于I ...
- golang json数组拼接
2016年06月16日 15:38:25 阅读数:2575 标签: golangjson数组 更多 个人分类: golang func main() { a := []byte(`{"P ...