Differences in JSX Transformation Before and After React 17 and Related Configurations

Before React 17, each React component needed to declare import React from'react'; because the JSX syntax would be transformed into React.createElement calls during compilation. Without importing React, the compiler would report an error because React.createElement was undefined.

The Relationship between JSX and React.createElement

JSX is a syntactic sugar provided by React that allows us to write components in a way similar to HTML. For example:

function MyComponent() {
  return <div>Hello, World!</div>;
}

During compilation, Babel will transform the JSX into React.createElement calls:

function MyComponent() {
  return React.createElement('div', null, 'Hello, World!');
}

Without importing React, React.createElement would be undefined, resulting in a runtime error.

React 17 Introduced a New JSX Transformation

Starting from React 17, React collaborated with Babel to introduce a new JSX transformation method called "Automatic Runtime". In this way, it is no longer necessary to explicitly import React because Babel will automatically import the necessary functions from react/jsx-runtime.

Using the New JSX Transformation In React 17 and above, you can omit import React from'react';, and the code will become like this:

function MyComponent() {
  return <div>Hello, World!</div>;
}

Babel will automatically transform it into:

import { jsx as _jsx } from'react/jsx-runtime';
function MyComponent() {
  return _jsx('div', { children: 'Hello, World!' });
}

How to Enable the New JSX Transformation

If you are using React 17 or higher, you can enable the new JSX transformation in the following ways:

  • Babel Configuration In the Babel configuration file (such as .babelrc or babel.config.js), set runtime: 'automatic':
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

  • Create React App If you are using Create React App 4.0 or higher, the new JSX transformation is enabled by default, and no additional configuration is required.

  • Manual Configuration If you configure Babel manually, make sure to install @babel/plugin-transform-react-jsx and enable runtime: 'automatic':

npm install @babel/plugin-transform-react-jsx

Then add it to the Babel configuration:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

Why Was It Necessary to Manually Import React Before React 17?

Before React 17, Babel's JSX transformation logic was hardcoded to React.createElement. Therefore, it was necessary to explicitly import React, otherwise the compiler could not find React.createElement.

Summary

  • Before React 17: It was necessary to manually import React because JSX was transformed into React.createElement.
  • After React 17: You can use the new JSX transformation (Automatic Runtime) without manually importing React.
  • How to enable: By configuring Babel with runtime: 'automatic' or using Create React App 4.0 and above.

If you are using React 17 or higher and the configuration is correct, you can safely omit import React from'react';!