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?
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.
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
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.
@@MichaelDavins-id7vx Absolutely felt like this was great for me as a guy who has worked with React a long time ago and with Angular. Feel up to speed.
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
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
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."
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!
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.
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!
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!
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.
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.
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
Thank you for your dedication to teaching! I learnt the 'gist' of React, but I think it's my lack of JS that's holding me from understanding some parts of this video, like the use of parse in the JSON part in the end 39:45. Thank you for pointing out common beginner mistakes as well!
it's a pretty handy tutorial , in my perspective though i have noticed with quite a few videos is that sometimes you don't explain WHY certain things happen which makes things confusing. For example : the difference between doing setTodos([]) and using the functional form setTodos((currentTodo) => {return []}) . you dind't really explain why that the update in setTodos([]) will only actually take effect until the handler has been finished.
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
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.
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.
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
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.
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!
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
Library, not a framework, technically. For education accuracy. Not trying to split hairs or be mean lol I never am. I think it's just a basic important distinction that I would be remised if I didn't mention in the comments here. Google library vs framework and one may lead you down a whole different path and set of criteria such as Nextjs. Love this video, wanted to brush up on the foundations of react. I'm trying to get into the field after being a web UI designer for over 15 years. Worked with plenty of developers and even during that time did my own development professionally, but only the past few years have I been solely doing front-end work.
I see what you have done here and I like it, using your personal blog as a middleman while rerouting to google but making sure the content over there is not just a piece of skipper text. The content covered was great but your explanations seemed incomplete and as if u wanted to finish it off as soon as possible. Great work despite that.
thank you jesus for actually telling people text labels are supposed to be clickable and the proper usage of the tag. Every time I use a webapp or form that doesn't allow you to click the text because the webdev didn't use a freakin label I die inside a little more.
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!
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.
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!
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!
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!
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
Web components is a W3C initiative started in 2012. As such it doesn't rely on React to work. Even if React bring useful tooling to ease the creation, testing and use of web components, I would advise anyone to don't use it, but instead learn and keep close to the W3C reference API instead. This way you will be in full control of how Web components works, so be able to use them without any JavaScript framework. The best dependency is no dependency :-)
I can see what you are trying to say but if it worked liked that, literally every framework will become obsolete. Web components are a pain to work with and even if someone wants to build an app with them, they would most likely go with a framework like Stencil || Lit that make it way easier to build web-components. And if we ditch React or any other framework for Web components, we will pretty much lose the entire Eco System that revolve around the frameworks. Also, web components can't be SSRed so it can lead to worse SEO. Most websites that use web components are server-side rendering with semantic HTML & then client-side rendering web components. (Which IMO is slow && unneccesarily complex). Like take TH-cam for example, it literally can't show you anything if you disable JS because it is completely done on the client, only the initial shell of HTML (loading part) is server-side rendered. If we compare this to React + Next.js for example, it will generate the HTML on the server & then do most of the computation on the server (with server components and stuff) and then send the HTML that has some content first before partially hydrating the app. (You can test any next.js site by disabling JS, you will notice that the content is there but the page isn't interactive). And it has been over 11 years since web components were added but still it has seen very minimal adoption.
Agreed! Thanks for saying what many of us who've been around a while were thinking. Now that browsers natively support what frameworks were built 10 or so years ago to overcome, frameworks are (technically) technical debt, destined to go the way of Flash, ActionScript, Ext, and the Dodo bird. Browsers themselves are now the framework. That said, 10 or so years of development is a lot of dependencies to wean off of for DEVs, so I don't think frameworks in general are going anywhere soon. To your point though, the HTML/CSS I wrote 10 or so years ago still works today and will probably work in another 10 years. The only dependencies we should be tracking are the browsers themselves. The framework replacement has already arrived IMHO, and the first to implement it correctly (follows browser standards) across the board will be the next Angular, Vue, and React combined, because it will use natively supported open-source browser functionality to do it. With the advent of CSS :has() and container queries, web applications can now NATIVELY, quickly, and easily detect and react to dynamic data/content changes without any JS, let alone an entire JS framework. No build/compile process needed. Buttons need not do anything but fetch, push, and or update said content/data. The GUI (HTML/CSS template) will handle the rest. This lends itself to a "truthful" loading state between when data is called (button click) and when data changes arrive (GUI reacts to data change) as a natural data workflow process, out-of-the-box. Data agnostic and framework agnostic web applications. Complete "separation of concerns".
Always love to see such comments. I can confirm it is css related. if you comment out the li css or just view the page without css checkbox works. seems to be a common problem with checkboxes and firefox, couldnt find the specific problem in css quickly. Some other post suggest looking into proton ui for firefox and that being the main issue.
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...
33:04 Oh boy.. I missed the bit where you deleted ': newItem' which took.... well, too long... to figure out. I figured it was a framework issue or something along those lines, turns out I just didn't pay enough attention. At least I ended up really going through the code which could be considered a win, I guess. ^^ Thanks for the tutorial.
First of all, this is a great video, but I wouldn't recommend using the latest CSS features in a video for beginners. I was using Firefox, which doesn't support the :has selector, so the checkboxes didn't work visually. I found this problem quickly, but I can see how it could be frustrating for beginners.
Is it possible that there is no other way than passing props from parent to child and than to another child and so on... I already see how it can get reaaaaly messy when there are more nested components. Gets hard to track from where the prop is coming from. Great tutorial. A lot of useful stuff in one short video.
This would have been immensely overwhelming if I hadn't already learnt Swift over the last year. Being able to build web apps is HUGE but the react/javascript syntax is awful when compared to Swift. Thanks for the tutorial.
Great video. My question is, why did you not just include the helper function toggleTodo and delete todo in the TodoItem.jsx file? Just like with handleSubmit helper function in NewTodoForm.jsx.
Can someone explain the use of currentTodos, what is currentTodos and why was it not defined earlier, why do we need to use currentTodos instead of just working on todos
I built the same app with TypeScript but I faced an issue with the css, where the checked property is not handled properly, when I click on the checkbox the state changes but the checkbox doesn't change (still not checked)...
Had the same issue even in JavaScript, changed from Firefox to Chrome and the checkbox now works fine. Either Firefox has a bug or Chrome supports a non-standard feature.
For anyone wondering why this isn't working and also didn't scroll far down the comments to see @jakob8797 comment, firefox doesn't support :has() yet which is used in one of the css selectors for the checkbox
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
React Simplified Course: reactsimplified.com
Any update on when you will release your course?
I am not getting ads in your TH-cam channel. Did you forget to monetize the channel?
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?
@@ninnin253 That's the shorthand syntax for JavaScript
I think I need some Adderall. lol
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.
If you only started out with Svelte you would have known to not touch React with a 5 meter stick...
No offense but no one asked about the book tho 🌚
@@michaelsazz3545 I did :)
@@michaelsazz3545 I did also ask for the book ;)
Thanks @kevinvikan3609 for the information it certainly helps!!
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
yep but perfect for experienced programmers
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.
I totally agree - I played them at 0.75 and was a lot easier to understand
@@MichaelDavins-id7vx Absolutely felt like this was great for me as a guy who has worked with React a long time ago and with Angular. Feel up to speed.
I always wanted to learn React over my lunch and get promoted in the afternoon 😁
40 minutes for lunch is nice!
Hahahhah
Me: You guys get a lunch break...!?
Wait...u have a job without learning react?...what job
@@michaelsazz3545a blowjob, he gives them for free
For people like me who is not new to programming. This is incredible tutorial. Saved tons of time.
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
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
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."
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!
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.
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!
Where did you started learning react give some tips I'm absolutely beginner
Love the talking speed. It keeps me concentrated and constantly engaged. Maximilian's speech is so laid back I keep falling asleep during the course 😂
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!
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!
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.
bro you seriously make these stuff super simple to understand
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.
I found it, wow that's powerful
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.
I started React since one month and Im struggling with it , but this video is helping me a lot thank you
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
I hate ti say this but "bro code " is the best react teacher or the best of the best at teaching anything programming.
Thank you for your dedication to teaching! I learnt the 'gist' of React, but I think it's my lack of JS that's holding me from understanding some parts of this video, like the use of parse in the JSON part in the end 39:45.
Thank you for pointing out common beginner mistakes as well!
You have made learning React so easy and less SCARY. Thank you so much.
Loved this condensed "Crash Course" format, learned so much in very little time, much appreciated
it's a pretty handy tutorial , in my perspective though i have noticed with quite a few videos is that sometimes you don't explain WHY certain things happen which makes things confusing. For example : the difference between doing setTodos([]) and using the functional form setTodos((currentTodo) => {return []}) . you dind't really explain why that the update in setTodos([]) will only actually take effect until the handler has been finished.
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
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.
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.
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!!!!
i'm a junior fullstack, learned for few months angular, but I was curious about react too so thank you!
I've never seen such a great tutorial like this one where every single minute is worth 10mins
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
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
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.
I really learnt a lot from watching this video over and over. Many thanks! ❤
Thank you so much great revamp on React after 9 months working with Vue
One of the best getting start with React on TH-cam... Good Job~
Great video! I haven't done react in over a year and this was a perfect refresher!
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!
Anytime I take a break from react, I always come back to this video to refresh.
Excellent tutorial. Covers important things that I need to know when just starting out!
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
Congratulations! Excellent explanation of the subject, that makes React look easier than it really is!
Awesome tutorial from a knowledgeable natural teacher. Thanks!!
Library, not a framework, technically. For education accuracy. Not trying to split hairs or be mean lol I never am. I think it's just a basic important distinction that I would be remised if I didn't mention in the comments here. Google library vs framework and one may lead you down a whole different path and set of criteria such as Nextjs. Love this video, wanted to brush up on the foundations of react. I'm trying to get into the field after being a web UI designer for over 15 years. Worked with plenty of developers and even during that time did my own development professionally, but only the past few years have I been solely doing front-end work.
Really good tutorial. I learned a lot going through this.
I see what you have done here and I like it, using your personal blog as a middleman while rerouting to google but making sure the content over there is not just a piece of skipper text. The content covered was great but your explanations seemed incomplete and as if u wanted to finish it off as soon as possible. Great work despite that.
thank you jesus for actually telling people text labels are supposed to be clickable and the proper usage of the tag. Every time I use a webapp or form that doesn't allow you to click the text because the webdev didn't use a freakin label I die inside a little more.
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!
Out of all your videos - this is the perfect talking speed
Thanks Kyle 👍
For me, the normal playback speed for kyle videos is 0.75 😛
😂 Dude, I'll have to do the same. He speaks really fast ⏩⏩.
@@tekenplay haha 😆
@@tekenplay lol same. I keep checking if the playback speed is 1x every once in a while.
Interesting. I think he may have compressed the video a bit.
thank you Kyle! I went through this guide and refreshed a few concepts. Short and straight to the point!
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.
4:37 Thank you.
Your sandwich 🥪 analogy makes me salivating 🤤
Hello kyle, Your videos really me helped me get a job. Thanks for amazing video courses.
Well explained. I'm new to React and this is my first video. I now feel like an experienced React Developer 💯👍💪
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!
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!
@@ethisfreedom man! thanks you for kind words! i am appreciate it!
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!
The hair is legendary. As are the videos.
biggest fan of your efforts kyle 🙋
Another day another todo app
Hell yeah Kyle, this is a fantastic video showcasing all the important concepts of React.
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
Great video -- really wish you had mentioned installing node.js earlier as it set me back an hour to figure that out haha - thanks!
good approach for making a new updated video for your react tutorial with vite, especially since create-react-app is dead.
Thanks. I also think this tutorial is much better explained than my old one.
I am so glad this pretty similar to vue 3, I am not relearning another framework all over again 😅
Thank you man. Was searching for this.
Thank you for this great tutorial, very neatly articulated. Best for experienced professionals.
Right? For professionals right?
Awesome tutorial! Thanks Kyle as always! 👍
This video has been a literal life saver. Thank you mate, seriously.
Loved the video. You just simplified everything
This guy definitely teaches me everything about react！！！
Web components is a W3C initiative started in 2012.
As such it doesn't rely on React to work.
Even if React bring useful tooling to ease the creation, testing and use of web components, I would advise anyone to don't use it, but instead learn and keep close to the W3C reference API instead.
This way you will be in full control of how Web components works, so be able to use them without any JavaScript framework. The best dependency is no dependency :-)
I can see what you are trying to say but if it worked liked that, literally every framework will become obsolete.
Web components are a pain to work with and even if someone wants to build an app with them, they would most likely go with a framework like Stencil || Lit that make it way easier to build web-components.
And if we ditch React or any other framework for Web components, we will pretty much lose the entire Eco System that revolve around the frameworks.
Also, web components can't be SSRed so it can lead to worse SEO.
Most websites that use web components are server-side rendering with semantic HTML & then client-side rendering web components. (Which IMO is slow && unneccesarily complex). Like take TH-cam for example, it literally can't show you anything if you disable JS because it is completely done on the client, only the initial shell of HTML (loading part) is server-side rendered. If we compare this to React + Next.js for example, it will generate the HTML on the server & then do most of the computation on the server (with server components and stuff) and then send the HTML that has some content first before partially hydrating the app. (You can test any next.js site by disabling JS, you will notice that the content is there but the page isn't interactive).
And it has been over 11 years since web components were added but still it has seen very minimal adoption.
Agreed! Thanks for saying what many of us who've been around a while were thinking.
Now that browsers natively support what frameworks were built 10 or so years ago to overcome, frameworks are (technically) technical debt, destined to go the way of Flash, ActionScript, Ext, and the Dodo bird. Browsers themselves are now the framework.
That said, 10 or so years of development is a lot of dependencies to wean off of for DEVs, so I don't think frameworks in general are going anywhere soon.
To your point though, the HTML/CSS I wrote 10 or so years ago still works today and will probably work in another 10 years. The only dependencies we should be tracking are the browsers themselves.
The framework replacement has already arrived IMHO, and the first to implement it correctly (follows browser standards) across the board will be the next Angular, Vue, and React combined, because it will use natively supported open-source browser functionality to do it.
With the advent of CSS :has() and container queries, web applications can now NATIVELY, quickly, and easily detect and react to dynamic data/content changes without any JS, let alone an entire JS framework. No build/compile process needed.
Buttons need not do anything but fetch, push, and or update said content/data. The GUI (HTML/CSS template) will handle the rest. This lends itself to a "truthful" loading state between when data is called (button click) and when data changes arrive (GUI reacts to data change) as a natural data workflow process, out-of-the-box. Data agnostic and framework agnostic web applications. Complete "separation of concerns".
Great tutorial, there is an issue running it on firefox when it comes to checking the box. I believe that it is related to the css
Thanks for pointing that out!
Always love to see such comments. I can confirm it is css related. if you comment out the li css or just view the page without css checkbox works. seems to be a common problem with checkboxes and firefox, couldnt find the specific problem in css quickly. Some other post suggest looking into proton ui for firefox and that being the main issue.
thanks! before the tutorial I was scared about React, now I am confused too - lol.
jk, have to watch it a couple of times.
Perfect timing. Thanks, you're a legend
You could also give the input the required attribute. Plus of course the validation in the handleSubmit( ) function
Thank you for such informative and learning video. I got a lot, please make more videos that develop a complete React Project as well.
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...
Very concise. Thanks for the lesson!
thanks kyle for your effort, we need more typescript tuto, have a great day
this is the best react crash course, can not recommend it enough for beginners!
im a beginner and it overwhelms me , coding is so fast, also explaining it briefly and very quick
33:04 Oh boy.. I missed the bit where you deleted ': newItem' which took.... well, too long... to figure out. I figured it was a framework issue or something along those lines, turns out I just didn't pay enough attention. At least I ended up really going through the code which could be considered a win, I guess. ^^
Thanks for the tutorial.
Appreciate your work , looking forward to more project based content for learning
Well done, Kyle.
Breaking it down into components is very much like an Object Oriented way to think.
I like your video presentation. It is informative too, at the same time. Thanks a lot for your guidance!
Thank you, very nice video that focuses on the essentials, keep up the good work!
Thanks so much for uploading this! Great tutorial.
You are the king 👑 of web development
First of all, this is a great video, but I wouldn't recommend using the latest CSS features in a video for beginners. I was using Firefox, which doesn't support the :has selector, so the checkboxes didn't work visually. I found this problem quickly, but I can see how it could be frustrating for beginners.
Is it possible that there is no other way than passing props from parent to child and than to another child and so on... I already see how it can get reaaaaly messy when there are more nested components. Gets hard to track from where the prop is coming from. Great tutorial. A lot of useful stuff in one short video.
That was an amazing tutorial. It made so many things clearer for me.
Just when i needed it most thank you Kyle!!
This would have been immensely overwhelming if I hadn't already learnt Swift over the last year.
Being able to build web apps is HUGE but the react/javascript syntax is awful when compared to Swift.
Thanks for the tutorial.
thank you for the tutorial,easy to follow for a beginner react dev
Great video.
My question is, why did you not just include the helper function toggleTodo and delete todo in the TodoItem.jsx file? Just like with handleSubmit helper function in NewTodoForm.jsx.
How did you do that? So much information in only one short video. Bravo.
this is such a great tutorial. thank you, thank you, thank you!
Can someone explain the use of currentTodos, what is currentTodos and why was it not defined earlier, why do we need to use currentTodos instead of just working on todos
Great content in a short time. Thanks!
I built the same app with TypeScript but I faced an issue with the css, where the checked property is not handled properly, when I click on the checkbox the state changes but the checkbox doesn't change (still not checked)...
Had the same issue even in JavaScript, changed from Firefox to Chrome and the checkbox now works fine. Either Firefox has a bug or Chrome supports a non-standard feature.
@@markk5764 I believe you are right. I had the same problem. It went away when I did not import the styles.css.
@@markk5764I had the same problem
For anyone wondering why this isn't working and also didn't scroll far down the comments to see @jakob8797 comment, firefox doesn't support :has() yet which is used in one of the css selectors for the checkbox