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入门的更多相关文章

  1. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  2. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

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

    用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/0 ...

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

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  5. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

  6. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

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

    1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...

  8. 7、手把手教React Native实战之ReactJS

    ReactJS核心思想:组件化  维护自己的状态和UI  自动重新渲染 多个组件组成了一个ReactJS应用 React是全局对象   顶层API与组件API React.createClass创建组 ...

  9. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

随机推荐

  1. 关于bitmap recycle trying to use a recycled bitmap android.graphics.Bitmap

    在开发中,一直使用4.0以上手机作为測试机所以一直没有出现这个问题,今天换了2.3版本号的手机.出现了这个错误: trying to use a recycled bitmap android.gra ...

  2. 【Linux】Ctentos下载

    百度输入:Download Centos 在百度搜索Download Centos然后进入Centos下载官网 点击上述标记的Download Centos,则会出现如下界面,并且点击"Mo ...

  3. (转)职责链设计模式(Chain of Responsibility)

    Chain of Responsibility定义Chain of Responsibility(CoR) 是用一系列类(classes)试图处理一个请求request,这些类之间是一个松散的耦合,唯 ...

  4. Some Principles

    立刻做 1.2分钟原则 凡是2分钟内就可以完成的事,立刻去做不要犹豫.人的大脑擅长分析处理,不擅长记忆. 应用举例: a.加微信加QQ顺手添加备注名,或许下次联系已经是三个月后了. b.吃完饭立刻洗碗 ...

  5. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  6. 【转载】C#根据当前时间获取周,月,季度,年度等时间段的起止时间

    DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.DayOfWeek. ...

  7. 对oracle数字类型的研究

    Oracle的数字类型主要有number,binary_float,binary_double三类,其他的像int,number(p,s)等等大多数都是由这些引申出来的.这部分的理解主要来自oracl ...

  8. 将HG版本库推送到Git服务器

    如何将HG版本库推送到Git服务器? 目的 习惯使用HG来进行版本管理,但是GitHub代码统计比Bitbucket要丰富,所以准备主力仓库选用Bitbucket,GitHub作为备用仓库. GitH ...

  9. Atitit.ati orm的设计and架构总结 适用于java c# php版

    Atitit.ati orm的设计and架构总结 适用于java c# php版 1. Orm的目标1 1.1. 动态obj1 1.2. Hb的api(meger,save,update,del)1 ...

  10. ios的设计原则

    ios的设计原则 iOS设计的详细的主要宗旨例如以下: 1.易操作,所关心的主题清新 2.UI控件布局合理,图片质量清新 3.用户的使用习惯 4.字体的大小,主次分明 5.舒适的动画效果 在创建一个新 ...