Recently, Team React working alongside with Babel has come up with a new feature in the latest React release 17 offering a new JSX in-built transform.
JSX is the Syntax Extension of JavaScript. It looks like HTML but, in fact, is an extension to JavaScript. It is an inline markup language to create React elements and used to describe what UI should look like.
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
In this blog, we’ll be discussing the benefits of new JSX transform and how to use it. Let’s get going-
As browsers don’t support JSX, it comes down to the compilers like Babel or TypeScript to transform JSX into regular JavaScript which is understood by browsers. However, this need will be overcome by the introduction of new transform which will automatically compile the JSX source code without having to rely upon the typical compilers.
The main benefits of the new JSX transform are:
Now let’s see how the new transform differs from the older one -
If you recall using JSX, you would know that we need a compiler (like Babel or TypeScript) to run the JSX code in the browser. These compilers transform this JSX into React.createElement calls.
Let’s suppose your code looks like this -
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
The compilers convert it into regular JavaScript, such as:
import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}
Your source code is not exactly changing in any way, only it’s been converted in the form that the browser can understand.
However, there are certain limitations of this approach, e.g.-
However, the new transform solves these issues by introducing two new entry points to use React that can directly be used by the compiler without having to transform the JSX code to React.createElement. Though it’s not a big deal to insert import React from ‘react’ command every time at the top of the JSX files, it is a huge cause of irritation for experts.
But, no more! The new JSX transform in React 17 imports the special functions from these entry points automatically and calls them.
Let’s take an example of the source code -
function App() {
return <h1>Hello World</h1>;
}
The new compiled code will look like this -
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
So, you see? You no longer need to import React. But mind it, you might still need to import React in case you are going to use Hooks or other exports.
If you don’t want to upgrade your existing JSX transform, that’s fine, you’ll not face any trouble using the old transform. But if you do wish to switch to the new JSX transform, here are the prerequisites you will need -
In order to leverage the new transform, you need to make some changes in the tools you’re using, such as -
If you’re using Babel setup, upgrade it to v7.9.0 or above. If you’re using @babel/plugin-transform-react-jsx, update it as -
npm update @babel/core @babel/plugin-transform-react-jsx
or
yarn upgrade @babel/core @babel/plugin-transform-react-jsx
If you’re using @babel/preset-react, update it as –
npm update @babel/core @babel/preset-react
or
yarn upgrade @babel/core @babel/preset-react
Now, update the babel configuration as given under -
// If you are using @babel/preset-react
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
// If you're using @babel/plugin-transform-react-jsx
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
And that’s it. You got it right.
As React will no longer be in scope while you use JSX, it leads to having a lot of imports in your code that are not necessary anymore. Though it does no harm to let them hang around, you can get rid of them at any moment.
You do not have to remove each and every import manually and separately; all you have to do is to use an automatic script called codemod, such as:
npx react-codemod update-react-imports
It will remove all the unused imports at once and change all the by-default imports resulting from import React from ‘react’ to destructured named imports. If you’re using hooks instead, codemod will convert it to a named import. For instance, React.useState will change to useState and import { useState } from ‘react’ command will be added at the top. Also, codemod will aid you with upgraded and future versions of React for supporting ES Modules.
I hope this blog was helpful for you!
Thanks for reading!!