设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3235|回复: 459

[视频教程] 6、手把手教React Native实战之JSX入门

  [复制链接]

401

主题

762

帖子

6951

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6951
发表于 2016-6-16 10:37:13 | 显示全部楼层 |阅读模式
#6、手把手教React Native实战之JSX入门

React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现!

JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个HTML标签都转化为JavaScript代码来运行


加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码


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、配套视频(下载地址)
【回复本帖才可见】
游客,如果您要查看本帖隐藏内容请回复



react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

3

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2016-6-17 16:50:37 | 显示全部楼层
onClick  调用bind方法(设定作用域,要传递的参数)
回复 支持 反对

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
203
发表于 2016-6-23 20:56:17 | 显示全部楼层
今天是郁闷的一天。。。。
回复 支持 反对

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-6-28 12:39:53 | 显示全部楼层
jsx 学习成本不是很高啊,比angular舒服
回复 支持 反对

使用道具 举报

0

主题

57

帖子

150

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
150
发表于 2016-7-1 13:36:12 | 显示全部楼层
我要学习看看看
回复 支持 反对

使用道具 举报

0

主题

57

帖子

150

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
150
发表于 2016-7-1 13:36:59 | 显示全部楼层
我要学习看看看....
回复 支持 反对

使用道具 举报

0

主题

162

帖子

400

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
400
发表于 2016-7-4 12:48:39 | 显示全部楼层
持续学习中
回复 支持 反对

使用道具 举报

0

主题

55

帖子

144

积分

注册会员

Rank: 2

积分
144
发表于 2016-7-6 10:49:50 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

73

帖子

152

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
152
发表于 2016-7-6 12:04:23 | 显示全部楼层
好好看看
回复

使用道具 举报

0

主题

75

帖子

238

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
238
发表于 2016-7-9 08:36:36 | 显示全部楼层
好好学习
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-9-23 01:40 , Processed in 0.196188 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表