Friday, September 03, 2021

React JSX Transform

 Introducing the New JSX Transform – React Blog

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.

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

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

function App() { return React.createElement('h1', null, 'Hello world'); }
// Inserted by a compiler (don't import it yourself!) 
import {jsx as _jsx} from 'react/jsx-runtime'; 
function App() { 
    return _jsx('h1', { children: 'Hello world' }); 
}