基本上，JSX只是为React.createElement(component, props, ...children)函数提供语法糖。JSX代码：

 Click Me

编译成：

React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')

如果没有子，您也可以使用标签的自闭形式。所以：

编译成：

React.createElement( 'div', {className: 'sidebar'}, null)

如果你想测试一些特定的JSX如何转换成JavaScript，你可以尝试在线的Babel编译器。

指定React元素类型

JSX标签的第一部分决定了React元素的类型。

大写字母表示JSX标记引用了React组件。这些标记会被编译为对指定变量的直接引用，因此如果使用JSX表达式，则Foo必须在范围内。

反应必须在范围内

由于JSX编译为调用React.createElement，React库必须始终处于JSX代码的范围内。

例如，这个代码中的两个导入都是必需的，尽管React并CustomButton没有直接引用JavaScript：

import React from 'react';import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return ;}

如果您不使用JavaScript捆绑程序并从