Learn React With This One Project

Подписаться 1,6 млн

Просмотров 686 тыс.

50% 1

React Simplified Course: reactsimplified.com
Learning React is hard. There are so many concepts to learn and mindsets shifts that you need to do. That is why in this video I will be breaking down all the most important concepts you need to understand in React.
📚 Materials/References:
React Simplified Course: reactsimplified.com
GitHub Code: github.com/WebDevSimplified/r...
FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
ES6 Modules Video: • JavaScript ES6 Modules
ES6 Modules Article: blog.webdevsimplified.com/202...
Destructoring Video: • Why Is Array/Object De...
Destructoring Article: blog.webdevsimplified.com/202...
Short Circuiting Video: • If You Don’t Understan...
Short Circuiting Article: blog.webdevsimplified.com/201...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:10 - What Is React
02:45 - Thinking In React
06:07 - Todo List Project Setup
10:45 - JSX
15:30 - React State
20:15 - Todos Logic
30:45 - Break App Into Components
38:15 - useEffect Hook
#ReactJS #WDS #JavaScript

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 526

@WebDevSimplified Год назад

React Simplified Course: reactsimplified.com

@niconel7659 Год назад

Any update on when you will release your course?

@md-gy7gu 11 месяцев назад

I am not getting ads in your RU-vid channel. Did you forget to monetize the channel?

@ninnin253 5 месяцев назад

I do not understand why the function name "toggleTodo" return { ...todo, completed} in stead of { ...todo, completed:completed} ? because the e.target.checked return only true or false, then when we set the object property we need to specify the key, not just passing true or false, isn't it? Am I missing something?

@winzkk8745 2 месяца назад

@@ninnin253 That's the shorthand syntax for JavaScript

@kevinvikan3609 11 месяцев назад

I did struggle a lot to learn Rеact. A lot of time that I wasted. 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.

@shapelessed 11 месяцев назад

If you only started out with Svelte you would have known to not touch React with a 5 meter stick...

@michaelsazz3545 11 месяцев назад

No offense but no one asked about the book tho 🌚

@kratospidey 11 месяцев назад

@@michaelsazz3545 I did :)

@pacmandd8652 11 месяцев назад

@@michaelsazz3545 I did also ask for the book ;)

@d-slice9064 11 месяцев назад

Thanks @kevinvikan3609 for the information it certainly helps!!

@luisrodrigues6211 Год назад

I always wanted to learn React over my lunch and get promoted in the afternoon 😁

@D7460N Год назад

40 minutes for lunch is nice!

@dejandejanovic472 Год назад

Hahahhah

@ichiroutakashima4503 Год назад

Me: You guys get a lunch break...!?

@michaelsazz3545 11 месяцев назад

Wait...u have a job without learning react?...what job

@rl6382 11 месяцев назад

@@michaelsazz3545a blowjob, he gives them for free

@TinyMaths 10 месяцев назад

Thanks for the tutorial; I've had to go over this several times, because, as others have mentioned in the comments, there is so much information in this tutorial. But things are making sense now. I love the fact that deleting elements is much simpler to do in React than in vanilla JS, just filter out the array element and it's gone after re-render. Looking forward to re-building some of my portfolio apps with React

@clnguye Год назад

This tutorial is incredible. So many concepts in 40 minutes. For beginners, have a good grasp of JS function and how it's being passed around as if it's object. Thanks Kyle

@critical_awareness7587 Год назад

Duuude! you are seriously one of the best Educators on this platform in regards to web development. Clear, concise, simple and engaging. I enjoy following your videos for projects, and always find myself picking one of yours. Thank you for your community contribution!

@ChrisBiddleGuitar 7 месяцев назад

Thank you Kyle, for this video! React's component driven approach is quite a shift from the top-down MVC architecture I'm used to. After about six weeks, though, of madly picking apart tutorial examples, getting a handle on hooks, and creating my own little "Frankenstein" React projects , things are finally starting to come together.

@bytecrust 11 месяцев назад

I love how you dive right into features of React, making it clear why it is useful! I tried watching through the 12 hour freeCodeCamp React video, but by hour 4 I was thinking, "what is the point? This seems like so much more work for what I can already accomplish with JS."

@alejosiri8799 10 месяцев назад

Simply amazing! I've watched a few more React videos but, even though they started from basics, they quickly jumped to a huge code which I wouldn't even be close to reproduce on my own. This video, instead, gave me clear use of state, hooks, modularization and basic structure. Great course!

@stormybear4986 Год назад

Just when I think you couldn't get any more awesome, you come along and blow my mind again! Kyle, you, sir, are THE MAN!!!!

@mondlimkhanyiswa1206 10 месяцев назад

This is wonderful. Some of the stuff I struggled with were made so easy to under understand in this video (e.g. I was not aware you could pass functions through props). Man. You are a start. Thank you

@mailsiraj 10 месяцев назад

Kyle, what a wonderful video - though I knew almost everything you were covering, there are many subtle ideas I grasped from your course that deepened my understanding of how React works. Your take on when to call setState with a function was definitely very insightful. I really loved the way you refactored your code and brought out props as a natural need - thank you so much.

@adriaancanter4573 Год назад

Great video, new to React and this channel - this is a well thought out example that really helps explain the concepts to a beginner , esp. the eventing/state and the component model all in one go - thanks very much!

@hamadamek 10 месяцев назад

Beautiful. Took me 5 days to follow step by step and build it in parallel and try to do things in a different way. Learned a lot about events, which I misunderstood initially

@orion6831 10 месяцев назад

I just finished watching this video and I have to say, it was incredibly helpful! The explanations were clear and concise, and I feel like I have a much better understanding of useState now. Thank you so much for sharing this valuable content.

@PostMasterNick Год назад

This was really great. I know JS and am familiar with Typescript and React. I was able to follow along in this tutorial and convert the JS to TS and get it all working! Super stoked and feeling like a I got a lot out of it.

@OJRO-xp2ip 11 месяцев назад

For people like me who is not new to programming. This is incredible tutorial. Saved tons of time.

@justinekenyansa 11 месяцев назад

thank you Kyle! I went through this guide and refreshed a few concepts. Short and straight to the point!

@gsolomonuk 5 месяцев назад

Loved this condensed "Crash Course" format, learned so much in very little time, much appreciated

@dc366 Год назад

You have made learning React so easy and less SCARY. Thank you so much.

@theisoj Год назад

Awesome tutorial! Thanks Kyle as always! 👍

@regnulify 9 месяцев назад

Great video! I haven't done react in over a year and this was a perfect refresher!

@megumin. Год назад

i'm a junior fullstack, learned for few months angular, but I was curious about react too so thank you!

@michielarkema Год назад

Hell yeah Kyle, this is a fantastic video showcasing all the important concepts of React.

@monkey_scherzo7602 11 месяцев назад

I'm a react frontend developer, but whenever I watch your videos there's always something new I learned. Thanks so much for details things out Kyle!

@user-hr2ye6tf8x 9 месяцев назад

Where did you started learning react give some tips I'm absolutely beginner

@Beny123 11 месяцев назад

I have got your React Simplified course . And I know React enough to build an app but this crash course is good for review and consolidating the essential concepts . Thanks!

@MyChannel-kq4dv 4 месяца назад

Thanks! As a 1-month React developer, this video is amazing! for all the people who want to understand React basics for the first time, I low-key think the explanations are too fast

@MichaelDavins-id7vx 2 месяца назад

yep but perfect for experienced programmers

@miguelbautista3628 2 месяца назад

I agree, this could overwhelm you as a first timer, but if you've got some experience and still feel like you don't understand react, I think it's great.

@A__Singh__ Год назад

Well explained. I'm new to React and this is my first video. I now feel like an experienced React Developer 💯👍💪

@whiskers08spot09 3 месяца назад

I like how I'm trying to code along and I'm attempting to code ahead of you, and every time i run into a certain mistake, you address it xD. Just goes to show how experienced you are at this.

@ToumaRenshi Год назад

It's one awesome video! I have learnt more here than other videos. You have explained so much that I was able to understand your all code. For me, the hardest part it comes when I try to build a simple application by myself. It takes me a lot of times that I have to think what and when I should first do. I'd love to hear some advice from you. Thank you, greeting from Poland!

@degenyakuza Год назад

Hi, Its part of the learning journey don’t get frustrated keep working on project that you “love” and care about just don’t get frustrated or discouraged after watching other senior devs figure out the things quickly. Don’t compare yourself with senior devs instead compare yourself with your own past self to feel motivated. Don’t give up anon!

@ToumaRenshi Год назад

@@degenyakuza man! thanks you for kind words! i am appreciate it!

@Mogwai88 Год назад

The way to get over this is to begin diagramming in word, plaintext in a .txt file exactly what your project is and what it should do. First a high level description, then break down each part into a more precise description, then finally (in words) the logic for how you will build each part. Then code it up by following the steps you wrote out. The key is to separate the logic of the app from the actual writing of the code, this ensures that the task never becomes overwhelming. Good luck!

@zhewu1212 Год назад

One of the best getting start with React on RU-vid... Good Job~

@chrissifundza7199 Год назад

Big fan from South Africa, Thank you for teaching us, I have learnt a lot from you, I basically learnt everything from your channel, Please come to South Africa

@floppitommi123 Год назад

bro you seriously make these stuff super simple to understand

@akifahmed9610 Год назад

Appreciate your work , looking forward to more project based content for learning

@Veneris96 Год назад

This video has been a literal life saver. Thank you mate, seriously.

@fespamo Год назад

I started React since one month and Im struggling with it , but this video is helping me a lot thank you

@chukwuemekandiukwu1220 28 дней назад

I hate ti say this but "bro code " is the best react teacher or the best of the best at teaching anything programming.

@willgt911 2 месяца назад

Excellent tutorial. Covers important things that I need to know when just starting out!

@_Kunal_Pawar 4 месяца назад

I really learnt a lot from watching this video over and over. Many thanks! ❤

@manohartimothy5825 Год назад

I was quite impressed the way you explain things, when I saw some of your videos... So I gone to follow step by step to follow you... I am so eager to learn from you... After going through this video I will share my opinion , even though it will take me few days go through....Manohar

@karlomoonblade Год назад

a very good refresher, last I coded in react was almost a year ago, I guess this basics react concepts hasn't change that much

@mrbhaskarn Год назад

Hello kyle, Your videos really me helped me get a job. Thanks for amazing video courses.

@Basil_Porphyrogenitos Год назад

Thank you so much great revamp on React after 9 months working with Vue

@sayednadirshahnadir6760 Год назад

Thank you for such informative and learning video. I got a lot, please make more videos that develop a complete React Project as well.

@Tywele 11 месяцев назад

That was an amazing tutorial. It made so many things clearer for me.

@tmk2462 3 месяца назад

Hey Bro, to me you re one of the best english teacher of youtube. Your code is really clean and logic. I wish you could do a recent FullStack beginner free project with React/ tailwind / Redux. would be amazing.

@RR-et6zp Год назад

Perfect timing. Thanks, you're a legend

@vijay_explorer Год назад

Thank you for this great tutorial, very neatly articulated. Best for experienced professionals.

@MagnusDuru 10 месяцев назад

Right? For professionals right?

@davidswaroop79 Год назад

Thank you man. Was searching for this.

@Ketrixx 5 месяцев назад

I started by watching Typescript React tutorial (idk ts at all ) and as a newbie, I'm shocked at how much clearer and easier to understand Props are in Typescript when type is defined. Anyway great tutorial and thanks

@mykhailoterekhov3600 11 месяцев назад

Thank you, very nice video that focuses on the essentials, keep up the good work!

@labialkosta261 Год назад

thanks kyle for your effort, we need more typescript tuto, have a great day

@AlejandroOrtiz-ob6bq Месяц назад

Awesome tutorial from a knowledgeable natural teacher. Thanks!!

@diego1552 Год назад

Thanks for these great videos on React, please continue making these!

@lewisbowes4921 Год назад

Thanks so much for uploading this! Great tutorial.

@kelvins.kumordzi3203 Год назад

Just when i needed it most thank you Kyle!!

@codinginflow 3 месяца назад

Regarding 23:44: It's actually totally fine to use the non-function version of the state setter inside event handlers. The documentation specifically states this. Great video overrall!

@rafaelhernand3z Год назад

Keep it coming! Quality content!🎉

@vladguzun2522 Год назад

thank you for the tutorial,easy to follow for a beginner react dev

@gillguimaraess4143 5 месяцев назад

Very concise. Thanks for the lesson!

@Dziejkoo 5 месяцев назад

I've never seen such a great tutorial like this one where every single minute is worth 10mins

@user-zy6ok5sh2y Год назад

Great content in a short time. Thanks!

@les_dev 8 месяцев назад

this is such a great tutorial. thank you, thank you, thank you!

@niat.6496 11 месяцев назад

Thanks so much for this tutorial, this is amazing!!

@henrythomas7112 2 месяца назад

I like your video presentation. It is informative too, at the same time. Thanks a lot for your guidance!

@TrendingCarsChannel 11 месяцев назад

This has been very useful. Thank you

@offroaders123 Год назад

This was a great video, thank you!

@hongkaihuang1503 Год назад

This guy definitely teaches me everything about react！！！

@ewaevva4375 10 месяцев назад

You could also give the input the required attribute. Plus of course the validation in the handleSubmit( ) function

@joshuajaydan 11 месяцев назад

This is a really good tutorial. Thank you.

@omaracelys3217 Год назад

As usual awesome tutorial ! can you do please a tutorial on React Redux ? i would like love to hear your take on it ! and if you can explain what problem it solves, that would be great . Hope you have a good day.

@feastofsteven1214 3 месяца назад

Great video -- really wish you had mentioned installing node.js earlier as it set me back an hour to figure that out haha - thanks!

@MrVipulLal 11 месяцев назад

Thanks for the awesome video, Kyle

@subhrojyotineogi9089 Год назад

Great Tutorial to start with the basics.

@tulasireddy6557 Год назад

Thank you very much for your valuable knowledge 🎉❤❤❤❤❤

@D7460N Год назад

Thank you very much for doing this video. I will be signing up for your React and your JS courses shortly. Question, is building out a web application first with vanilla HTML and CSS (GUI logic) before adding the JS for interactivity/business logic (principle of least power) an imperative or declarative approach? Thanks again!

@sharifsircar Месяц назад

I am so glad this pretty similar to vue 3, I am not relearning another framework all over again 😅

@ejemeniboi1732 8 месяцев назад

Anytime I take a break from react, I always come back to this video to refresh.

@peteharrison3241 9 месяцев назад

Really is the simplest React tutorial I've read to date, thank you. The only thing I still can't grasp is where you use the three dots e.g, ,,,todos I'm thinking about your course as this has been the best I've come across.

@peteharrison3241 9 месяцев назад

I found it, wow that's powerful

@link2pk Год назад

Thanks Kyle 👍 For me, the normal playback speed for kyle videos is 0.75 😛

@alanr5143 Год назад

😂 Dude, I'll have to do the same. He speaks really fast ⏩⏩.

@link2pk Год назад

@@alanr5143 haha 😆

@AchiragChiragg Год назад

@@alanr5143 lol same. I keep checking if the playback speed is 1x every once in a while.

@albirtarsha5370 Год назад

Interesting. I think he may have compressed the video a bit.

8 месяцев назад

Impecable video, thanks!

@RajdeepAnandGPlus 8 месяцев назад

good video for revising your React basics

@frat1961 8 месяцев назад

my native language is not english and my english is not good but when this man speak i can understand whole thinks. it lives up to its name.

@abhishekupadhyay6938 Год назад

Really insightful...thank you for sharing...

@yavergazi 9 месяцев назад

Great video ,thanks Kyle

@MrJacquers Год назад

Very helpful, thanks! What are your thoughts on Signals? I see that Angular will be using them as a new change detection strategy in an upcoming version and there's a npm package available to use them in React. Seems like it can be useful.

@lonniesmith8093 Год назад

Awesome as always!

@harvard004 3 месяца назад

Out of all your videos - this is the perfect talking speed

@reezayn Год назад

biggest fan of your efforts kyle 🙋

@bikidas5473 Год назад

Another day another todo app

@McRyach 8 месяцев назад

4:37 Thank you. Your sandwich 🥪 analogy makes me salivating 🤤

@bilalsaleem100 6 месяцев назад

Great video and thanks!

@antoniopwr Год назад

Great vídeo, i would like too see a proyect using vue too!

@erice.3892 11 месяцев назад

Thanks for this man!

@toddcamnitz6164 Год назад

Hey Kyle, I see I'm not the only one with this issue: the custom checkbox doesn't render. Console log shows all expected values are getting returned, and commenting out the css on line 105 that hides the default list item check box pops up the default box in-line there and *that* box has expected behavior, so I'm assuming there's some issue on my end with your css that does "content: ""; on line 131... though in fact I see I can't get any of the display attributes for that custom checkbox to change on click. If you have time to comment on this it'd be a great learning experience...