React JS Functional Components | Learn ReactJS

In this tutorial you will learn how to create React JS Functional Components. This tutorial is part of a Learn React series playlist. ReactJS is based upon constructing functional components in a component tree.

🚀 This lesson is part of a Learn React tutorial series playlist:

React JS Functional Components | Learn ReactJS

(00:00) Intro
(0:05) Introduction
(0:53) ES7 React JS Snippets Extension
(1:14) Components must be imported
(1:40) Creating the Header component
(4:51) Creating the Content component
(6:50) Creating the Footer component
(8:34) Components encapsulate logic
(9:11) Using React Dev Tools to view the component tree

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 References:

✅ Follow Me:

Was this tutorial about React JS Functional Components helpful? If so, please share. Let me know your thoughts in the comments.

#react #functional #components

[VitoOnYoutube]

Thanks a lot, Dave!
Your explanation is always so clear!
Also appreciate the pace. Trying to switch from Jekyll to React and this series is exactly what I need 👏🏼💪🏼🙏🏼

[Clash-Roblox]

I'm not lying, but watching the course that I was bought on Udemy is misunderstand since the introduction to React. Instead, watching this course on YouTube with a very clear and kindness lecturer, I can get it all so easy.

[BJMoorhouse]

Thanks so much for doing these! I'm doing a full stack project at the moment, with working knowledge of React, but when I get screwy in my head I like to go back and re-cover the basics. This has been perfect so far. Really appreciate you putting the time in.

[FoodBitesTV]

Thank you for making these tutorials free. May you continue to do tutorials and examples that are commercial and production standards, that's what most other content creators of coding tutorials are lacking. Again thank you so much

[technicalboy]

Your a very good teacher and you have made it simple to learn. Many courses jump in to telling you all the complex details straight away, but you easy in with practicing creating components. I wish you were at my Uni man.

[pamphilemkp]

wonderful tutorial, happy to let you know that it has helped me to understand a lot in less then 10min

[me_lvin]

Wow! You made that looked easy. Thanks.

[franalcaraz]

Great content!. After successfully deploy a Next + mdx blog following your tutorial, now I feel I need start learning IN DEPHT the basics... what is a long journey in my forties. Thanks!

[xewjypt]

Hands down best React Tuts on youtube! thanks a lot

[zakariachajia]

this is a step forward for me things are more learer another w let's move to the next video

[oussamabouallati]

Thank you, I like the explanation,
on windows: just type "rafce" in the Header.js file, it will give you the same result.

[djheckler]

2:08 cmd + shift + R on Mac to search snippet, can also just type "_rafce" and hit enter in the file.

[cingetorixhelvetii]

Thanks a lot, I'm really learning React now, even for a non native english speaker.

[surendharsmsn]

We can do this with html itself right?
Then why do we go for this react?

[wishmeheaven]

Thanks!
Although...
CRA is dead, and nee developers should be aware of that.
Maybe you should recommend your Vite tutorial in the pinned comment.

[Lala-qhwl]

First of all, thank you for this tutorial! I have newly started to learn React, so I have one question: In this video you wrote the code inside App.js, can we write them inside index.js too? Actually, I tried and it worked, that's why I am asking is there any difference? As I understand from your explanation, App.js is the parent one, therefore we must import from it.Is it true?

[ahmad-murery]

About the Content component's logics,
not sure whether or not moving handleNameChange function outside of Content function will make more readable or this might be against React best practice convention,

I like the pace of this series,
Thanks Dave,

[amarchinta]

why reactjs introduced functional components why the rewrite entire code for functional components ? can u please make a video on that or siimple answer. thank you

[konstantinospascal]

Will you slowly get into more advanced React concepts too eventually? Would be cool if you did that just like with vanilla JS

[oncoding]

I will comment on each video that I watch to help you out with the algorithm