Say Goodbye to 'React' Imports: React 17's Game-Changing Feature

In the latest version of #react , starting from version 17, you no longer need to explicitly import the React module in files that contain React components. This change was introduced as part of the "React 17 - No Breaking Changes" release, and it has some important implications for React developers.

So WHY was this change made, and how does it affect your React code?

In previous versions of React, you had to import the React module in every file that contained React components, even if you didn't use any of the module's properties or methods. This was necessary because React components are defined using JSX syntax, which needs to be transformed into regular JavaScript code by the Babel compiler. The React module contained the functions needed to transform JSX into regular JavaScript, so it had to be imported in every file that contained JSX.

However, this led to some confusion among developers, who sometimes forgot to import the React module or imported it incorrectly, causing errors in their code. It also made the code less readable, since the React module was often imported but not used in the code.

To address these issues, the React team decided to make the React module automatically available in all files that contain JSX. This means that you no longer need to import the React module explicitly, unless you want to use some of its properties or methods directly (e.g. React.Component).

Some of the benefits of not explicitly importing React

1. It simplifies the code by removing the need for unnecessary imports.
2. It makes the code more readable by reducing the clutter caused by unnecessary imports.
3. It makes the code more robust by reducing the risk of errors caused by incorrect imports.

How does this magic happen ,under the hood?

To understand how the automatic React import works, we need to start with some background on JSX. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files, and it is used extensively in React components. However, since JSX is not valid JavaScript, it needs to be transformed into regular JavaScript code before it can be executed. This transformation is usually done by a tool called a JSX transformer, such as Babel.

In previous versions of React, the React module was used to provide the React.createElement function, which is used by the JSX transformer to transform JSX into regular JavaScript code. To use this function, you needed to import the React module explicitly at the beginning of each file that contained JSX code, like this:

import React from 'react'


function BoringComponent() {
? return (
? ? <div>Hello, world!</div>
? );
}

;        

This import statement was necessary because the React.createElement function was defined in the React module, and it needed to be available in the scope of the JSX code.

However, in React 17, the React module is no longer required to be imported explicitly in files that contain JSX code. Instead, the React.createElement function is assumed to be available in the global scope, and the JSX transformer looks for it there, rather than trying to import it from a module. This means that you can write JSX code without importing the React module, like this:

function SmartComponent() 
? return (
? ? <div>Hello, world!</div>
? );
}

        

Under the hood, the automatic React import is achieved by a small change in the Babel configuration, which tells the JSX transformer to look for the React module in the global scope, instead of trying to import it from a module. This change is a welcome improvement for React developers, and it shows how the React team is committed to making the API more intuitive and developer-friendly.

In conclusion, the automatic React import is a great improvement in React 17 that simplifies the code, makes it more readable, and reduces the risk of errors. This change is achieved by assuming that the React.createElement function is available in the global scope, and by configuring the JSX transformer to look for it there, instead of trying to import it from a module. As React continues to evolve, we can expect more improvements like this that make the library even more powerful and easier to use.