Learn React In 30 Minutes

🚨 IMPORTANT:

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:

🧠 Concepts Covered:

- React function components
- React hooks
- State management in React
- Prop drilling
- How to use create-react-app

🌎 Find Me Here:

#Reactjs #WDS #JavaScript

[lemargreen]

Thank you, for taking the time todo this

[jardinek]

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

[mr_matata]

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


"cries in todo"

[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.

[X--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.

[PeterBernardin]

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

[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.

[MothBallsYT]

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

[robertn]

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.

[STUPIDYOUTUBE_HIDINGMSGS]

One of my TODOs is to learn React. cheers

[KETANRAMTEKE]

Amount of topics packed in this 30 minutes is impressive

[ZakkPanzermensch]

1. TODO
2.
TODO

3. TODO TODO TODO TODO TODOOO

(pink panther theme)

[rupacFan]

I'm in a Bootcamp and I've learnt from your one video than I did in a whole week! No doubt your the best teacher when it comes to the Web 🔥

[stricklybisnez]

I was doing good until minute 18 everything went side ways and i realized i wasn't sure what i was doing
thanks for the introduction to these concepts im sure in the future it will help me recognized patterns in react use

[nsharma]

There was so much of well explained info jam packed in 27 minutes! Definitely need time to absorb it all coming from just vanilla js, but wow Kyle! This was a great intro, and I loved how you covered soo many things and explained each of them too. As always, thanks a ton!

[franjomaric]

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

[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.

[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:

[audriusbaranauskas]

Great tutorial. No "just copy this code, because it would take too long to explain" parts. Solid delivery on what is promised.
I've been scouting the interwebs for a few hours trying to grasp react and this is what made it click for me.

[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.