With the release of React 17 in October 2020, the React developers have made a change that can save time for all users of their library. From now on it is no longer necessary to import the React package at the top of every file in your application. As a person who constantly forgets to import React into my files, I wholeheartedly agree with this update.
In older React versions, the React package always had to be in scope in order for the Babel transpiler to process your JSX code. The reason for this is that Babel converted all JSX tags into function calls for React.createElement, and if React was not in scope then Babel could not translate your JSX to JavaScript.
For example, take a look at the following JSX expression:
<h1>Hello, World!!!</h1>
When Babel builds and transpiles this code, it will look more like this:
React.createElement(
"h1",
null,
"Hello, World!!!"
)
With the new update, React and Babel have worked together to eliminate this inconvenience. Babel no longer calls React.createElement to create JSX. Instead, Babel will automatically import a JSX processor without requiring access to the React package. It’s a fairly small change, but the time you save can build up over time.
And don’t worry – if you’re in the habit of always importing React, there isn’t any harm done. All of your existing React code will run normally.
I don’t know about you, but I’m celebrating this update. What’s craziest to me is that I haven’t even heard about this update till now, more than two years after React 17 was released. Yeah, I think I’ve been living under a rock or something.
You can read more about the new JSX Transform update on the React docs.
And if you’d like to learn more about React.js, check out my React playlist on YouTube, or my series of React articles, starting with an introduction to React.
