Let’s have a look at this snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// React 18
import React from 'react';
import { createRoot } from 'react-dom/client';

const element = (
  <p id="greet">
    नमस्ते 🙏!
  </p>
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

On the very first line of our code, we are importing the React, but we are not using it anywhere, can we skip it?

Behind the scenes, the JSX code we write gets converted to :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';
import { createRoot } from 'react-dom/client';

const element = React.createElement(
  'p',
  { id: 'greet' },
  'नमस्ते 🙏!'
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

Before JSX, this is how we used to create react elements. React elements are nothing but a plain old javascript objects.

Now, back to the code. Here we are using the React as a dependency, it’s just hidden by the JSX.
Earlier versions of React( < 17 ) used to throw an error, when you don’t import it.

Error: React not defined

This error was confusing lots of new developers, starting from React 17, Babel started importing React. The same process which turns <p> to React.createElement('p') will also check if React is imported or not. It will import it, if its not imported already

So from React 17, you don’t need to import React, but in certain cases if we want to use hooks, importing React will be handy.

If you found this helpful, please give a shoutout to @gsavitha_ and share this article to help others. For more articles like this, subscribe to my Newsletter and get the latest updates straight to your inbox.