导入 React 是如何让 JSX 作为 JS 处理的？

Question

I'm learning React with create-react-app and I understand how to make components with JSX. For example a simple stateless component is something like:

import React from 'react';

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

export default Widget;

So importing React uses createElement() for the conversion of the HTML-looking JSX ( <h1>{props.text}</h1> ), but how is that function applied? It's not like I am explicitly using React for anything. If there is some kind of compiling go on as the app is built, then why does React need to be imported?

Answer 1

First, Babel compiles JSX into regular Javascript, then your React import, more accurately React.createElement function does the job. Here is the compiled version of your code:

"use strict";

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

Answer 2

Importing React doesn't convert JSX into HTML; Babel does that. Babel is a JavaScript compiler.

Babel effectively turns

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

into

// Display a "Like" <button>
return React.createElement(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Read more in the React docs Add JSX to a Project .