Learn React In 30 Minutes

  Рет қаралды 1,354,678

Web Dev Simplified

Web Dev Simplified

4 жыл бұрын

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
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/WebDevSimplified/L...
🧠 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.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Reactjs #WDS #JavaScript

Пікірлер: 1 600
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
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
@JUnderwoodViolin 4 жыл бұрын
How often do you send out emails to your newsletter distribution?
@elabinnovations
@elabinnovations 4 жыл бұрын
In India, it is 4000+ rupees 😭
@ProtikPC_pro_indigo
@ProtikPC_pro_indigo 4 жыл бұрын
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
@joaoalegria7578 4 жыл бұрын
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
@4spuhrbar886 4 жыл бұрын
Thx for the Video!
@lemargreen6049
@lemargreen6049 3 жыл бұрын
Thank you, for taking the time todo this
@derekcoxii2771
@derekcoxii2771 2 жыл бұрын
Underrated comment
@bennysmith4557
@bennysmith4557 2 жыл бұрын
I heared todo like 2000 times
@trevoreedockery7922
@trevoreedockery7922 2 жыл бұрын
haha
@vizulefllry
@vizulefllry 2 жыл бұрын
It took me a little while to appreciate how good this comment is.
@ahmadasili7387
@ahmadasili7387 2 жыл бұрын
@@bennysmith4557 what you wanna do is To do the Todo do doing
@jardinek2121
@jardinek2121 3 жыл бұрын
QUICK TIP: Make sure your playback is at least 1.5 times speed, if you want to become fluent in Todo language.
@bvaroni
@bvaroni 3 жыл бұрын
lmao
@yechielbabani1726
@yechielbabani1726 2 жыл бұрын
Lol
@simonlicman5166
@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
@floridadude7981 Жыл бұрын
I don't think were in Kansas anymore, todo... I mean todo.
@re8nifle
@re8nifle Жыл бұрын
The word "todo" has lost all meaning for me!
@mr_matata
@mr_matata 3 жыл бұрын
so many *Todo* that i don't understand what todo and what not todo "cries in todo"
@yashwanthcb
@yashwanthcb 3 жыл бұрын
create a todo item of cry
@kendriip
@kendriip 3 жыл бұрын
Are you sure crying is the right thing todo
@printchannel_name3371
@printchannel_name3371 3 жыл бұрын
glad im not the only one Todo that
@kendriip
@kendriip 3 жыл бұрын
@@KingElonX same i dont even want to learn it anymore
@Priyanka-cy3zw
@Priyanka-cy3zw 3 жыл бұрын
😂
@X-13-X
@X-13-X 3 жыл бұрын
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
@DaKingOfBall23 3 жыл бұрын
yup
@TheSoybean3r
@TheSoybean3r 3 жыл бұрын
Thank you
@JoeDaveycrockettsoundlabs
@JoeDaveycrockettsoundlabs 2 жыл бұрын
Much obliged
@ronjohnson3967
@ronjohnson3967 2 жыл бұрын
Thank YOU!!
@shanegracias8501
@shanegracias8501 2 жыл бұрын
thanks
@tigercore
@tigercore 4 жыл бұрын
The word Todo has lost all meaning
@sneezydeezymcdeluxe7015
@sneezydeezymcdeluxe7015 4 жыл бұрын
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
@woutjuh13 4 жыл бұрын
Maybe they don’t know what else to do
@umeshkayastha1415
@umeshkayastha1415 4 жыл бұрын
@@woutjuh13 lol
@jovialdeveloper3908
@jovialdeveloper3908 4 жыл бұрын
Todo, I don't think we're in Kansas anymore.
@nslookup2011
@nslookup2011 4 жыл бұрын
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
@hansschuijff
@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
@AlanJaison1 Жыл бұрын
You sir are a legend! was stuck on problem 2 for so long
@ourcore
@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
@ourcore Жыл бұрын
@@zachboemer4008 Just disabling strict mode and using the original `if (storedTodos) setTodos(storedTodos)` fixed it for me
@suckerformimi
@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
@timothy3882 Жыл бұрын
thanks to you
@robertn4996
@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
@WestyFilms Жыл бұрын
Head First is actually a great series to get your start in most programming / scripting languages.
@lukas.webdev
@lukas.webdev 11 ай бұрын
Congratulations! 😉
@PeterBernardin
@PeterBernardin 3 жыл бұрын
Everyone here is complaining about how many todos he said I'm just here appreciating how clear he is when he explains!!
@symonethompson4584
@symonethompson4584 2 жыл бұрын
Agreed with the two above!!!
@s941407
@s941407 2 жыл бұрын
So true!!!
@mallikarjunhagargi7830
@mallikarjunhagargi7830 2 жыл бұрын
Yes 100% true
@kamogelokhumalo4792
@kamogelokhumalo4792 2 жыл бұрын
lucky you. I failed dismally at this one. Maybe this is not for me
@hil449
@hil449 2 жыл бұрын
he explains well and the pacing of the video is really good but the naming is poor af
@garagavia
@garagavia 3 жыл бұрын
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
@JacobAuthier 2 жыл бұрын
todo todo todo
@CrazyPlumGaming
@CrazyPlumGaming 2 жыл бұрын
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
@kodiak809 Жыл бұрын
@@CrazyPlumGaming that's what you get when you skipping Javascript lessons, its easy to see it if you know basic javascript
@CrazyPlumGaming
@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
@kodiak809 Жыл бұрын
@@CrazyPlumGaming in what world is english lesson relevant to programming?
@nsharma4981
@nsharma4981 3 жыл бұрын
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!
@NaturalHattie
@NaturalHattie Жыл бұрын
Wow, this is so convoluted for no reason. Perfect example for why meaningful variable names are important.
@InfectedEnnui
@InfectedEnnui Жыл бұрын
what's convoluted?
@NaturalHattie
@NaturalHattie Жыл бұрын
@@InfectedEnnui todo todo todo todo, everything is named todo
@cptCrax
@cptCrax 3 жыл бұрын
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.
@hmleao
@hmleao 2 жыл бұрын
Man... it's amazing the way you explain things. I've had my fair share of courses that are almost only "see me doing and copy". But you actually explain stuff even though your lessons are still quick. Congratulations, really beautiful stuff.
@higherpurpose1212
@higherpurpose1212 3 жыл бұрын
One of my TODOs is to learn React. cheers
@steff4602
@steff4602 3 жыл бұрын
This was everything I’ve been trying to understand the past few days in one video!! Thank you so much!
@I_Am_McZee
@I_Am_McZee 3 жыл бұрын
One of the best breakdowns I have seen in a while. Straight to the point and not just coding harp hazardly
@GigaWarTrex
@GigaWarTrex 4 жыл бұрын
I blindly started working on a React Project yesterday as it‘s the way I often learn programming languages. Even though I was on a good way I turned to KZbin for a bit more help as it was getting very tedious. This was so great, you explained so many concepts and mechanics in such short time! Thank you for making my WebDev World a bit brighter :D
@yogajourney9519
@yogajourney9519 3 жыл бұрын
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!
@rishabhnagar5883
@rishabhnagar5883 2 жыл бұрын
A must watch video for a beginner in react. You made it very easy to understand. All your videos are so clear and to the point. Thank you man!
@KETANRAMTEKE
@KETANRAMTEKE 3 жыл бұрын
Amount of topics packed in this 30 minutes is impressive
@r_lonef
@r_lonef Жыл бұрын
these
@WantOxide
@WantOxide Жыл бұрын
Also the amount of useless stuff is great
@reactexpress
@reactexpress Жыл бұрын
+1
@eobardthawne6903
@eobardthawne6903 2 ай бұрын
​@@WantOxide Is useLess also a react hook?
@2ru2pacFan
@2ru2pacFan Жыл бұрын
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 🔥
@ZakkPanzermensch
@ZakkPanzermensch 4 жыл бұрын
1. TODO 2. TODO 3. TODO TODO TODO TODO TODOOO (pink panther theme)
@casual_chess
@casual_chess 4 жыл бұрын
Lmaoooo😂😂
@Y-NOT-
@Y-NOT- 4 жыл бұрын
Just following
@rudrapratappaul867
@rudrapratappaul867 4 жыл бұрын
The fuck 😂😂😂
@1randumbguy
@1randumbguy 3 жыл бұрын
this video is useless due to all of the 'todos'...he should make them unique so a person can understand what is what...
@dharmang
@dharmang 3 жыл бұрын
🤣🤣🤣🤣👌🏻
@stricklybisnez3296
@stricklybisnez3296 3 жыл бұрын
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
@ThomasKupracz
@ThomasKupracz 2 жыл бұрын
Great overview. Thank you for this tutorial. The amount of stuff you cover in 30 mins is sick!!!
@uxlordsimplifyingdesignpro5544
@uxlordsimplifyingdesignpro5544 4 жыл бұрын
This video was so helpful to me. I’m a ux /ui designer and was working to study typescript and react. This video got me understand the basics. Thanks for making this! 🙏
@keithlamontdavis8047
@keithlamontdavis8047 4 жыл бұрын
This was a great lesson. Excellent, clear and direct teaching. Thank you.
@abqsky5338
@abqsky5338 3 жыл бұрын
Dude, thank you! Your first 5 minutes of the video helped me in understanding compiling. You're excellent in explaining things.
@subliminakeys1674
@subliminakeys1674 Жыл бұрын
This is great. Side note for unique ids when using keys. Another video had me take the todolist array length, find the number of the last item in the array and add 1 to it's id for new todos. This seems easier than the random key generator option but I'm sure the key generator is better for other scenarios .
@peteraliciastuart5807
@peteraliciastuart5807 Жыл бұрын
This was my first bash at React! Great tutorial & well explained. Now I have a million other questions but will get to know the framework better as I use more! Will defos subscribe!!! Merry Christmas from Scotland :)
@alekvassinskiy1286
@alekvassinskiy1286 Жыл бұрын
did you learn it good enough now?
@allanjunli
@allanjunli 4 жыл бұрын
This is jam-packed React and JavaScript goodies. Thank you for sharing. Learned a lot in 30 minutes.
@hexerous
@hexerous 2 жыл бұрын
Thank you Kyle, I'm proud to say I've learned the basic concepts and hooks of React in a day because of you! Thanks.
@simiyutube
@simiyutube 3 жыл бұрын
Thanks Kyle. I always enjoy your tutorials. Not sure why I never coded along on this one but done now.
@timstern1540
@timstern1540 2 жыл бұрын
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
@bladex9061 2 жыл бұрын
That was really helpful! Thanks! was stuck at this part for about 2 hours, checking through my code and wondering why!!
@erkinylmaz7661
@erkinylmaz7661 2 жыл бұрын
@@bladex9061 same!
@theaceforum
@theaceforum 2 жыл бұрын
you saved me like 2 hours of troubleshooting
@suti1979
@suti1979 2 жыл бұрын
4 hours of troubleshooting...
@andresayala9640
@andresayala9640 2 жыл бұрын
I removed the React.StrictMode in index.js but it is still preventing the tasks from loading... not sure what could be wrong
@hondajacka2
@hondajacka2 Жыл бұрын
Great tutorial! Very succinct and clear :)
@DamianTew
@DamianTew 3 жыл бұрын
Your videos are great. I'm quite new to programming and I find the level of detail excellent. You explain the parts many others skip, and actually show how things work. Thanks for making these!
@AeroPR
@AeroPR 2 жыл бұрын
Amazing example. Finally React starts to make sense to me. For other beginners, you must have already taken full JS, HTML and CSS courses, know how a basic ToDo app is built without React, then put this video on 0.75x. Then things will start to make sense and you would be able to follow.
@audriusbaranauskas6498
@audriusbaranauskas6498 3 жыл бұрын
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.
@kose241
@kose241 4 жыл бұрын
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
@jamegumb77 3 жыл бұрын
Thanks this saved me
@kiwi-el-gato9007
@kiwi-el-gato9007 Жыл бұрын
Thank you so much, thought it was a strict mode issue but this fixed it.
@shree4641
@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
@gregjacobs189 Жыл бұрын
@@shree4641 thanks that worked
@tenzindala457
@tenzindala457 Жыл бұрын
Oh God you saved me
@alishajamadar603
@alishajamadar603 4 жыл бұрын
Thank you so much for explaining so well in such short time.
@krystaladeoye2911
@krystaladeoye2911 Жыл бұрын
This was very helpful. Kyle, you are a gifted teacher, breaking down concepts so people can understand. Thank you!
@ANILKHANDEI
@ANILKHANDEI 4 жыл бұрын
Thanks for creating such premium content for free. I have learnt a lot of important web dev concepts from your videos. This is short and simple intro to React. I like this one.
@Matin1999_unique
@Matin1999_unique 2 жыл бұрын
i can't even speak in my mother language for 5 minutes without any pause or a little bit stutter while speaking fast. big applause to this guy for talking not only smoothly but also doing that for about 30 minutes. wow.
@rayden6314
@rayden6314 2 жыл бұрын
You’re an excellent teacher. Wish all my teachers taught this way.
@joecucco4132
@joecucco4132 Жыл бұрын
You're so awesome, intelligent, and well spoken bro. Thank you for all of your help. I've learned so much from your channel and you've helped me get through school! React is so much easier if you know how to write raw HTML, CSS, and JS. Thanks for explaining the information in a way that everyone can understand.
@eiderarango5863
@eiderarango5863 4 жыл бұрын
Man thank you so much, I hope to see a complete React course coming quite soon, I like how you explain complex things.
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
I already have a complete React course on my website linked in the description.
@manishmodi8662
@manishmodi8662 2 жыл бұрын
Kyle is there a coupon code you have handy for your course?
@alexshemwell8320
@alexshemwell8320 2 жыл бұрын
Great video my man. I really appreciate that you made this great intro free of charge.
@andreaskk1
@andreaskk1 3 жыл бұрын
This was very concise and clearly explained! Thank you :)
@lacherdaniel
@lacherdaniel 4 жыл бұрын
take a shot everytime he says todo
@The_Soup_Master
@The_Soup_Master 3 жыл бұрын
No thank you, I would like to live.
@kosemekars
@kosemekars 3 жыл бұрын
Am now an alcoholic
@ashleywilkonson386
@ashleywilkonson386 3 жыл бұрын
That wasn't a good idea, I am writing this from heaven. JK! In hell.
@silentxcure
@silentxcure 3 жыл бұрын
@@ashleywilkonson386 you really weren't supposed "to do " that
@ff-tg2vy
@ff-tg2vy 3 жыл бұрын
not everyone is alcoholic homeless piss of shit
@marcodimario9918
@marcodimario9918 4 жыл бұрын
A-W-E-S-O-M-E teacher. Congrats!!!
@Double_T_G
@Double_T_G Жыл бұрын
Just the crash course I needed. Thank you so much!
@victornaut
@victornaut 3 жыл бұрын
Thanks once again! (It does help a lot to be used to this sort of teaching pace, but still totally doable)
@ShujathHussain0
@ShujathHussain0 4 жыл бұрын
Another Awesome video! Note : Viewers have some knowledge on react components, Props & hooks to understand the code
@CodeInspire
@CodeInspire 2 жыл бұрын
Everything was great before I start reading the comment. Now. I just hear todo, with todo, does todos :) Thanks for the video :)
@hakata8889
@hakata8889 3 жыл бұрын
Ty so much, I just know basic html, css and js and react was always something confusing and scary.. But this rlly helped me understand react a lot more
@stephanevermette5645
@stephanevermette5645 3 жыл бұрын
This is an excellent 20K foot overview to get the basics and move on to more in-depth material later.
@franjomaric7913
@franjomaric7913 2 жыл бұрын
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
@lenkashynkarova6388 2 жыл бұрын
thank youuuuu
@soumia1341
@soumia1341 2 жыл бұрын
👍👍
@Wordisgood
@Wordisgood 2 жыл бұрын
Thank youuuuuuuu..
@SameenIslam
@SameenIslam 4 жыл бұрын
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
@marknguyen606 4 жыл бұрын
my head hurts.. i had to pause to see where it all connects.
@shangshi6286
@shangshi6286 3 жыл бұрын
@@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
@kirarevcrow 3 жыл бұрын
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
@luisaceo00 3 жыл бұрын
Absolutely agree. Perhaps a better approach would have been to use suffixes e.g. todo_prop, todo_item or something among those lines.
@StorybookFantasia
@StorybookFantasia 3 жыл бұрын
@@shangshi6286 ..you can reduce the play back speed !!
@jiauyjiauy3777
@jiauyjiauy3777 2 жыл бұрын
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!
@jonasstrabel
@jonasstrabel 3 жыл бұрын
Thank you! Most important things explained quickly with examples! Exactly what I needed!
@oracleking4252
@oracleking4252 4 жыл бұрын
How the eff did you learn all this with only one head? This will be my foundational video for learning react.
@m.haydar.mosawi
@m.haydar.mosawi 4 жыл бұрын
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
@Zestyyy28 4 жыл бұрын
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.
@HosseinRooholamini
@HosseinRooholamini Жыл бұрын
Great instructor, clear words with a clear voice. not too fast not too slow. the best possible speed. Thanks
@pravin1877
@pravin1877 2 жыл бұрын
Thank you so much, really appreciate efforts you have made to make this tutorial and try to explain most of the concept with help of live example. Thanks a ton!!!
@birbcoding
@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
@MarcelDerWeltenbummler Жыл бұрын
Thank both of you I couldn't find a solution
@Almaburger
@Almaburger 13 күн бұрын
life saver. ty
@Mrstealurgrill
@Mrstealurgrill 4 жыл бұрын
Hi Kyle, I know you didnt have a lot of time to explain but something that really confused me was how you could use the line const [todos, setTodos] = useState([]) to create an Array variable todos and a function setTodos(). Throughout the video you keep using setTodos as a function but it's not classically defined. So I kept looking for the setTodos function we didnt write. I guess it's time to buy that full course to understand useState()...
@nsharma4981
@nsharma4981 3 жыл бұрын
I had exactly the same doubt in my first viewing. However he defines what setTodos does with that todos = [...prevTodos, newTodo] part, which struck me when I rewatched that bit. But yes, it is definitely confusing at first
@leerenae313
@leerenae313 3 жыл бұрын
Wow thank you so much for this! It has given me a better understanding of React.
@enpassant7358
@enpassant7358 Жыл бұрын
Excellent Tutorial! I found it to be so helpful just to watch someone quickly create a simple app. It really helped me put the pieces I've been learning into perspective.
@samiam.402
@samiam.402 2 жыл бұрын
If anyone started having errors after import "uuid" it turns out the way to import has been update slightly. Now import it with "import {v4 as uuidv4} from 'uuid'" and I was able to run my script again. Hope that helps someone out there.
@TheFryPo
@TheFryPo 2 жыл бұрын
Yup came to write the same thing. Glad someone already pointed it out ! Thank you :D
@niklasthielen5508
@niklasthielen5508 2 жыл бұрын
thanks man!
@MaiaEssmeralda
@MaiaEssmeralda 2 жыл бұрын
Oh THANK YOU!
@shinichixxxx
@shinichixxxx 4 жыл бұрын
my ear tired hearing 'to do' 😂😂
@FrazzleDazzle835
@FrazzleDazzle835 3 жыл бұрын
14:39 was a breath of fresh air
@delnarlt
@delnarlt 2 жыл бұрын
Fabulous introduction to React. I've been using Angular for most of my development but have been curious about react. You can never know to many frameworks. I guess I'll have to go on a deep dive into react. Don't think I'll be changing over to react at my day job but there's always side development.
@SergioArroyoSailing
@SergioArroyoSailing 3 жыл бұрын
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! :)
@srinivasnahak3473
@srinivasnahak3473 4 жыл бұрын
You're an amazing teacher with amazing hair.....😃
@candym5280
@candym5280 2 жыл бұрын
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
@farter134 2 жыл бұрын
How is the new job🎉?
@candym5280
@candym5280 2 жыл бұрын
@@farter134 it's great!! The office is amazing, they let us wear slippers to work lol 😂
@logarithm0
@logarithm0 Жыл бұрын
@@candym5280 how is that possible?
@GeorgeGeorge-ve6il
@GeorgeGeorge-ve6il 2 жыл бұрын
Hi Kyle, thank you for producing tutorials like these that are easy to grasp and let us new developers adapt faster. Can I just request for a tutorial for a Phonebook app that will show CRUD with react and Google Sheet as database?
@jonsnow7844
@jonsnow7844 2 жыл бұрын
Bravo Sir! This is just the right amount of jumping in the deep end and explanatory tutorial. As a semi experienced programmer I found this video to be a just right in terms of scope. Yes some things I didn't understand, but that's okay because I can look them up and watch this video twice. The only thing that was missing was a barebones description of what IS React, but like I said, that's okay. I watched a different 5 minute introduction video and came back. I'm gonna try to implement your script. Let's see how that goes! lol
@Riguintantrix
@Riguintantrix Жыл бұрын
So in minute 22 i wasn't able to recover correctly the todos after refreshing . Doing some debuggin seems that the setItem was running 2 times. This was because the if statement that check for storedTodos will always resolved to true even if the array was empty, efectivly clearing the array. I had to check that the length of storedTodos was greater than 0 inf the if evalutaroand then it would work correctly.
@sahil9146
@sahil9146 11 ай бұрын
this!! you're a life saver. I'm confused as to how his code ran the way it did with this error?
@Sky-lc1ew
@Sky-lc1ew 9 ай бұрын
BUMPP!!
@skapha
@skapha 4 жыл бұрын
The Best Teacher on the YT at this moment!
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
Thank you!
@chandikalakshan468
@chandikalakshan468 3 жыл бұрын
A very good and quick explanation of React basics. That's very important for my career. Thank you for the tutorial.
@jameshwest
@jameshwest 3 жыл бұрын
Kyle, nice job. Really enjoyed this presentation and I've benefited from you channel. Thank you.
@tyland777
@tyland777 4 жыл бұрын
The word todo was use so many times. I got lost. Should have used another word when it was possible. Didn't watch til the end
@matthewangel5003
@matthewangel5003 3 жыл бұрын
I agree
@Steven-wo9bm
@Steven-wo9bm 3 жыл бұрын
I lost track halfway
@yojona
@yojona 4 жыл бұрын
Video speed 2X: Learn React in 15 minutes ;)
@vik8860
@vik8860 4 жыл бұрын
that would be an example of what not "to do".
@mounirmoutawakil1078
@mounirmoutawakil1078 4 жыл бұрын
Lmao
@patrickwalsh9444
@patrickwalsh9444 4 жыл бұрын
1.25x ain't so bad, just sayin 😁
@dynerushd7517
@dynerushd7517 3 жыл бұрын
Install video speed controller and put it to 10x to "Learn React In 3 Minutes"
@nemethricsi
@nemethricsi 3 жыл бұрын
@@patrickwalsh9444 Learn React in 24 minutes! :)
@sohailfx
@sohailfx 2 жыл бұрын
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.
@dan110024
@dan110024 3 жыл бұрын
Man you do your videos well. Even just explaining how to setup in VSC and what all of the files are.
@SirXtC
@SirXtC 3 жыл бұрын
oh man, i was starting to get it at the beginning but there were so many todos thing it just got super confusing.
@AlexTechie
@AlexTechie 4 жыл бұрын
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. 👍❤
@knlsha
@knlsha 3 жыл бұрын
Amazing work there. I just tried to play in 0.75x as I was watching and doing at the same time. This helped big time, thank you so much!
@vengateshm2122
@vengateshm2122 3 жыл бұрын
That's mind boggling explanation? I can explain back even in sleep. Kudos to you
@anishjoshi1999
@anishjoshi1999 3 жыл бұрын
Alert: while importing uuidv4 use this code instead: import { v4 as uuidv4 } from 'uuid'; it works well !!
@Enchansea
@Enchansea 3 жыл бұрын
Thank you so much! This helped!
@flopasen
@flopasen Жыл бұрын
This comment should be right at the top
@00el04
@00el04 3 жыл бұрын
this has got me so confused, do you have another simple project without using the word todo so many times lol :)
@scottmillion849
@scottmillion849 3 жыл бұрын
Lots of Todos lol, but it actually helped me because I renamed the variables and had to figure some stuff out which helped me to learn more about what's going on. Also led me to learn more about Local Storage and how it works with a quick google. Solid intro to React. Made me feel like I can get this with repetition.
@theUnemployedProgrammer
@theUnemployedProgrammer Жыл бұрын
Very good video. I have some experience with angular for front end stuff, and always thought React looked kind of daunting. I find the simplification of the concepts in this video very helpful.
@mohamedshahid6063
@mohamedshahid6063 4 жыл бұрын
Please make one more on REACT REDUX.
@dangluong1175
@dangluong1175 4 жыл бұрын
And Redux-saga,please!
@Joseph-qb1es
@Joseph-qb1es 4 жыл бұрын
Buy his react course. NOW!
@sophiehaug3319
@sophiehaug3319 4 жыл бұрын
Thank you for this brillant introduction!
@8xnnr
@8xnnr Жыл бұрын
Man I really appreciate these guides , you do a great job of explaining. The only criticism I have is that at one point in the video my mind went blank from all of the "Toodos" and I just stared at the computer screen for a good solid minute trying to figure out what reality I am in.
@prajwaldeepkhokhar7416
@prajwaldeepkhokhar7416 4 жыл бұрын
9:30 min and am already completely lost pulling my hair. I wanna die
@keerthanaanandan6062
@keerthanaanandan6062 3 жыл бұрын
So am I😭.it's been three months since you posted this comment,are you a react dev now ?????
@nemethricsi
@nemethricsi 3 жыл бұрын
If you wanna understand how useState works (and you know JS) check this vid out. (the first half): kzbin.info/www/bejne/Z5u6hGqZeNqIjtk
@chubbyBunny94
@chubbyBunny94 3 жыл бұрын
I gave up
@chubbyBunny94
@chubbyBunny94 3 жыл бұрын
@@_iconick_ what software know how do Have under your belt?
@prajwaldeepkhokhar7416
@prajwaldeepkhokhar7416 3 жыл бұрын
@@keerthanaanandan6062 it's been 6 and am still lost af LMAFOOOOOOO
@m0nster488
@m0nster488 2 жыл бұрын
"And now what you have to do is to make a todolist that todo is todo tOdO todODOtoTOdotO"
@crimsonkatsu5919
@crimsonkatsu5919 2 жыл бұрын
Currently going through the Odin project and making a todo app in vanilla js. React looks awesome. After getting the syntax down it looks way quicker.
@sanyuktakate4099
@sanyuktakate4099 3 жыл бұрын
thank you for this short tutorial. Really useful and helped me understand the basics of React. Just one suggestion, the variable names are really confusing, todos, etc, hence, using different variable names would be better.
Learn Regular Expressions In 20 Minutes
20:52
Web Dev Simplified
Рет қаралды 1,2 МЛН
Learn React With This One Project
42:38
Web Dev Simplified
Рет қаралды 667 М.
Суд над Бишимбаевым. 2 мая | ОНЛАЙН
7:14:30
AKIpress news
Рет қаралды 684 М.
Taki Taki Tutorial💃 Where’re you from?🔥
00:14
Diana Belitskay
Рет қаралды 6 МЛН
skibidi toilet 73 (part 2)
04:15
DaFuq!?Boom!
Рет қаралды 29 МЛН
How To Actually Get Hired In 2024
10:43
Web Dev Simplified
Рет қаралды 185 М.
React Tutorial For Beginners
43:19
developedbyed
Рет қаралды 846 М.
Learn useState In 15 Minutes - React Hooks Explained
15:45
Web Dev Simplified
Рет қаралды 1,1 МЛН
Has Generative AI Already Peaked? - Computerphile
12:48
Computerphile
Рет қаралды 195 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 441 М.
State Managers Are Making Your Code Worse In React
13:33
Web Dev Simplified
Рет қаралды 135 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 149 М.
Beginner React.js Coding Interview (ft. Clément Mihailescu)
36:31
Ben Awad
Рет қаралды 2,1 МЛН
Суд над Бишимбаевым. 2 мая | ОНЛАЙН
7:14:30
AKIpress news
Рет қаралды 684 М.