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

Vivek Nayyar
May 24, 2018 · 2 min read

🕵️‍ 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 actually JSX 🙇

So after babel transpilation, this is how the same code looks

var App = function App() {
return React.createElement(
"Hello World!!!"

The important thing to focus here is React.createElement and this is the reason why we need to import React at the start of any functional component. 🎉 🙌

Hope this helps anyone who is starting with React and is confused about why import React from “react" is needed.

For further reading as to understand what gets transpiled to what, please try the Babel REPL

Give this article a clap if you found it helpful!

You can follow me on twitter @VivekNayyar09 for more updates on what I am experimenting with.


how hackers start their afternoons.

Vivek Nayyar

Written by

JS enthusiast, a singer, capricorn and old school romantic


how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade