A New Era for React: Say Goodbye to Importing React
Are you tired of adding import React from 'eact' to the top of every JSX file? Well, with React 17, those days are behind us! The React team has introduced a new JSX transform that automatically imports a new jsx function, making it possible to write React code without explicit imports.
What is JSX, Anyway?
If you’ve ever written React, you’ve probably noticed the strange HTML-like syntax in your JavaScript files. That’s JSX, a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. However, JSX is not valid JavaScript, so it needs to be compiled into valid JavaScript code using a tool like Babel or TypeScript.
The Old Way: Importing React
Before React 17, when you wrote JSX code, it would get compiled into calls to the React.createElement function. This meant that you needed to import React at the top of every file, which was a hassle for both beginners and experts.
The New Way: Automatic Imports
With React 17, the JSX transform has been updated to automatically import a new jsx function from a custom entry point. This means that your compiled code will look like this:
No more importing React! This change also has the nice side effect of potentially reducing your bundle size.
What Do I Need to Do?
To take advantage of this new feature, you’ll need to upgrade to React 17 or later. If you’re using a framework like Create React App, Next.js, or Gatsby, you’ll need to update to a compatible version. If you’re using a custom Babel config, you’ll need to update your presets and plugins.
Removing Old Imports
Once you’ve upgraded, you’ll still have old imports hanging around. Don’t worry, everything will still work as normal, but it’s a good idea to remove them to keep your code clean. The React team has provided an automatic script to help you do just that.
The Benefits
With this change, React just got a whole lot easier to learn and use. No more remembering to import React, and no more extra lines of code to write. It’s a small change, but it makes a big difference.
Get Started with LogRocket
Ready to take your React development to the next level? Try LogRocket, a modern React error tracking tool that helps you identify and fix errors in minutes. Sign up for a free account today!