Learn React In 30 Minutes

🚨 IMPORTANT:
Full React Course: courses.webdev...
In this video I will be covering all of the basics of React in only 30 minutes. We will cover create-react-app, components, state, props, rendering, event handling, and so much more. By the end of this video you will have a full understanding of the basics of React, but if you want to take your React knowledge to the next level checkout my full React course linked above for the best React learning experience on the web.
📚 Materials/References:
How To Install Node.js: • Your First Node.js Web...
Destructoring Video: • Why Is Array/Object De...
GitHub Code: github.com/Web...
🧠 Concepts Covered:
- React function components
- React hooks
- State management in React
- Prop drilling
- How to use create-react-app
🌎 Find Me Here:
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#Reactjs #WDS #JavaScript

[@WebDevSimplified]

Make sure to checkout my full React course for more in depth explanations and projects with React. It is the best content I have ever created. courses.webdevsimplified.com/learn-react-today

[@JUnderwoodViolin]

How often do you send out emails to your newsletter distribution?

[@elabinnovations]

In India, it is 4000+ rupees 😭

[@ProtikPC_pro_indigo]

Nice one, practical and hands on. Take a look at this too -- kzbin.info/www/bejne/Y2SqYX-QoceIn9U Simplified, very basic and from the ground up,

[@joaoalegria7578]

Thank you so much for this crash course Kyle, I know the basics and took an udemy older course and the ammount of info you put in 27minutes is unreal. I would only recommend adjusting the variables names, for a beginner it must be incredibly confusing hearing and writing everything as "todos/todo", other than that well done my friend, after I get my 1st react dev job I will probably buy your course! :)

[@4spuhrbar886]

Thx for the Video!

[@mr_matata]

so many *Todo* that i don't understand what todo and what not todo "cries in todo"

[@yashwanthcb]

create a todo item of cry

[@kendriip]

Are you sure crying is the right thing todo

[@printchannel_name3371]

glad im not the only one Todo that

[@kendriip]

@@TheBadBeatShow same i dont even want to learn it anymore

[@Priyanka-cy3zw]

😂

[@MothBallsYT]

Wow, this is so convoluted for no reason. Perfect example for why meaningful variable names are important.

[@InfectedEnnui]

what's convoluted?

[@MothBallsYT]

@@InfectedEnnui todo todo todo todo, everything is named todo

[@PeterBernardin]

Everyone here is complaining about how many todos he said I'm just here appreciating how clear he is when he explains!!

[@Pearlescent800]

Agreed with the two above!!!

[@s941407]

So true!!!

[@mallikarjunhagargi7830]

Yes 100% true

[@kamogelokhumalo4792]

lucky you. I failed dismally at this one. Maybe this is not for me

[@hil449]

he explains well and the pacing of the video is really good but the naming is poor af

[@cptCrax]

This was exactly what I needed! Thank you! I think the best part was the careful order in which you introduced things -- one complication at a time with a simple description of how we handle it in React. This format worked really well for me.

[@timstern1540]

Small thing I ran into: When trying to load tasks from storage be sure you do not have React.StrictMode enabled. It will cause the useEffect block to run twice which will prevent tasks from reloading correctly.

[@bladex9061]

That was really helpful! Thanks! was stuck at this part for about 2 hours, checking through my code and wondering why!!

[@erkinylmaz7661]

@@bladex9061 same!

[@theaceforum]

you saved me like 2 hours of troubleshooting

[@suti1979]

4 hours of troubleshooting...

[@andresayala9640]

I removed the React.StrictMode in index.js but it is still preventing the tasks from loading... not sure what could be wrong

[@ZakkPanzermensch]

1. TODO 2. TODO 3. TODO TODO TODO TODO TODOOO (pink panther theme)

[@casual_chess]

Lmaoooo😂😂

[@실험맨]

Just following

[@RudraDirtTrails]

The fuck 😂😂😂

[@1randumbguy]

this video is useless due to all of the 'todos'...he should make them unique so a person can understand what is what...

[@dharmang]

🤣🤣🤣🤣👌🏻

[@franjomaric7913]

In case someone else is having issues with importing uuid as he did in example(for me it didn't work), here is how it worked for me import { v4 as uuidv4 } from 'uuid'; Great tutorial btw

[@lenkashynkarova6388]

thank youuuuu

[@soumia1341]

👍👍

[@Wordisgood]

Thank youuuuuuuu..

[@kose241]

Great video, one thing to note if anyone made the same mistake, the useEffect function that saves the state to local storage must be placed below the useEffect function that retrieves the existing/previously stored state. Otherwise, you'll have the useEffect function that sets the current state set it to empty(since it hasn't retrieved the local todos) and you're saved todos won't show on refresh.

[@jamegumb77]

Thanks this saved me

[@kiwi-el-gato9007]

Thank you so much, thought it was a strict mode issue but this fixed it.

[@shree4641]

I had already placed it below the getItem useEffect but still it saves empty [] to todos, for this i had added an if(todos != " ") condition before the setItem line and it solved the issue. You can try this.

[@gregjacobs189]

@@shree4641 thanks that worked

[@tenzindala457]

Oh God you saved me

[@yogajourney9519]

Thank you for the helpful video. As others suggested, it might be a good idea to use more variety when naming the variables, components, etc. to help out beginners (like myself) who easily get confused. I still found this very helpful, so thanks!

[@sohailfx]

The best tutorial to understand the react js, voice is very clear and confident. instead of learning i was trying to learn his style of speaking. Very clear and profound.

[@stealthmonkey3G]

Today we're gonna be learning to do stuff with to do's to make a to do list, but don't do anything too crazy with your todos, cuz todo that with your todos would not be very todo of you. Love the vids.

[@stealthmonkey3G]

14:39 - 'do to' LOL why is this my new favorite drinking game

[@HosseinRooholamini]

Great instructor, clear words with a clear voice. not too fast not too slow. the best possible speed. Thanks

[@STUPIDYOUTUBE_HIDINGMSGS]

One of my TODOs is to learn React. cheers

[@coreyknight9272]

This dude is horrible teach...horrible tutorial. Folks there are WAAAY better tutorials from folks that make it way easier and don't intentionally try to make it hard.

[@shinichi9do]

my ear tired hearing 'to do' 😂😂

[@FrazzleDazzle835]

14:39 was a breath of fresh air

[@ThomasKupracz]

Great overview. Thank you for this tutorial. The amount of stuff you cover in 30 mins is sick!!!

[@thePadlockesTech]

A lot of people are commenting on the repetitiveness of the todos. I almost agree. In coding, I was taught to name your data types, functions, classes, objects, etc, based on what they do. And since this is all a todo application that does todo stuff it kind of makes sense to me. Granted I have been practicing for a while so that definitely helped. I don't think a brand new person would understand this all that well. If it was a large app with multiple types of things it can do, it would make sense that the names were a bit more different. But similar names with some changes in a way makes it clean. Like if you think, a list of todos, a single todo, handling a todo, clearing a todo, the names make sense to me. And you definitely stop to explain things, but this isn't something someone, especially a new person, can just watch you and follow along, they got to stop coding to listen to what you are talking about on each topic. Good video in my opinion, just a little rough around the edges.

[@thePadlockesTech]

Oh one thing though. Looks like I can add in todo objects when I have an empty text field. Did I miss something here?

[@krystaladeoye2911]

This was very helpful. Kyle, you are a gifted teacher, breaking down concepts so people can understand. Thank you!

[@jiauyjiauy3777]

Thank you, dude! Even though the process of creating a react app has changed a little bit, I actually was able to run it! I've watched a couple of videos on the Internet but it's only you who helped me out! Thanks!

[@ashp7264]

Damn.no-nonsense,quick and on point

[@aayesharouther9023]

hey i think that few of you also might have the problem in installing, importing and using uuid in windows so try this: instead of "nmp i uuid" write "npm install uuidv4" in the terminal instead of " import uuidv4 from 'uuid/v4' " write "import {uuid} from 'uuidv4' " instaed of "id: uuidv4()" write "id: uuid()" hope this helps PS: remove " " marks before copying the code

[@m.haydar.mosawi]

I have a question, why did you use useRef to get the input value while you can access it from event.target.value ? Thank you for the tutorial, you make the useEffect more clear to understand, really thanks.

[@Zestyyy28]

While it's true that 'e.target.value' can be used to grab the value of an input element, he's applying the event listener to the button element instead of the input element. When the user clicks on the 'Add Todo' button, the button element is what 'e' would be referring to when it's passed into the 'handleAddTodo()', thus, 'e.target.value' wouldn't give the input value since that value comes from the input element and not the button element.

[@bojacksworldwideweb]

Holy-shitt balls I struggled soo bad to create the react app, cause of my poorly organized directories!! thanx 4yo tutorial vro.

[@abqsky5338]

Dude, thank you! Your first 5 minutes of the video helped me in understanding compiling. You're excellent in explaining things.

[@jonathangeorge7528]

for those having trouble with UUID import this way instead import { v4 as uuidv4 } from "uuid";

[@GetBackTrolling]

still it says not having unique id wtf..

[@GetBackTrolling]

fixed it sometimes i go full retard lol

[@Nathan-ws5fi]

I love this video My next thing to do is a todolist that has todos that can do different things to do different things on the todos to update the todolist and that would allow me todo what I needed to do off my todo list.

[@candym5280]

I loved this tutorial. I start my first IT job on Monday (so excited!), so I'm doing projects to refresh some stuff, and your video was so helpful! PS: i followed a lot of your videos while learning and you're the best!

[@farter134]

How is the new job🎉?

[@candym5280]

@@farter134 it's great!! The office is amazing, they let us wear slippers to work lol 😂

[@logarithm0]

@@candym5280 how is that possible?

[@PerryCodes]

The uuid import statement will no longer work if you're following this in 2021 (or later...). You'll have to change your uuid import to: const { v4: uuidv4 } = require('uuid');

[@oracleking4252]

How the eff did you learn all this with only one head? This will be my foundational video for learning react.

[@pietroflow]

searching for skills I always wanted to learn... And always finding your vids 👌🏼👌🏼👌🏼👌🏼 Great great great job

[@AlexTechie]

I bet the word "task" was at the tip of your tongue the whole time while making this video. 😉 Side note: the variables/object names are way too similar, making it tough to keep track of what they represent. We still appreciate the video, though. 👍❤

[@MrBrady95]

Cool video, thanks! I had to change it to an updated version of uuidv4, but this works instead: import { v4 as uuidv4 } from 'uuid'; Then in the id : uuidv4();

[@alishajamadar603]

Thank you so much for explaining so well in such short time.

[@TheEnisshom]

you made do what i couldn't do , thank u Kyle ;)

[@rayenhidri584]

thx for all the courses

[@SergioArroyoSailing]

great quick dive into REACT! good of you to explain the todos props at @11.05 . It's a lot better using different names for different items. imho . Your're a great teacher.! keep them coming! :)

[@SirXtC]

oh man, i was starting to get it at the beginning but there were so many todos thing it just got super confusing.

[@Mr100pic]

This is actually pretty excellent.

[@buriza2401]

Thanks, that was a great refresher!

[@sandippatel2518]

Learned lot from this video.

[@mdatharalam6918]

Very very straightforward, you are the god of react, hats off sir

[@rkeenan85]

I really love these shorts tutorials.

[@asadulhaqmshani4737]

Wow, learned so much in 30 minutes. Thanks a lot!!!!

[@oubayheot8843]

if someone had an error ( Module not found: Error: Package path ./v4 is not exported from package ) after 19:19 ( importing uuidv4 ) or if your stopped till next time, try to use this : ''' import { v4 as uuidv4 } from 'uuid'; '''

[@victornaut]

Thanks once again! (It does help a lot to be used to this sort of teaching pace, but still totally doable)

[@sergio..81]

If you're having problems using the uuid the it is in the video, I used it like this and worked for me: import { v4 } from 'uuid'; then you cand just use the function as v4()

[@Yahkub]

Thanks Man!

[@MomIsCrying]

True Hero

[@Daniel00232]

Thank you for this video, can you do exactly the same for Vue. With this short videos Im much more able to comprehend the basic concepts.

[@RemotHuman]

You need a library to generate an ID? Why not just increment a global variable by 1 (I wasn't paying the closest attention so sorry if this was dumb)

[@layalsadek935]

Thank you kyle for this tutorial although I m a little bit confused so my questions are: why did you add the todo state inside the App component and not in the todoList component Why all the handleclicking function and useEffect are in the App component?

[@jonathanvorich2120]

Good job, this crash course helps me al lot!

[@sivaparanitharan3544]

🙏 My dear Carl. 🌟 This is the best approach ever seen in learning programming. If you could kindly do similar lessons for Flutter & Dart & Go lang that will be a great help for many people and will be really inspiring start for many. You will empower many life for sure🥇👏 May the almighty God Bless You with Joyful Long Long Life. 🙌

[@Your_Active_Hour]

That was actually a very good course. Thank you!

[@alexirabor]

Thanks for your tutorial, it really helped me a lot

[@andreaskk1]

This was very concise and clearly explained! Thank you :)

[@yewyewxd]

I need to watch at a 0.75x speed, or else my brain will lag XD Good content, clear explanation, subbed !

[@marcaurelt5725]

great content! keep them comming

[@brianhaney6816]

Great tutorial!

[@mashfikurrahman1115]

thanks for perfect explain...

[@karinabraga4466]

Thank you, reguards from Brazil!

[@vizulefllry]

Great tutorial.

[@sophiehaug3319]

Thank you for this brillant introduction!

[@pianochannel100]

You and the nullbyte guy need to get together and having a staring contest.

[@mithunyadav8495]

Loved it!🥰

[@katechaparro5924]

This probably seems minute to an experienced developer, but when you're explaining something and you name multiple different items all the same thing (todo) it's always going to be at least a little confusing.

[@Free_Ross_William_Ulbricht]

Great job!

[@lucianofrancismelhemsesana9576]

Hello, so every time a single todo changes state it rerenders the whole component tree? I m learning react and I know from a course that the re render is per component. I m confused. You say this around minute 8:50. There is a key on each react components to make single component rerender (and other reasons) right?. Nice tip on the graphql shortcut, very useful, and very neat summary about react main topics. At first when you said persistance I thought you where aiming a DB. But it's a react video of course local storage or cookie makes more sense, something in the client side. Thanks!

[@nawafb6280]

Really thank youu for this tutorial and congratulations for your marriage love you brother you are the best in these days ever ❤️❤️❤️❤️

[@Pareshbpatel]

Great introduction to React Development. Thanks, Kyle {2021-08-14}

[@noumanulhaq4705]

Bro believe me it's not simplified. You just made my concept complicated. U messed it up at todo and todos. U just made it simply complicated.

[@a4317978]

there is a mistake in the tutorial´s title.. "todo" is missing..

[@jaymunk262]

Second year in a row watching this before my exams

[@dainismichel]

Before watching, prepare a bottle of vodka and a shot glass. You have to take a shot every time Kyle says the word "todo!"

[@RaldinCasidar]

Now, I learned the TODO language

[@tylerdash5724]

At 18:29, I just set the id key to todos.length + 1 for a unique id every time.

[@simoncarriere4086]

Whats the downside of doing this ?

[@nileshgite1059]

Awesome. unbelievable.

[@luaneaquino7835]

Thank you! I learned a lot about react

[@shizasiddiqui1689]

You're brilliant

[@jaymathew5129]

Lol I'm really new to coding/ programming. I can safely say you lost me at todo. Thanks for the video I'm sure it'll all make sense in the future.

[@meowd-predator7050]

Set playback speed to 2x, and learn react in 15 min.. btw, nice tutorial..

[@davidconnelly]

Downloading a third party library to generate a random string? Is that normal?

[@hackathon-bestmostar273]

bro ur amazing

[@alexl4074]

great tut as usual :)

[@yuvaraj9740]

my mind is just todo todo todo todo todooo

[@brandendernell5914]

Nice tutorial! Now I keep asking myself, what if my To-do list contains things I don't want to do? xD

[@ShaidaMuhammad]

Man I can do one thing at a time. Listen to you or watch you.

[@lemargreen6049]

Thank you, for taking the time todo this

[@derekcoxii2771]

Underrated comment

[@bennysmith4557]

I heared todo like 2000 times

[@trevoreedockery7922]

haha

[@vizulefllry]

It took me a little while to appreciate how good this comment is.

[@ahmadasili7387]

@@bennysmith4557 what you wanna do is To do the Todo do doing

[@tigercore]

The word Todo has lost all meaning

[@sneezydeezymcdeluxe7015]

I'm currently doing the watchandcode JS course, which also has me building a todo list. After I don't know how many hours, the word todo is just so weird to me now.

[@woutjuh13]

Maybe they don’t know what else to do

[@umeshkayastha1415]

@@woutjuh13 lol

[@jovialdeveloper3908]

Todo, I don't think we're in Kansas anymore.

[@nslookup2011]

good to beginners like me, we can focus on learning React rather than designing app- i started with the full course, felt React is so complicated! just because the recipe book app is too many components to do

[@jardinek2121]

QUICK TIP: Make sure your playback is at least 1.5 times speed, if you want to become fluent in Todo language.

[@bvaroni]

lmao

[@yechielbabani1726]

Lol

[@simonlicman5166]

i thought at first i will attempt this, but after few seconds of figuring out how big every directory is, i thought i rather wont

[@floridadude7981]

I don't think were in Kansas anymore, todo... I mean todo.

[@re8nifle]

The word "todo" has lost all meaning for me!

[@X-13-X]

In case anybody has problems with uuid. importing it like in the video didn't work for me. In the git repository it said to import it this way: import { v4 as uuidv4 } from 'uuid' That worked.

[@DaKingOfBall23]

yup

[@TheSoybean3r]

Thank you

[@JoeDaveycrockettsoundlabs]

Much obliged

[@ronjohnson3967]

Thank YOU!!

[@shanegracias8501]

thanks

[@hansschuijff]

Great lesson, but I had two problems with the code. 1. the import of uuid should now say (according to their readme) import { v4 as uuidv4 } from 'uuid'; 2. There is a problem with the react.strictMode in that the code in de video doesn't restore the todos from storage correctly. Although removing strictmode solves it, I also watched your react hooks video in which you explain how to correctly call the setState functions and why it otherwise doesn't do what you might expect when called more than once. So it seems in this case the setTodos in the useEffect that initializes the todo's should say: setTodos( prevTodos => [...prevTodos, ...storedTodos] ); instead of setTodos(storedTodos) After that change the function will restore the todos even in strictmode.

[@AlanJaison1]

You sir are a legend! was stuck on problem 2 for so long

[@ourcore]

Thanks for the setTodos() fix, but mine has a bug where the todos are duplicated on their own, even with their IDs, when I update the code. Not sure if it's related to this

[@ourcore]

@@zachboemer4008 Just disabling strict mode and using the original `if (storedTodos) setTodos(storedTodos)` fixed it for me

[@suckerformimi]

Why is this workaround necessary? I don't see how React is usable if this simple save and reload code doesn't work in strict mode.

[@timothy3882]

thanks to you

[@kamel3d]

As a dev you should have used better names instead of calling everything todo

[@sandpaperunderthetable6708]

I think he knows what todo

[@lacherdaniel]

take a shot everytime he says todo

[@The_Soup_Wizard]

No thank you, I would like to live.

[@kosemekars]

Am now an alcoholic

[@ashleywilkonson386]

That wasn't a good idea, I am writing this from heaven. JK! In hell.

[@silentxcure]

@@ashleywilkonson386 you really weren't supposed "to do " that

[@ff-tg2vy]

not everyone is alcoholic homeless piss of shit

[@confessor3380]

For those using this in 2023, this tutorial is still mostly valid BUT since it's react 18 ReactDOM.render() isn't supported and you have to use const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );

[@votoran9157]

what a chad

[@birbcoding]

If you are watching this now in 2022, after npm i uuid you need to do import {v5} from "uuid"; and use v5() function in id:

[@MarcelDerWeltenbummler]

Thank both of you I couldn't find a solution

[@Almaburger]

life saver. ty

[@SameenIslam]

A decent tutorial ruined by poor variable naming choices. Calling every variable ‘todo’ doesn’t help simplify data flow related concepts to beginners. Hopefully you’ll take this into account in future vids.

[@marknguyen606]

my head hurts.. i had to pause to see where it all connects.

[@shangshi6286]

@@marknguyen606 I think he is too fast, if he slows down and explains every data flow like we are idoits, that way is better and more clear.

[@kirarevcrow]

You got a major point. I stopped watching the moment I started hearing the word todos every single second. Most channels of this type create a content but don't actually put themselves in an audience perspective.

[@luisaceo00]

Absolutely agree. Perhaps a better approach would have been to use suffixes e.g. todo_prop, todo_item or something among those lines.

[@StorybookFantasia]

@@shangshi6286 ..you can reduce the play back speed !!

[@robertn4996]

I did struggle a lot to learn React. I wasted a lot of time. The problem? I did not know the basics of Javascript in first place. You need to walk before you can run. So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals. After I learned the basics of Javascript, learning React became much easier. Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages. And to develop my knowledge I learned with Head First Javacript Programming.

[@WestyFilms]

Head First is actually a great series to get your start in most programming / scripting languages.

[@lukas.webdev]

Congratulations! 😉

[@ElMocoo]

I’m going to make a tutorial on React… todotodotodotodotodotodo

[@garagavia]

I really like the speed and precision of this tutorial. A lot of tutorials are slow and not very concise. However the variable naming and overuse of the word "todo" made it way less simple than it could have been.

[@JacobAuthier]

todo todo todo

[@CrazyPlumGaming]

Came here to say the same thing. Trying to differentiate between 4 different “todos” names and learning what each one does was very challenging.

[@kodiak809]

@@CrazyPlumGaming that's what you get when you skipping Javascript lessons, its easy to see it if you know basic javascript

[@CrazyPlumGaming]

@@kodiak809 do you feel better now? That’s what you get “when you skipping English lessons”. It’s easy to type a reply when you know basic English.

[@kodiak809]

@@CrazyPlumGaming in what world is english lesson relevant to programming?

[@KETANRAMTEKE]

Amount of topics packed in this 30 minutes is impressive

[@r_lonef]

these

[@WantOxide]

Also the amount of useless stuff is great

[@reactexpress]

+1

[@eobardthawne6903]

​@@WantOxide Is useLess also a react hook?

[@yojona]

Video speed 2X: Learn React in 15 minutes ;)

[@vik8860]

that would be an example of what not "to do".

[@mounirmoutawakil1078]

Lmao

[@patrickwalsh9444]

1.25x ain't so bad, just sayin 😁

[@dynerushd7517]

Install video speed controller and put it to 10x to "Learn React In 3 Minutes"

[@nemethricsi]

@@patrickwalsh9444 Learn React in 24 minutes! :)