6手把手教React Native实战之JSX入门

Posted 东方耀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

7手把手教React Native实战之ReactJS

8手把手教React Native实战之ReactJS组件生命周期

5手把手教React Native实战之盒子模型BoxApp

4手把手教React Native实战之flexbox布局(伸缩属性)

学习React Native必看的几个开源项目