🕵️‍ 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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

E2E Testing of Excel Downloads with Cypress

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

E2E Testing of Excel Downloads with Cypress

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps