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 ...
随机推荐
- 数据库表syscolumns 各个字段含义 select * from syscolumns where name='textA'
每个数据库创建后都会有一些系统表用来存储该数据库的一些基本信息 每个表和视图中的每列在表中占一行,存储过程中的每个参数在表中也占一行.该表位于每个数据库中. 列名 数据类型 描述 name sysna ...
- 自制MVC框架的插件与拦截器基础
上篇谈到我自己写的MVC框架,接下来讲讲插件及拦截器! 在处理一些通用的逻辑最好把它封装一个插件或者拦截器,以便日后可以直接拿过来直接使用.在我的框架中可以通过继承以下抽象类来实现插件或者拦截器. 1 ...
- FreeMarker静态化文件解决SEO推广问题
1.问题背景 SEO一直是站点对外推广的一个重要手段,如何可以让搜索引擎高速搜索到站点对于增强站点的浏量,提升站点对外形象有着重要意义.那么如何可以对SEO进行优化呢?一个很经常使用的手段就是在网页的 ...
- windows和linux中换行符的转换
数据开发平台使用上传脚本报错:保存失败,文件编码格式不正确,请修改文件换行符为Unix终束符! 修改方式:DOS系统下,使用文本编译器另存为,然后选择换行符为unix终束符. 解释: windows ...
- django源码分析---- Model类型&Field类型
djiango在数据库这方式自己实现了orm(object relationship mapping 对象关系模型映射).这个主要是用到python 元类这一 项python中的高级技术来实现的. c ...
- Real-Time SQL Monitoring using DBMS_SQLTUNE
Real-Time SQL Monitoring reports are available from three locations: Enterprise Manager - Click the ...
- php用explode,可以提供多个字符作为分割符来进行分割数组吗?
explode — 使用一个字符串分割另一个字符串, 它的函数原型如下: array explode ( string $delimiter , string $string [, int $limi ...
- qt中执行 sql文件的方法
由于qt中没有原生的执行sql文件的方法.因此我们需要根据sql文件中的流的特点,将其分解成一个个语句单独执行. 1.首先通过Qfile读取sql文件 2.将sql文件中的内容通过“:”进行拆解 3. ...
- js----Open()函数
JS中open()函数介绍 window=object.open([URL ][, name ][, features ][, replace]]]]) URL:新窗口的URL地址 name:新窗口的 ...
- 初探csrf学习笔记
以下是学习了对CSRF的理解,大家切勿作为标准,如有出错请告之! 严禁转载.不想拿自己刚学到的知识去[误人子弟]之所以写出来是让自己巩固和增加理解,他日对此文有不当之处自会修改. [00x1]csrf ...