我正在使用 create-react-app 学习 React，并且我了解如何使用 JSX 制作组件。例如一个简单的无状态组件是这样的：
import React from 'react';
const Widget = (props) => <h1>{props.text}</h1>
export default Widget;
所以导入 ReactcreateElement()用于转换看起来像 HTML 的 JSX ( <h1>{props.text}</h1>)，但是这个函数是如何应用的呢？我并不是明确地将 React 用于任何事情。如果在构建应用程序时进行某种编译，那么为什么需要导入 React？
首先，Babel 将 JSX 编译成常规的 Javascript，然后你的 React 导入，更准确地说是React.createElement函数完成这项工作。这是您的代码的编译版本：
"use strict";
var Widget = function Widget(props) {
return React.createElement(
"h1",
null,
props.text
);
};
导入 React 不会将 JSX 转换为 HTML；巴别尔就是这样做的。Babel是一个 JavaScript 编译器。
巴别塔有效转动
// Display a "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
进入
// Display a "Like" <button>
return React.createElement(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
在 React 文档中阅读更多内容将 JSX 添加到项目。