DEV Community

dhondup
dhondup

Posted on

66 10

You no longer need to import React from 'react'

If you use React, import React from 'react' is the first thing that you write in your code but if you have created a new react app using creat-react-app recently, you might have noticed that there is no import React statement at the top and your code works just fine. So, How's that working?

Well, previously you had to import React because the JSX is converted into regular Javascript that use react's React.createElement method.
JSX conversion
But, React has introduced a new JSX transform with the release of React 17 which automatically transforms JSX without using React.createElement. This allows us to not import React, however, you'll need to import React to use Hooks and other exports that React provides. But if you have a simple component, you no longer need to import React. All the JSX conversion is handled by React without you having to import or add anything.

This new JSX transform is also supported in older versions of React so you can start using them even if you don't use React 17.

Read the official React doc to learn more.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (15)

Collapse
 
seanmclem profile image
Seanmclem •

When using Vite - it still seems to make me use it on react 17

Collapse
 
titungdup profile image
dhondup •

Hi @seanmclem, It seems like Esbuild, which Vite is based on, doesn't use Babel to compile JSX and I think the new JSX transform requires Babel for all the JSX conversion. I'll get back to you if I can confirm this. Thanks for pointing it out.

Collapse
 
titungdup profile image
dhondup • • Edited

I'm very positive Babel is the reason.

Thread Thread
 
antonofthewoods profile image
Anton Melser • • Edited

Not just babel. You can use it with vite (with TS, for example). reactjs.org/blog/2020/09/22/introd...

"We’d like to thank Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint, and Flow maintainers for their help implementing and integrating the new JSX transform. "

If you are getting an eslint error on one of the other platforms (like TS), you can just (from github.com/jsx-eslint/eslint-plugi...

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

Collapse
 
danishaft profile image
ejeh daniel •

yeah but for the main component and not very component file

Collapse
 
sonikabaniya profile image
Sonika Baniya •

Very helpful, thanks for sharing

Retry later
Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ •

Didn't know about this thanks for the post, will try on another project

Collapse
 
titungdup profile image
dhondup •

Sure @nirazanbasnet :)

Collapse
 
navyaarora01 profile image
Navya Arora •

Very informative!

Collapse
 
mrazvan7 profile image
Razvan⚡ •

I use create react app with eslint and sadly I still get that error because of eslint.

Collapse
 
titungdup profile image
dhondup •

Can you share me your eslint config?

Collapse
 
mrazvan7 profile image
Razvan⚡ • • Edited

Is the default one with the AirBnb coding style.

Thread Thread
 
titungdup profile image
dhondup •

Oh okay. Well try it out and let you know if i find something.

Collapse
 
windo profile image
Herwindo Artono •

Thanks, appreciate this info

Collapse
 
markmatute profile image
Mark Matute •

why, why not?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Retry later