Skip to content
Related Articles

Related Articles

Why do you need to import React in functional components ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 30 Jan, 2022

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.

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 example.

Step 1: Creating React Application

npx create-react-app reactapp

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

cd reactapp

Project Structure: It will look like the following.

Project Structure

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.

App.js




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: 

  1. 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.
  2. props: This property contains all of the children and in our case, it is Hello, World!
  3. 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.
  4. ref: when you need to imperatively modify a child outside of the typical dataflow we need ref.
  5. $$typeof: This property identifies the object as a React element

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

App.js




import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World") ;
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

You can see it for yourself by logging it on to the console.

App.js




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)

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.

So, for using the createElement function we need to import React and if we do not import it

then React.createElement function will be undefined.

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.

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

npm start

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!