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
最新文章
- Microsoft Web Platform Installer 5.0
- 《BI项目笔记》——微软BI项目笔记连载
- mysql set names 命令和 mysql 字符编码问题
- 【mysql】统计库、表大小
- html5常用API之Full Screen
- 关于e820cycles参数
- C#2
- node.js web开发:EXPRESS 4.x 以上使用session和cookie 的记录
- My.Ioc 代码示例——注册项的注销和更新
- 车的UML图
- rsyslog 直接读取日志,当日志截断后,不会继续发送
- java中怎么判断一个字符串中包含某个字符或字符串
- Mapreduce参数调节
- 解析PHP中常见的mongodb查询操作
- HashMap原理浅析
- WPF动态模板选择的两种实现
- python常用函数总结
- Docker安装(一)
- sort(排序) qsort(快排) bsearch(二分查找)
- 区分IE版本的js代码