How to Use New JSX Transform IN REACT

---

Hello friends, In this ‘How to Use New JSX Transform IN REACT’ blog, we will learn what is jsx, why is jsx is useful, its advantages, disadvantages, and how to use it in react code.

Introducing New JSX Transform

With React 17, developers need not worry about importing React in their files to use React. Confused? This article will tell you what you would like to understand to migrate both your code and knowledge to the present new way of doing things.

If you’ve ever written code in React, you have noticed the weird HTML-looking syntax in regular JavaScript files. That syntax is called JSX and is not valid JavaScript.

Recently, React Team worked alongside Babel has come up with a new feature in the latest React release 17 providing a new JSX in-built transform.

What is JSX?

JSX stands for JavaScript XML. A JavaScript wrapper around HTML tags. The JSX is more strong than the traditional HTML.

JSX means Javascript Execute. JSX is the Syntax Extension of JavaScript. It looks the same as HTML but, It is an inline markup language to create React elements and used to describe what UI should appear.

React doesn’t require using JSX, but most people find it helpful as a visible aid when working with UI inside the JavaScript code. It also allows React to point out the more useful error and warning messages.

What is the new JSX Transform?

JavaScript XML (JSX) which provides us to write HTML in react is not recognized by the browser out of the box. Therefore react developers depend on compilers similar to Babel or typescript to transform JSX code into regular JavaScript.
Even the preconfigured create react app toolkit includes a JSX transform under the hood.

After the announcement of react 17, the Facebook team built an improvement to JSX transform. The team worked with babel to offer a new rewritten JSX transform for react users.

With the new transform, one can use JSX without importing react
Also, the compiled output may improve the bundle size which may depend on one’s setup.

This update as assured by the team would not change the current JSX syntax and upgrading to the new JSX transform is not needed. So users who are currently using the older transform do not have to upgrade if they choose not to as the old JSX transform will continue working as usual.

Why is the JSX Transform useful?

JSX is not supported by browsers. it uses compilers like (Babel or TypeScript) to transform JSX into regular JavaScript which is processed by browsers. However, this need will be overcome by the new JSX transform which will automatically compile the JSX source code without having to depend on the typical compilers.

Advantages of the new JSX transform:

In this blog, we’ll be discussing the benefits of the new JSX transform and how to use it. Let’s get going-

• It allows you to practice JSX without having to import React.
• The compiled output almost improves the bundle size.
• It is a stepping stone for future improvements where you’ll have only a few concepts to learn React.

Now let’s see how the new transform varies from the older jsx in the lower version of react 17.

Old vs New JSX Transform

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 to React.createElement calls.

Let’s assume your code looks like as below:

Old JSX Transform Example:

import React from 'react';
function App() {
return <h1>Hello World</h1>;
}

Compiled Convert JSX Transform:

The compilers convert JSX code into regular JavaScript as below:

import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}

Limitations of Old JSX Transform in React

There are certain limitations of this approach, 

1. You need to import React first so that JavaScript knows what to do with the compiled code. As the compiler is calling the React.createElement function; there is ‘React’ you will be presenting to. 
2. Performance limitations due to generated React.createElement.

NEW JSX TRANSFORM IN REACT

The new transform solves the above issues by two new entry points to use React that can directly 

be used by the compiler without any need to transform the JSX code to React.createElement. 

In React 17 and more versions, there is no need to insert import React from the ‘react’ command every time at the top of the JSX files

in React 17, The new JSX transforms imports a special function from these entry points automatically and calls them.

Example: Let’s take an example of the source code –

function App() {
    return <h1>Hello World</h1>;
}

Compiled code: From the below-compiled code, You can see the jsx import statement is automatically added by Compiler in React 17.

import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
   return _jsx('h1', { children: 'Hello world' });
}

NOTE: Here, You no need to import React. But, you might still require to import React if you are going to use Hooks or any other exports.

How to Upgrade to the New JSX Transform?

If you don’t want to upgrade your existing JSX transform, that’s fine, you’ll not face any trouble using the old transform. Simply if you do want to switch to the new JSX transform, here are the requirements you will need –

Below are upgrades recommended by react documentation 

• create-react-app: If you’re using create-react-app, you need to update to version 4.0.0 (currently in beta)
• Next JS: If you’re using Next JS, you need to update to version 9.5.3 or above
• Gatsby JS: If you’re using Gatsby JS, you need to update to version 2.24.5 or above
• Upgrade TypeScript to v0.126.0 or above.

React version supports the new transform (Right now it’s v17 RC but soon it will be backported to previous versions like v16.x, v15.x, and v14.x)

If you’re using the 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,  you can update the babel configuration as below:

// 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"
}]
]
}

Removing Unused React Imports

Using the new JSX transform will automatically import the required react/jsx-runtime functions, React will no need to be in scope when you use JSX. This might point to additional React imports in your code. It doesn’t have any conflict to keep them, but if you’d wish to remove them, we recommend running a “codemod” script to remove them automatically

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. 

For example: 

import React from 'react';
function App() {
return <h1>Hello World</h1>;
}

The above code will be replaced with the below code. Here import statement will be removed

For a Hook in react

If you use some other import from React. For Example a Hook. Then the codemod will convert it to an above-mentioned import. 

For example:

import React from 'react';
function App() {
const [text, setText] = React.useState('Hello World');
return <h1>{text}</h1>;
}

will be replaced with the below code. Here hook useState will be referred to as useState import statement

import { useState } from 'react';
function App() {
const [text, setText] = useState('Hello World');
return <h1>{text}</h1>;

Let’s conclude the topic.

Conclusion

If you’d like to discover more React articles, it is recommended to read ‘REACT INTRODUCTION’ and ‘5-minute to create React App’.

As we have seen, React 17 version introduces no new features but serves as a ‘stepping milestone’ for upcoming versions like 17, 18, and beyond. In this article, we explored the old JSX transform and new JSX transform with examples, along with the upgrade process.

Aspire Softserv ranks among the leading ReactJS development companies in India, the United States (USA), the United Kingdom (U.K.), and more. With a 100% success ratio, we have successfully delivered world-class quality ReactJS development projects. Ready to elevate your React game? Contact us for expert solutions and seamless development experiences!