🕵️‍ Confusion: When I first started working with React, I always had this confusion that even though my functional component has no reference to React(since I could not see any mention of React keyword in the component), then why do I need to have at the top of my file. 😕 import React from “react"; This is how we create a simple functional component in react:- 🔬 Problem: This code looks like a very simple function with some html inside it but it fails to work if we use it without import React from "react" The problem here is if it’s just some function with html inside it, then it should work without the import statement 🤔 😍 Finding: After reading more about it and after seeing the code which get’s generated after transpilation, I could finally understand why it’s needed 😯 The reason is because of 😃The code which looked like plain html to me is actually JSX 🙇 JSX So after babel transpilation, this is how the same code looks var App = function App() {return React.createElement("div",null,"Hello World!!!");}; The important thing to focus here is and this is the reason why we need to import React at the start of any functional component. 🎉 🙌 React.createElement Hope this helps anyone who is starting with React and is confused about why is needed. import React from “react" For further reading as to understand what gets transpiled to what, please try the Babel REPL The compiler for writing next generation JavaScriptbabeljs.io Babel · The compiler for writing next generation JavaScript Give this article a clap if you found it helpful! You can follow me on twitter for more updates on what I am experimenting with. @VivekNayyar09

Twitter

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REACT.

2020 - Hacker Noon Contributor of the Year in REACT

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Why import React from “react” in a functional component?

Too Long; Didn't Read

Company Mentioned

Vivek Nayyar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Why import React from “react” in a functional component?

Too Long; Didn't Read

Company Mentioned

Vivek Nayyar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES