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.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/0 ...
- 4、手把手教React Native实战之flexbox布局(伸缩属性)
###伸缩项目的属性 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 ...
随机推荐
- python求pi的方法
来自 #_*_ coding=utf-8 *_* ## {{{ http://code.activestate.com/recipes/578130/ (r5) def pi(places=10): ...
- MVC 强类型传值Model。和弱类型传值ViewData[""]。及用EF进行增删查改(母版页的使用)
<1> 控制器 </pre><pre name="code" class="csharp">using MvcTest.Mo ...
- 【VBA编程】11.Application对象
Application对象常用属性[ActiveCell属性]ActiveCell属性返回一个Range对象,表示当前窗口或指定窗口中的单元格.如果窗口没显示工作表,则此属性无效.[代码区域] Sub ...
- Linux LVM硬盘管理及LVM扩容【转】
原文地址:http://www.cnblogs.com/gaojun/archive/2012/08/22/2650229.html 一.LVM简介 LVM是 Logical Volume Manag ...
- jquery 实现菜单的下拉菜单
实现效果如图: 源码: 到此下载
- Fiddler-抓取安卓手机APP请求地址
第一步:下载神器Fiddler,下载链接: http://fiddler2.com/get-fiddler 下载完成之后,傻瓜式的安装一下了! 第二步:设置Fiddler打开Fiddler, ...
- Python中给文件加锁
首先要引入库import fcntl打开一个文件f = open('./test')对该文件加密:fcntl.flock(f, fcntl.LOCK_EX)这样就对文件test加锁了,如果有其他进程要 ...
- Python 使用 UTF-8 编码(转)
Python 使用 UTF-8 编码(转) 原文出处:http://blog.chenlb.com/2010/01/python-use-utf-8.html 一般我喜欢用 utf-8 编码,在 py ...
- Android 4.4KitKat Sound System
Alsa Lib: File path:external/tinyalsa Audio Hal Library: Core File path:hardware/libhardware_legacy/ ...
- Mongodb - TTL(time to live)特性
TTL集合支持mongodb对存储的数据进行失效时间设置,经过指定的时间段后.或在指定的时间点过期,集合自动被mongod清除.这一特性有利于对一些只需要保存一定时间的数据信息进行存储,比如机器产生的 ...