# Introducing the New JSX Transform

DevFeed: [Introducing the New JSX Transform](<https://devfeed.tech/articles/introducing-the-new-jsx-transform-22341.md>)

Original publisher: [Read original article](<https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>)

Published: 2020-09-22T00:00:00Z

Content type: article

Language: en

Sources: [React](<https://devfeed.tech/sources/react.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [upgrade](<https://devfeed.tech/tags/upgrade.md>)

## AI overview

This React 17 article introduces a rewritten JSX transform supported by Babel and TypeScript. The optional upgrade allows JSX without importing React, may slightly reduce compiled bundle size depending on the setup, and preserves the existing JSX syntax and older transform.

## Source excerpt

This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform? Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood. Together with the React 17 release, we've wanted to make a few improvements to the JSX transform, but we didn't want to break existing setups. This is why we worked with Babel to offer a new, rewritten version of the JSX transform for people who would like to upgrade. Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size. It will enable future improvements that reduce the number of concepts you need to learn React. This upgrade will not change the JSX syntax and is not required. The old JSX transform will keep working as usual, and there are no plans to remove the support for it. React 17 RC already includes support for the new transform, so go give it a try! To make it easier to adopt, we've also backported its support to React 16.14.0, React 15.7.0, and React 0.14.10. You can find the upgrade instructions for different tools below. Now let's take a closer look at the differences between the old and the new transform. What's Different in the New Transform? When you use JSX, the compiler transforms it into React function calls that the browser can understand. The old JSX transform turned JSX into React.createElement(...) calls. For example, let's say your source code looks like this: import React from 'react'; function App() { return <h1>Hello World</h1>; } Under t