JSX,即javscript XML,是js内定义的一套XML语法。目前是使用babel作为JSX的编译器。这也是在前几期中载入babel的原因。

Facebook引入JSX是为了解决前端代码工程复杂、维护困难等问题。JSX为我们提供了一种虚拟DOM的实现方式。 通过使用类XML语法的JSX,定义虚拟的DOM,以减少真实DOM的操作,从而提高运行效率。由于JSX的使用,在React项目中创建Components变得相当简单,用户可以将程序逻辑(programming logic)和标记语言(markup)混合在一起使用,促进代码的可读性、可预测性,有效的提高代码的维护效率。

接下来我们讲讲JSX的基本语法:

1. JSX基本定义

const element = <h1>Hello World!</h1>;
ReactDom.render(
element,
document.getElementById('root');
)

从上述代码,我们可以理解JSX的XML语法相当于是一个js的表达式,它可以直接给变量赋值。(其实不是这样,真正的理解【看这里】)

2. JSX内定义表达式

function formatName(user) {
return user.firstName + ' ' + user.lastName;
} const user = {
firstName: 'Harper',
lastName: 'Perez'
}; const element = (
<h1>
Hello, {formatName(user)}!
</h1>
); ReactDOM.render(
element,
document.getElementById('root')
);

在JSX的内部,我们可以执行方法(function),可以输入对象。可以直接输出字符串变量等.这里的{}类似于php中<?php ?> 的语法。

3. JSX内定义属性(Attribute)

const element = <div class="div-test"></div>
const element = <div className="div-test"></div>

JSX的属性定义遵循CamelCase原则。如果定义的是html标签默认的属性,则可以使用html的规则。上面这例子中,两行代码都是用来定义class的属性。

// 这两行的代码效果相同
const element = <div tabIndex="0"></div>;
const element = <div tabindex="0"></div>;

这则例子,定义一个名为tabindex的属性名字,在JSX中遵循使用camelCase格式。当然如果不使用也可以,React依旧可以执行。

const element = <a href={person.link}> </a>

同样的,在属性中也可以添加变量表达式,用{}来执行。

4. JSX内嵌子标签

const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);

在这种情况下,必须使用()来表示。同时JSX中,只能有一个根节点。不能两个节点并列存在,如下:

const element = (
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
);

这种情况,React是无法编译成功。

5.总结

  1. JSX是一个js内的XML语法,将程序逻辑和标记语言在同一个文件中显示。用利于代码开发和维护
  2. JSX中,我们引入了虚拟DOM的概念【看这里】
  3. JSX的基本语法相当灵活,可以表达式内嵌、定义属性等

五分钟学习React(四):什么是JSX的更多相关文章

  1. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  2. 五分钟学习React(一): 什么是React

    在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...

  3. 五分钟学习React(六):元素(Element)和组件(Component)

    俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...

  4. 五分钟学习React(五):React两种构建应用方式选择

    经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...

  5. 五分钟学习React(二):我的第一个Hello World

    我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...

  6. 正式学习React(四) 前序篇

    预热 redux 函数内部包含了大量柯里化函数以及代码组合思想 柯里化函数(curry) 通俗的来讲,可以用一句话概括柯里化函数:返回函数的函数 // example const funcA = (a ...

  7. 五分钟学习Java8的流编程

    1.概述 Java8中在Collection中增加了一个stream()方法,该方法返回一个Stream类型.我们就是用该Stream来进行流编程的: 流与集合不同,流是只有在按需计算的,而集合是已经 ...

  8. 十分钟学习 react配套的类型检测库——prop-types的运用

    js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...

  9. 正式学习React(四) ----Redux源码分析

    今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...

随机推荐

  1. SpringBoot Test集成测试

    1.pom,文件添加相关依赖 如何测试SpringBoot的请求?使用spring-boot-starter-test这个包即可完成测试,SpringBoot项目为什么需要测试本章不作过多说明,重点放 ...

  2. 每周.NET前沿技术文章摘要(2017-06-21)

    汇总国外.NET社区相关文章,覆盖.NET ,ASP.NET等内容: .NET .NET Core Magic: Develop on one OS, run on another 链接:https: ...

  3. c#中treeview的使用方法(转 )

    本文主要介绍treeView控件中,添加,修改.删除节点的操作, 首先当窗体加载的时候,我们添加上图中所示的节点. 当点击“Delete the Selected”按钮时,被选中的节点将被删除. 当点 ...

  4. Android Weekly Notes Issue #288

    Android Weekly Issue #288 December 17th, 2017 Android Weekly Issue #288 本期内容主要包括介绍Kotlin DSL使用kotlin ...

  5. Kotlin——最详细的数据类、密封类详解

    在前面几个章节章节中,详细的讲解了Koltin中的接口类(Interface).枚举类(Enmu),还不甚了解的可以查看我的上一篇文章Kotlin--接口类.枚举类详解.当然,在Koltin中,除了接 ...

  6. sed使用范例

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/32 记录下sed编译器的常见使用方法. sed编辑器基于输入到命 ...

  7. js获取图片的EXIF,解决图片旋转问题

    相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...

  8. 尝试在条件“$(_DeviceSdkVersion) >= 21”中对计算结果为“”而不是数字的“$(_DeviceSdkVersion)

    晚上搞xamarin ,运行xamarin项目好好的,不知道怎么回事,一次运行xamarin android项目的时候,部署失败,以前也是遇到这样的错误. 尝试在条件"$(_DeviceSd ...

  9. 自己动手写把”锁”之---JMM和volatile

    一.JAVA内存模型 关于Java内存模型的文章,网上真的数不胜数.在这里我就不打算说的很详细.很严谨了.只力求大家能更好的理解和运用,为后边的技术点做铺垫.   内存模型并不是Java独有的概念,而 ...

  10. 学习Object.assign()

    Object.assign()用于将所有可枚举的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...source); var obj = { ...