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

🕵️‍ 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 import React from “react"; at the top of my file. 😕

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 JSX 😃The code which looked like plain html to me is…