The most important React concepts to learn first (as a beginner)

In this video I cover the most important react concepts I think a beginner needs to start off learning. If you learn these concepts, I think you can build 80% to 90% of whatever application you are trying to build. I cover functional react components, props, events, hooks such as useState, useEffect, and useRef. After learning those, you will be a better position for understanding more advanced react concepts.
Be sure to leave a comment if you have a different opinion on what is important to learn in react.
------------
For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!
like this video if you found it useful and would like to see more videos of the same content.
subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.
Don't forget to turn on those bell notifications!
Book mark these links!
Twitter / codylseibert
GitHub github.com/codyseibert/youtube
I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

[@robin9436]

I'm not really a beginner but this was a great refresher! Maybe a little fast for actual beginners but I totally agree with you on the fact that what you need isn't much more than what you've shown here

[@nirmalk55]

This is the video I was looking for. Damn good. Gives the clear-cut idea for beginners where to lift heavily

[@andrewskangah3710]

This is excellence. Straight to the point, hitting the nail right on the head. Love it

[@axis2038203]

Straight to the point. Covered a lot of topics in 20 minutes. Great video.

[@tylertesar]

Fantastic display of where to start for a beginner. Went through quite a few videos to find something like this! Well done!!!

[@jons_RoadtoCode]

This is great and exactly what I needed. I think I went through 10 fundamental videos that flew over my head. I ended up just reading the W3school react section and got a basic grasp, but your video is helping sink it in. Subscribed!

[@laurabennis3871]

Thank you, very good refresher as I didn't use ReactJS for a long time (2 years at least), so this helped a lot, subscribed!

[@rupamnagdive8442]

Great tutorial , this is really helpful for a beginner . keep uploading such videos bro. More power to you !!!

[@DerekChang-wb9cj]

Simple and straightforward. Thanks, Cody.

[@dannnnydannnn5201]

Good stuff. Wish I had watched this a year and a half ago to be honest. When trying to familiarize myself with a pretty complex code base without having had the greatest foundation for React, it has made for a rough journey, that’s for sure.

[@sandeepnegi4939]

great tutorial man this is what we wanted the most used concept in the project

[@hameed_ludba]

This is a great overview video... I have gone through a lot of the videos and this is a very good summary of intro to React... Keep it up man 👍

[@DigitalKelvin]

Been using Angular for many years, and I've been looking for a video on the basics of React without it being for absolute programming beginners! Thanks.

[@arslanmalik1500]

same ...😀

[@Brunitos007]

Thank you so much for making this video. Hope this video gets lots of views :)

[@emon1019]

This is GOLD!!! Straight to the point and explained in very simple way.

[@KalpeshPanchal]

Just came here to check what's covered for beginners. Good video Cody!

[@georgetuges4821]

Thank you, am a newbie to react...and really appreciate the advice

[@eduardom800]

Ok you made it so simple. Thanks!

[@daudahmed2343]

Really Thanks for this, You got a subscriber, keep it up.

[@Haakans]

thank you so much for this needed video 🙏

[@priyamvashi2187]

This was helpful. Thank you!

[@heyfolder]

Thank you! Very helpful video

[@hansschenker]

Reduced to the minimum - but very useful - not distracted by other concepts!

[@duolearn]

This video deserves more views

[@rajkumar-nq2te]

In nutshell, it's awesome 👍

[@bharathkumar2007]

Wonderful tutorial. Really short and crisp! Love this type of tutorial. Thanks Expecting more of this kind of videos. Helps developer to make quick start.

[@miltonlopezmontero5440]

Thank you mate. nice video.

[@christianmarvinorsua3079]

Very helpful , thanks

[@adiemar3974]

good enough bro thanks for the refresh ✌

[@di.rodriguez]

great video, thank you!

[@McMurchie]

This is great - to the point, no wasting time with blah blah blah like 9/10 javascript guys on youtube.

[@TheMrmaster0101]

Thanks that was really helpful

[@momon4868]

Thank you very much!

[@alphawebtips2950]

Wonderful tutorial you've got here. Please, how do I insert link (anchor tag) using props

[@Btc314btc]

Thank you so much!

[@srshashibhushan]

Dont Be sorry!. Great quick explanation.

[@deepak8586]

Amazing!!!

[@rajendramohanty8665]

great job

[@oksbro]

Nice! Subscribed

[@moscheibling2518]

We somehow landed in a crunch period for a University project and now i need to figure out a lot of stuff quickly, this was quite helpful. Which Hook would you use for a searchbar? I assume it will be useState but i am not sure yet.

refresher 2x speed, amazing, thank you

[@siewierap]

this is genius

[@gonguyen7102]

Thank you

[@darkpill]

Good tutorial.

[@db6168]

🎉 Nice

[@piotrn2491]

Really nice explanation! I have a small question, when do you or your team has to use the cleanup return function for useEffect in your production code? I'm wondering what would be the cases when this will be useful. Once again thank you for this quick video explanation

[@WebDevCody]

I think in our case we have a component which fetches large PDFs from the backend and puts them in the browsers memory for editing inside the UI. When we navigate away from the page or component, we need to clear that from memory / state so that our browser tab doesn’t run out of memory

[@WebDevCody]

Another example would be if you want a form to auto save some data to the backend if they close a modal or navigate away from a page. You could just have your cleanup function make that http request

[@piotrn2491]

@@WebDevCody I see, so essentially cleanup function does not always means that it will clean up something (like from the browser memory), but just add some functionality to our component after the user leaves the page. Is this the right way of thinking? :)

[@WebDevCody]

Yes pretty much

[@SeibertSwirl]

Love you babe ❤️

[@temidayofalomo991]

Thank youuu

[@DmitryDaren]

thanks.

[@kenansari]

Hi Cody, it's another great video thank you it helps me out a lot, thank you may I ask you when the poki app( include react-redux and router would be amazing) will be available in you your channel? Thank you

[@WebDevCody]

Glad you enjoyed watching it. I will try to work on that app within the week. Maybe sometime this week it'll be out, or by next weekend. Stay in tune.

[@kenansari]

@@WebDevCody thank you so much

[@kenansari]

@@WebDevCody hi Cody, how are you? I hope you are doing well, I just would like to ask you about the new video I guess poki app? when it will be available? thank you

[@ebrelus7687]

Cody Cyber? It sounds like a cool character name from Cyberpunk. No shit! Wow.

[@sandeepnegi4939]

Can you share some intermediate stuff also

[@jamesbandz1]

Now the fun part of every developers journey....figuring out what they want to build/make 🤣 Programmer's Block is real

[@DroidEagle]

thanks

[@WebDevCody]

You're welcome!

[@westsydezamani]

🔥🙌

[@hakametal]

Can someone explain to me why you would manage state in parent components rather than the actual components themselves? I'm very new to React and I'm struggling to wrap my head around these concepts. What is the point and why would we do this?

[@WebDevCody]

Sometimes you need a child component to update the state of a parent component, so you need to lift state up to the parent component so both the parent and child have access to it. For example, let’s say you have a login component which needs to login and save the user info. If you save the user info inside the login component, it will be lost when you navigate away from the page, so you’ll need to define the user state at a higher level so more things can read that user object.

[@oarzx]

Can you please share the vscode theme name?

[@CamdenBloke]

As of React 17, you no longer need to import React everywhere.

[@jons_RoadtoCode]

As someone starting to learn react as of this week, any other tips you can share that I should keep in mind when viewing older vids?

[@lucasmoraes1790]

i really just want to know what all those chrome extensions do

[@waleedahmed9394]

onBlur was the reason I came to this video🤐

[@prashilshrestha3921]

please make a slower one

[@vigneshreddy9262]

Unable to send white space string as JS function argument. function abc(x){ alert(x); } abc("hello world"); //not working function abc(x){ alert(x); } abc("hello"); //working Please help me to send white space strings as an argument

[@WebDevCody]

Vignesh Reddy you need to paste more error logs for me to help

[@vigneshreddy9262]

@@WebDevCody Hi, I got the answer from stack overflow

[@deadpoolfather7785]

As a beginner after 12:00 min i lost track of what he was saying.

[@Pareshbpatel]

Subscribed! {2022-02-24}