Why do you need to import React in functional components ?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. In react, we use JSX, especially in the functional important which is an extension of Javascript it needs the react methods for reference to convert into javascript code.

Prerequisites

• React JS
• React JS functional component

Why do we Import React in functional components?

The Browser does not understand React, it only understands HTML, CSS, and JavaScript. So to convert React into valid JavaScript we use a webpack called Babel. It is used to convert JSX into objects and then return that object. Babel is already included in the boilerplate generated by create-react-app.

Let’s understand with the help of an example.

Creating React Application

Step 1: Use this command to create the react project

npx create-react-app reactapp

Step 2: After creating your project folder, move to it using the following command:

cd reactapp

Project Structure

It will look like the following.

Project Structure

Step 3: Write the following code in App.js. Below is a JSX syntax. So whenever you use it you will require React imported.

Javascript

import React from 'react'
import ReactDOM from 'react-dom'

function App() {
      return <h1>Hello, World!</h1>
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

The above JSX gets converted to this by Babel internally

Object
$$typeof: Symbol(react.element)
key: null
props: {children: 'Hello, World!'}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
_self: null
_source: {fileName: '/src/index.js', lineNumber: 5, columnNumber: 10}
[[Prototype]]: Object

Explanation:

• type: In this example, our component is the object that represents the root element which is the h1 element. type is the property that corresponds to the HTML element.
• props: This property contains all of the children and in our case, it is Hello, World!
• key: You might know that we pass key as a prop while mapping in React which in our case is null. It is used to uniquely identify an element in the virtual DOM.
• ref: when you need to imperatively modify a child outside of the typical dataflow we need ref.
• $$typeof: This property identifies the object as a React element

What Browser sees after the code gets compiled is the following code.

Example: It shows how the app component is compiled into an object in the console screen.

Javascript

import React from 'react'
import ReactDOM from 'react-dom'

function App() {
    return <h1>Hello, World!</h1>
}

const rootElement = document.getElementById('root')
console.log(App())
ReactDOM.render(<App />, rootElement)

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Explanations: The JSX gets internally into many React.createElement() function calls and each of them returns an object as shown above. Now because of this, we need to import React from “react” since internally every JSX is creating a React Component using JSX transformer.

Note: From React version 17 you don’t even need to import React from “react” for smaller projects but earlier versions of React projects need to import it. JSX transformer internally takes care of converting a JSX to React elements but you may still need to import it for using hooks like useState and useEffect. We do not need to import React in files like actions, reducers, and so on because we don’t have JSX there.