JSX Transform — An Introduction

Source

Hi there👋

React team has been working on adding new features in past few years. Recently they have added a new feature called JSX Transform in React 17.

We already know that browsers don’t understand JSX out of the box. In order to make them understand the JSX code that we write, they need any compiler like Babel or Typescript in order to convert JSX into regular JavaScript code.

Team React, with the release of React 17 worked with Babel to provide new features of JSX Transform, without breaking the existing setup that were being used earlier.

Why JSX Transform?

Even though it’s optional to upgrade to JSX Transform, it has the following benefits:

1. Use JSX without importing from React.
2. Improvement in the bundle size.
3. Future improvements which might reduce the concepts to get started with React.

The Differences Highlighted

The example shown below will show how the code looks after the upgrade:

Old Code:

import React from 'react';

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

Upgraded Code:

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

Note: In case you want to import something else, use the named import. For example:

import {useState} from 'react';

How to upgrade?

In order to use JSX Transform, you have to have:

1. A React version supporting JSX Transform(ideally React 17 RC and above)
2. A compiler which is compatible with the upgraded JSX Transform. They can be:

Create React App ( v4.0.0+)

Next.js ( v9.5.3+)

Gatsby ( 2.24.5+)

Please see the more details on the official React documentation here.

Hope this article helped you in getting familiar with the new JSX Transform. If it did, a thumbs up to this article will motivate me to further write down more useful content for you.