导入React如何允许将JSX作为JS处理？

Question

我正在使用create-react-app学习React，并且了解如何使用JSX制作组件。例如，一个简单的无状态组件就是这样的：

import React from 'react';

const Widget = (props) => <h1>{props.text}</h1>

export default Widget;

因此，导入React使用createElement()来转换HTML样式的JSX（<h1>{props.text}</h1>），但是该函数如何应用？好像我没有明确地将React用于任何事情。如果在构建应用程序时进行某种编译，那么为什么需要导入React？

Answer 1

首先，Babel将JSX编译为常规Javascript，然后更准确地使用React.createElement函数来实现React导入。这是代码的编译版本：

"use strict";

var Widget = function Widget(props) {
  return React.createElement(
    "h1",
    null,
    props.text
  );
};

Answer 2

导入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文档Add JSX to a Project中了解更多信息。