Introducing the New JSX Rework – React Weblog

Though React 17 doesn’t include new options, it would present help for a brand new model of the JSX remodel. On this submit, we are going to describe what it’s and the way to strive it.

What’s a JSX Rework?

Browsers don’t perceive JSX out of the field, so most React customers depend on a compiler like Babel or TypeScript to remodel JSX code into common JavaScript. Many preconfigured toolkits like Create React App or Subsequent.js additionally embody a JSX remodel below the hood.

Along with the React 17 launch, we’ve wished to make a number of enhancements to the JSX remodel, however we didn’t need to break current setups. That is why we labored with Babel to provide a brand new, rewritten model of the JSX remodel for individuals who wish to improve.

Upgrading to the brand new remodel is totally non-obligatory, however it has a number of advantages:

• With the brand new remodel, you possibly can use JSX with out importing React.
• Relying in your setup, its compiled output might barely enhance the bundle dimension.
• It’ll allow future enhancements that cut back the variety of ideas you might want to be taught React.

This improve won’t change the JSX syntax and isn’t required. The outdated JSX remodel will maintain working as standard, and there are not any plans to take away the help for it.

React 17 RC already contains help for the brand new remodel, so go give it a strive! To make it simpler to undertake, we’ve additionally backported its help to React 16.14.0, React 15.7.0, and React 0.14.10. You will discover the improve directions for various instruments beneath.

Now let’s take a better take a look at the variations between the outdated and the brand new remodel.

What’s Totally different within the New Rework?

If you use JSX, the compiler transforms it into React perform calls that the browser can perceive. The outdated JSX remodel turned JSX into React.createElement(...) calls.

For instance, let’s say your supply code seems like this:

import React from 'react';

perform App() {
  return <h1>Hey World</h1>;
}

Below the hood, the outdated JSX remodel turns it into common JavaScript:

import React from 'react';

perform App() {
  return React.createElement('h1', null, 'Hey world');
}

Word

Your supply code doesn’t want to vary in any method. We’re describing how the JSX remodel turns your JSX supply code into the JavaScript code a browser can perceive.

Nonetheless, this isn’t good:

To resolve these points, React 17 introduces two new entry factors to the React bundle which are meant to solely be utilized by compilers like Babel and TypeScript. As a substitute of reworking JSX to React.createElement, the brand new JSX remodel routinely imports particular capabilities from these new entry factors within the React bundle and calls them.

Let’s say that your supply code seems like this:

perform App() {
  return <h1>Hey World</h1>;
}

That is what the brand new JSX remodel compiles it to:

import {jsx as _jsx} from 'react/jsx-runtime';

perform App() {
  return _jsx('h1', { kids: 'Hey world' });
}

Word how our authentic code didn’t have to import React to make use of JSX anymore! (However we might nonetheless have to import React so as to use Hooks or different exports that React gives.)

This variation is totally appropriate with the entire current JSX code, so that you gained’t have to vary your parts. In case you’re curious, you possibly can take a look at the technical RFC for extra particulars about how the brand new remodel works.

Word

The capabilities inside react/jsx-runtime and react/jsx-dev-runtime should solely be utilized by the compiler remodel. If you might want to manually create parts in your code, it is best to maintain utilizing React.createElement. It’ll proceed to work and isn’t going away.

How you can Improve to the New JSX Rework

In case you aren’t able to improve to the brand new JSX remodel or if you’re utilizing JSX for one more library, don’t fear. The outdated remodel won’t be eliminated and can proceed to be supported.

If you wish to improve, you will want two issues:

• A model of React that helps the brand new remodel (React 17 RC and better helps it, however we’ve additionally launched React 16.14.0, React 15.7.0, and React 0.14.10 for people who find themselves nonetheless on the older main variations).
• A appropriate compiler (see directions for various instruments beneath).

For the reason that new JSX remodel doesn’t require React to be in scope, we’ve additionally ready an automatic script that can take away the pointless imports out of your codebase.

Create React App

Create React App 4.0.0+ makes use of the brand new remodel for appropriate React variations.

Subsequent.js

Subsequent.js v9.5.3+ makes use of the brand new remodel for appropriate React variations.

Gatsby

Gatsby v2.24.5+ makes use of the brand new remodel for appropriate React variations.

Word

In case you get this Gatsby error after upgrading to React 17 RC, run npm replace to repair it.

Guide Babel Setup

Assist for the brand new JSX remodel is offered in Babel v7.9.0 and above.

First, you’ll have to replace to the newest Babel and plugin remodel.

If you’re utilizing @babel/plugin-transform-react-jsx:

npm replace @babel/core @babel/plugin-transform-react-jsx

yarn improve @babel/core @babel/plugin-transform-react-jsx

If you’re utilizing @babel/preset-react:

npm replace @babel/core @babel/preset-react

yarn improve @babel/core @babel/preset-react

Presently, the outdated remodel {"runtime": "traditional"} is the default possibility. To allow the brand new remodel, you possibly can move {"runtime": "automated"} as an choice to @babel/plugin-transform-react-jsx or @babel/preset-react:

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

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

Ranging from Babel 8, "automated" would be the default runtime for each plugins. For extra info, take a look at the Babel documentation for @babel/plugin-transform-react-jsx and @babel/preset-react.

Word

In case you use JSX with a library aside from React, you need to use the importSource possibility to import from that library as an alternative — so long as it gives the mandatory entry factors. Alternatively, you possibly can maintain utilizing the traditional remodel which is able to proceed to be supported.

In case you’re a library creator and you might be implementing the /jsx-runtime entry level to your library, take into account that there’s a case wherein even the brand new remodel has to fall again to createElement for backwards compatibility. In that case, it would auto-import createElement immediately from the root entry level specified by importSource.

ESLint

If you’re utilizing eslint-plugin-react, the react/jsx-uses-react and react/react-in-jsx-scope guidelines are not needed and might be turned off or eliminated.

{
  
  "guidelines": {
    
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

TypeScript

TypeScript helps the brand new JSX remodel in v4.1 and up.

Move

Move helps the brand new JSX remodel in v0.126.0 and up, by including react.runtime=automated to your Move configuration choices.

Eradicating Unused React Imports

As a result of the brand new JSX remodel will routinely import the mandatory react/jsx-runtime capabilities, React will not have to be in scope whenever you use JSX. This would possibly result in unused React imports in your code. It doesn’t damage to maintain them, however in the event you’d wish to take away them, we suggest working a “codemod” script to take away them routinely:

cd your_project
npx react-codemod update-react-imports

Word

In case you’re getting errors when working the codemod, strive specifying a distinct JavaScript dialect when npx react-codemod update-react-imports asks you to decide on one. Specifically, at this second the “JavaScript with Move” setting helps newer syntax than the “JavaScript” setting even in the event you don’t use Move. File a difficulty in the event you run into issues.

Remember the fact that the codemod output won’t at all times match your challenge’s coding model, so that you would possibly need to run Prettier after the codemod finishes for constant formatting.

Operating this codemod will:

• Take away all unused React imports because of upgrading to the brand new JSX remodel.
• Change all default React imports (i.e. import React from "react") to destructured named imports (ex. import { useState } from "react") which is the popular model going into the long run. This codemod won’t have an effect on the present namespace imports (i.e. import * as React from "react") which can also be a sound model. The default imports will maintain working in React 17, however in the long run we encourage shifting away from them.

For instance,

import React from 'react';

perform App() {
  return <h1>Hey World</h1>;
}

will probably be changed with

perform App() {
  return <h1>Hey World</h1>;
}

In case you use another import from React — for instance, a Hook — then the codemod will convert it to a named import.

For instance,

import React from 'react';

perform App() {
  const [text, setText] = React.useState('Hey World');
  return <h1>{textual content}</h1>;
}

will probably be changed with

import { useState } from 'react';

perform App() {
  const [text, setText] = useState('Hey World');
  return <h1>{textual content}</h1>;
}

Along with cleansing up unused imports, this can even assist you put together for a future main model of React (not React 17) which is able to help ES Modules and never have a default export.

Thanks

We’d wish to thank Babel, TypeScript, Create React App, Subsequent.js, Gatsby, ESLint, and Move maintainers for his or her assist implementing and integrating the brand new JSX remodel. We additionally need to thank the React group for his or her suggestions and dialogue on the associated technical RFC.