JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。React主要使用JSX来描述用户界面，但React并不强制要求使用JSX，而JSX也在React之外的框架得到了广泛的支持，包括Vue.js，Solid等。

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如，在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。

JSX可以使用引号来定义以字符串为值的属性：

也可以使用大括号来定义以JavaScript表达式为值的属性：

const element = ;

因为JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小驼峰）命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tableindex则对应着tableIndex。

JSX标签是闭合式的，像XML/HTML一样在结尾处用表示：

const element = ;

JSX标签同样可以相互嵌套：

在JSX中可任意使用JavaScript表达式，但要包含在大括号里，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的。

书写JSX的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时在JSX代码的外面扩上一个小括号，这样可以防止分号自动插入的bug。

JSX本身其实也是一种表达式

在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：

在JSX中嵌入用户输入是安全的：

React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（跨站脚本攻击）。

Babel转译器会把JSX转换成一个名为的方法调用。

下面两种代码的作用是完全相同的：

这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

这样的对象被称为“React 元素”。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。