🔰⚛️ | Intro to React + Hooks | Build a Todo App

[Music] hello friends welcome to coding garden with CJ welcome to an introduction to react and hooks this is going to be a complete and total introduction mainly focused towards beginners we're not going to talk about redux we're not gonna get super complex really just introducing you to react with hooks welcome to the show everyone look at all the wonderful drops I hope you all are doing well and just real quick close to two years ago I did a livestream called intro to react build a to-do app and today we're going to build the exact same app but we're going to use only hooks so in in this livestream I use class components and that was the main way of doing react back back then but nowadays hooks is the new cool thing and I actually have an app in production at work where I'm using nothing but hooks I have zero classes in my entire react codebase so today I'm going to teach you what is react and we're gonna learn about it from the perspective of hooks welcome everyone let's say hello and thanks for the follow-up Preston Keeley hello mister first hello William times we're live now we're live and good night Alka thanks for dropping by first but second and with awesome says can't wait for my favorite topic I am NOT a full-time youtuber I have I have a day job I stream whenever I can and I work from home a lot but nowadays we're forced to work from home but after the stream I got to go to work I mean I'm gonna stay here but I'm gonna I'm gonna work from home it will be fun I agree yeah I don't plan to do any Redux today yeah it's gonna be just the basics of react we could potentially show the use reducer hook but we're not really even gonna use that this is like basics basics back to basics yeah should be fun hello rich let's say hello to everyone who said hello Jorge's is finally able to catch a stream how's the King it's pretty good I got plenty of food stocked up it's fun to stream for so many people so many people are watching right now because everyone's at home so that's always fun and I'm used to being at home a lot so it's not much of a difference for me hello sue John hello Prem Excel opreem chele hello one line of me hello Reb hello Julian hello Ashwin hello Lucas hello casual game play hello Assefa hello soccer rough shot says my wife is also following your videos that's good everyone can learn to code I mean hello Ilana hello Jonathan hello schnell ow hello Mohammad I think fluorines and in the chat cool hello Franz hello sacred gaming hello Yannick hello Raj hello goop reeds hello your Herbie there's this new emote on on YouTube I don't know what this is about elbow cough what the heck where did these come from elbow bumped elbow cough that's a DAB that's not an elbow cough hello boys and hello sharam good morning Paul good morning cz how about could I do a video on Kafka I've never worked with Kafka I know the word I used it before hello Raj yeah these are new does anybody know what's going on with these emotes elbow cough which is technically a DAB and then there's a elbow bump oh you know are these for for the fact that coronavirus is a thing right now and you should be coughing into your elbow and not shaking hands is that what those are for that's crazy and that's really funny um hello Cheyenne welcome happy Friday Scott happy Friday to everyone while true hello name basically we've got a lot of hello is to say in hello Madden hello class hello crow says I love your content you're awesome thank you very much crow hello Alan I have a 2015 MacBook Pro so this is the MacBook that still has a full HDMI port it still has USB ports I am very reluctant to get a Macbook that only has USB seaports on it yeah hello Zed hello hello from Turkey can I say hi to Daniel Moran he's feeling sick sick Daniel Marin I hope that you get better get lots of rest to drink lots of fluids and yeah I hope you get better hello my toes hello cool hello super chicken burritos who is a fellow full-stack dad that's good and hello fun hello nyan who's catching me like that's good in hello Vale from Italy hopefully you're staying safe there in Italy Oh x-act from Italy as well who star sex is I just got a plural cites description to learn hooks well this is live I make mistakes so that money that you spend on that Pluralsight subscription is probably well spent you can feel free to ask any questions related to react or JSX or hooks but this is by no means some official course that you should pay money for this is just this is just us we're just hanging out first what's up a TD it's like waiting for my favorite show that's nice I'm live to do is a list of how do I translate to do what's a more general term for to do a list of things that need to be done a task list hopefully that's a good enough different way of talking about it but typically whenever people are learning a checklist I like that thank you D trouble people are learning front-end frameworks or learning programming a checklist is one of the first things that you build to learn the mechanics of that thing that you are learning so that's what we're gonna do today hello Andrew yeah we're live howdy quite and telephone do I have any ideas regarding web RTC I actually do yeah I know quite a bit about web RTC maybe I'll do some streams about it in the near future but yeah web RTC is really cool you can do peer-to-peer chat and peer-to-peer video calls how much is the data scientists salary in your country I have no idea hello group reached hello Sydney hello Carlos I'm doing good hello Dana Chiu hello MIT sick thanks for the follow by Anna Pro mano lui though hello and evil of the drop gains enabled now I didn't have it on the second screen hello Lauren how are you doing what's up what's up a quick shout out I guess today's the last day but there is seven days seven websites which Florence started and I'm sure he'll help keep allowing submissions but basically this is a challenge for you to build one website a day for seven days and you can submit them here so I'll hear this and it's a good way to keep you occupied in these times when you might not know what to do and you're you're stuck at home oh it's today's the third day okay I thought it was I thought it started on Monday but that's good to know so you can still technically get in there and like I mentioned I think he's gonna leave the site up even after it's over so yeah and he'll Ophion react router Dom no I think I'm gonna I'm gonna avoid all the extra bits that you you you you typically need with the react app just to focus on the basics that's the plan anyways we'll get started in about five minutes but yeah I'm not gonna do routing I'm not gonna do testing this is like what is react for people that know absolutely nothing and you should you should know a little bit of JavaScript but that's really the only prerequisite for for this in hello Andrew well thank you Chrome say my name Fiat hello Dominica hello if yawn well yeah so this is I'm streaming on YouTube as well and immediately after the stream is over its available to watch on YouTube and all of the code will be on github if you look below the video both on twitch and YouTube there's a link to this repo this is where I'm gonna push up all of the code and if someone reminds me I might actually set up a vs code live share so that you can see the code in real time while I'm doing it so remind remind me to do that all the cool kids are doing hoax yeah honestly hooks make react bearable react in my opinion is very cumbersome and hooks make it a little less cumbersome so I like hooks hello Jonathan please explain use effect I will try to the thing is this is also a very basic act app that we're gonna build we're not calling any API so we don't necessarily need to use use effect however at the end if we have time and I haven't talked about it yet remind me hello Raj hello ah hello Franz hello dope boy Rex it's been a while welcome back I'm in Denver Colorado that's where I am good morning Terminal - hey Kevin got sent home early working from home for the first time cool I love your thank you salmon I was having like weird hair issues there's something I don't know it's okay this morning hello Renzo from Peru hello Murdoch it's been a while welcome um I guess if you can stall you can call never leaving my house quarantine I guess that technically is quarantine I'm not sick though but I am staying home I am NOT leaving I am a software consultant so I I write custom software and I'm a full-stack engineer and an architect and the chief engineer at my company so I architect large projects and build them mostly with full-stack JavaScript and as a consultant my company gets business from other companies that are looking to build custom software so I I get to work on a lot of new projects it's I'm not I don't work at a product company I could potentially talk about the context API yeah so if you look at the the the checklist that's linked in the description these are all the things that we're gonna cover and basically what we're gonna do first is we're gonna build the entire app in one single component and there shaggy Thank You Shaggy we're gonna build the app in just one big component and then after we've done that we're gonna we're going to take it and break it up into smaller components so we'll talk about what components are we'll talk about how to pass props to components yeah we'll build multiple components from there the next step would to be used something would be to use something like the context API where you can lift all of your state up to the top and instead of having to pass props you can use the use context hook instead but that's really like next steps and we can talk about that after we get the the basic app built what do I use on using learn to manage react client and a node server I think if they share certain things if you're using typescript in both it's very useful because you could create a shared interfaces library that both your front-end and back-end use and that's what learners good for it's a it's a mono repo tool and allows you to share code between projects but if your front-end in your back-end don't really have anything in common and you don't need to share any code might not make as much sense to use learner casual gameplay with the donation thank you so much casual gameplay it's been a while since I've seen you in the chat much appreciated and casual gameplay says thank you for your stream well thank you for watching and thanks everyone for for being here hello Deborah from the Netherlands I'm doing okay hopefully everyone else is doing okay good morning Tim hello Yann I will just tell my boss that I'm learning for work exactly yeah so anybody that's watching right now and your smokes supposed to be working you're just learning you know charge it charge it to the the company learning fund how interesting is the project for you at your work on a scale of one to ten right now my project is super interesting I'm call it a tin tin ten out of ten hello Paul well thank you she well hello Robin um nice hello Kaveri superb voice with tone well thank you I I don't put that much work into it so I have like a mixer and a few of like some some settings going on but that's about it ain't no worries Florin and if anyone wants to check out foreign definitely check out his YouTube channel is it just floor and pop yeah there we go let's see what he's gonna be streaming on file Oh landing page cool so florins been doing um challenges for friend and mentor which is a website that has a lot of different front-end challenges and today he's building a landing page so that's pretty sweet you want to check that out I think could go check out his channel Thank You Jana teen and you know with the super chat let's see what you have to say just one gyro thank you very much much appreciated not required always appreciated yeah happy phone is building a multiplayer game in JavaScript canvas Wow for the coronavirus sneezing stuff I think it is yeah that's super interesting does twitch have any special emotes like that oh hello Christian welcome it's super funny Oh Oh check it out there's all these new YouTube emotes I had no idea I'm gonna need to integrate these into my chat manager there they're catching up twitch they're doing they're starting to do like custom emotes globally available custom emotes Wow hand sanitizer yeah and my chat overlay doesn't know about these yet I have to write the custom code to add those but not today all right let's get started let's say hello to anyone else hello Sandeep from Boston hello cat Olli welcome acids Berg even though view is better yes thing is I love view Jas but I write react on a daily basis and yeah that's the thing super text says any thoughts on X state and state machines for react development X stage is really cool if you haven't heard of it what I like about it is that it is based on principles that have been around for a very long time like before front-end frameworks before someone even uttered the word front-end framework it's based on let's let's see what it what it's called the SC XML specification I think it is but it's it's the specification that talks about like finite state machines and it's it's it's a very general programming thing and then X state has implemented it in JavaScript so that you can use it with other front-end frameworks it's pretty cool I like that you can generate charts with it I haven't used it personally but I've at least read about it and yeah it's cool hello RK Tech hello taylored I'm Pikachu says I'm switching from YouTube to twitch Thank You Murdoch with the tip let's see what they have to say thank you so much not much but wanted to say thank you watching all your vids has helped me with node electron application development that's good to hear Murdoch thanks for the super chat much appreciated um hello Sandeep hello / cells here oh I I missed your message I'm sorry I think it said long time no see but hello I really need a way to undo that hello hard shot hello John d hello Liam hello Mehdi hello yo go hello Freddy bugs hello an honest smooth hello Ali hello Shawn hello Jessica hello good morning Levi it's been a while welcome what is what is this twitch clip Andrew clips dot twitch TV hmm I have to be very careful when I'm when I'm loading links are we about to get Rick Rolled get ready everyone cool um thank you Andrew hello Josh hello Pachuca puts hello so SWAT hello tsmart hello Raja hello Noah hello did you have 10 seconds to say hello and then I'm gonna have to get started hey Geoff Ali Wehbe what's up it's been a while hopefully you're doing well hello buddy hello oh gee Jake hello shaggy hello Andrew hello G hello Thomas hello doc what's up doc how to deal with the situation when the work at the project at work is boring I know the feeling talk to your boss because that is your Amata yes my favorite drink hashtag not sponsored but I mean I might I this is this is a good drink I have a lot of them hello Gon's hello @eo hello I'm Pikachu hello a random Tim hello rick astley hello Omar hello assess what hello Jabba's hello Wolfgang oh yeah so uh if you were watching the two streams ago there was a kitten that came into my window and was like meowing at the end of the stream but we found their home I posted on this app called next door which you in I don't know if it's in other countries but in the US you can install next door and say and talk to the people that live around you and so we posted on there and at like 8 p.m. someone messaged and said hey that's my cat and they live like two blocks away so yeah the cat got home hello faithful hello Ann hello Sandeep hello Giggy it's not beer no hello Kabir it's the morning for me I have to go to what I have to start working and like an hour I can't drink a beer hello Viktor I might yeah I'll try to stream ionic rumor cuz that's what I'm I'm building the coding garden mobile app with Sam I'm a full-stack developer but I don't like front-end can I survive only coding back in no js' and rest api's yeah but i if that's the case then I wouldn't call yourself a full that developer because if you call yourself a full-stack developer people people are going to expect that you build front-end apps as well but being a back-end developer is absolutely a career that you can have so yeah well thank you the thinker why don't you just say hello good morning hello I want to thank you for your full-stack tutorial specifically the message bar one oh you're very welcome yeah a lot of people find that useful especially if you're new to coding so yeah all right you're very welcome all right let's do it thanks for the follow Lau thanks to the followers if your um thanks for the follow Messer and thanks for the follow catharsis Bellis let's get started so if you look in the description both on twitch and YouTube there's a link to this to-do list about what we're gonna do and like I mentioned we're basically gonna build the very same app that I built close to two years ago but we're not gonna use any classes we're gonna use nothing but hooks and we're gonna talk about the basics of react so we're gonna talk about JSX the virtual Dom all that good stuff please don't you leave you to the top bar is semi-transparent I have no idea I think that that's just built in I'm not on the latest Mac OS yet okay actually it's slow mode enabled on YouTube I will not use styled components but we can talk about it I mentioned we're gonna try to keep this as beginner friendly as possible I had another donation let's see oh sorry I missed it this donation came from abdun Dante who says and it was five dollars thank you very much when I broke my ankle in January I watched one of your streams almost every day for the next eight weeks finally I get to see you live and I can show some appreciation keep on doing what you're doing thank you so much abundant a much appreciated yeah how do i how do i turn the slow mode on on youtube that was on by default stream settings cool see you later essence park stay safe out there hmm hopefully it's a virtual appointment why is this always so hard to find here it is I found it all right you can only send a message once every 60 seconds okay best of luck stay safe out there and I will now disable the drop game there it's gone okay this stream will be available in this lesson will be available on YouTube immediately after this let's go let's do this can I use this to do app to manage its own development to do this potentially but it won't be done until the end okay so like I mentioned the code the link to this stuff is in the description first stop what is react if you go to react J's org you can see that it calls itself a JavaScript library for building user interfaces so if you're new to web development and front-end development you've probably heard of front-end frameworks react is one of these front-end frameworks it's a library meaning it's just built with JavaScript and you can use it in your JavaScript applications to potentially build user interfaces faster than if you were to just use plain old JavaScript without react it adds a lot of concepts on top of front-end development it's it's declarative it allows you to create components it has a state management built into it so these are a lot of things that you don't necessarily have to do when you're building front-end applications but as you as you start to build larger and more complex front-end applications you would want something like this it is in the the same sphere as things like angularjs so angularjs is also a front-end framework for building applications oh no this is angular this is the old one the new one angular io this is the one that the latest one that people are using there's also a view j/s which is my favorite one but I do I know a lot about the different ones and I can build using the different ones and there's a lot of other ones out there but basically that's what react is it's it's for building front-end applications now react itself calls itself a library it doesn't call itself a framework react is actually a very small library all about building user interfaces some of these other frameworks I talked about have a lot of other stuff built in like routing and more complex state management and styled components and stuff like that with react you have to choose or find other libraries to use with react to do that it's a very basic library and so that's that's what react is we build front-end websites with it any denied front-end framework okay christian is saying how complicated would you say a website has to be for a front for a front-end framework to be an advantage it doesn't really have to be that complex it the thing about using a front-end framework is when you structure your application in this way it can scale more easily in that your application can get more complex you can talk to more api's you can deal with more user interaction without having a bunch of spaghetti code now it's absolutely possible to write react in and it be spaghetti code but the the things built into it allow you to avoid that and build for a way to not have your code be that way so really you see people building really even basic applications with like react in view in angular so it's up to you it's really do you want to I guess another another point being if you're working on a team and everyone is using the same front-end framework you have to all work within the same paradigm whereas if you're just using jQuery or just using vanilla JavaScript there's a lot of different ways you can do things and so if you're working on a team it could be an issue in communicating code so yeah if your site has more than one page you can still do it just one page sites with it yeah is asp.net better than no js' or vice versa it's totally up to you recently asp.net recently a few years ago asp.net got open sourced so similar to how nodejs is open source the asp.net is it's really up to you I like nodejs because I can use JavaScript on the backend just like I do on the front end I don't know what do I think about polymer it's pretty cool this is a framework from Google for building web components I haven't built anything big with it but I think it's pretty cool start we're talking about yeah cool and so I do ask if you have any questions or comments please keep them related to the topic that we're talking about right now and thanks for the follow hexxit donut yeah Aziza saying angular is more for enterprise applications you do see that and it has a lot more opinions than react does so yeah do I have any idea when my use affect call runs twice because you did not pass a array as the second parameter so with use effect you need to pass in what are the dependencies and if whenever those dependencies change use effect will run again if you want that thing to only run one so you can pass it an empty array hello hi guard thanks for the follow Webb you up Demoman made an app in react today that's good I like react but is there a way to use hooks and component did mount together no so if you're using hooks you cannot use them in class components and we'll talk about that okay so that is react that's the basics of react let me know if you have any other questions but we are gonna move on to what is JSX so JSX stands for word is it javascript XML I actually don't even know what is it stance stands for but JSX is actually a custom language that was created for react and basically it's a combination of HTML and JavaScript all in one place well thank you Vijay and so JSX allows you to create your react apps and create your components all using javascript but you will see some HTML style syntax now when we start talking about the basics we'll will and we talked about the virtual Dom we'll talk about why we would need something like this and the thing to know is that when you're writing react applications you don't necessarily have to use JSX your JSX code gets turned into something like this so built-in to react is this function react create element and basically this function will create a virtual Dom tree that can decide whether or not the page should update so this would actually be very cumbersome to write right if ever single HTML element on your page you had to say react create element pass in the tag name pass in the content that would be very cumbersome so with JSX you can write your code like this and then at the end of the day it gets turned into something like this let's look at a more complex render function let's see yeah so for example this render function on the react homepage has like a div and inside of that's an h3 inside of that's a label if we turn off JSX this is what you would have had to write if you did not have JSX create an element div and then there's a nested element inside of it and then a nested of element inside of that so JSX is really just a handy way of writing react components and react render functions without having to say react create that create element over and over and over again so that's what JSX is that's about all I'm gonna say about it and we'll just learn about it as we use it and also I'm gonna skip over this what is the virtual dorm because after once we're creating an app I can talk about and show an example of what's actually happening here so let's create a react we are in this directory okay so I'm in this folder and I'm going to use create react app to create my react up and start using building things and adding hooks and stuff like that hmm okay so we can say npx create react app I think you pass in the name of the folder let's call this to-do app and hit enter so with this you don't have to install create react app globally you can just generate the app it will run it instantly and then generate the application you can check out the create react app website to see other options like you can generate an app with typescript different things like that but we're just gonna do a very basic app so how did you react up into a progressive web application it's actually pretty interesting because when you generate a react app it includes a service worker that caches your files and that's technically be a progressive web app so yeah at work we use higher-order components for the data layer using saga to help manipulate the data and we use pure components for the UI what are your thoughts on what is socks in for with small to medium-sized projects do you mean hoc but I sort of agree like I I recently found ezpz which is a state management library for react and this is a library that makes react bearable for me in that it handles having like global states it's basically like a replacement for redux but it has a lot of cool built-in hooks but this is what I would use and I found myself you may not like this but using a library like this instead of passing props pretty much anywhere that I need to access the store I just use the hook that connects directly to the store I'm not passing a bunch of props around it's a really great way to manage that and you can do very similar things to sagas in that you can listen for when other things happen and do something in response well yeah I don't know if I answered your question but yeah what I recommend learning react in order to learn j/s know so I would say you need to learn JavaScript first you need to learn the basics of syntax in JavaScript the basics of creating functions and variables and manipulating variables and calling functions you need to know those things before you can jump into react yeah not to be confused with script files for After Effects was also have the JSX extension oh that's interesting one question why do people like hooks that much for me it makes it a lot it's your components look simpler I think it's less code HTML in Java Script JSX yeah thanks for the follow they get cracked thanks for the follow the spear in nuts hello this is Tony yeah I'm staying home I am NOT leaving bots on next Jas it's cool it's server-side rendered react but it's cool we will not use Redux today it's gonna be a basic react for yarn users ah very cool hello bark okay we're writing code now there's a lot of people you got a sit we got a talk we can't answer questions but yeah but now you can use hooks with redux and that's the power cool in talking about not having to like pass props and stuff like that what is Hookes explained in ten words we're not there yet we gotta get her we got to write our basic react up okay so I just did the create react app thing and that created this folder called to-do app let's see what is inside so if you look inside of here there's quite a few things and there is a source directory the source directory also has quite a few things and you can see index J s so index J s is our entry point this is how the whole react app gets started and if you're new to JavaScript there might actually be more things in here that you're not necessarily familiar with so with modern react we're using the import and export syntax which is a way of putting your code into multiple files and yeah so that's a thing you should learn about import export syntax and then you see this weird thing we're like we're importing a CSS file inside of a JavaScript file what's going on there this actually isn't JavaScript this is a web pack web pack is a tool for bundling your front-end applications and so this gets spun up and ready to go with web pack and web pack knows what to do when it sees an import for a CSS file and if we look at our package JSON we can see that there are a couple of scripts there is a start script that starts up your react app there's a build script which builds it for deploying to the web testing and then there's ejecting so you can see by default there's not actually that much in this folder right it's just a source directory with some files in it but if there isn't a web pack configuration or anything like that so when you use create react app all of the web pack configuration is hidden behind the scenes of this react scripts library and so you actually can't modify that directly but if you did want to modify the web pack config you could eject it but honestly we don't really even need to know that much about web pack right now to get started we can see this react on render this is what gets our react app up and ready to go and you can see right here is just some regular plain old Dom querying so we're saying get element by ID root and that is where our react application is going to live if we look in the public folder there's an index.html and this is the file that will hold our entire react app but if we scroll down we can see right here there's this div with an ID root so our entire react application is going to live inside of this one little div now that doesn't mean we can't have multiple pages if you've ever heard the term spa or single page application this this is is what we mean by that it's a single page because our entire app lives in this one div but we can use JavaScript to dynamically change what's inside of this div to make it look like there are multiple pages but at the end of the day our entire react app lives in that one little div you can see some other special things in this index dot HTML file they have comments but basically web pack also uses this HTML file to dynamically set your public URL and all that good stuff spa so that's the basics of the react app and like I mentioned index J is our entry point and so we can see right here it imports in app and if we look in the folder app is our very first component so this is a component in react and this allows us to actually render something on the page so before we talk about any more things let's start it up so we can see in the package.json there's this start script and that will actually start up our web pack dev server and we can look at our react app so let's go into the folder we'll do npm run now we'll do an PM start because npm start will call react scripts start which will actually start up the web pack dev server cool and typically this will run on port 3000 but i have like several other things running on my machine so it's gonna run on port 3000 and 6 but for you it's going to run on port 3000 most likely if you don't have anything else running slow down i have a lot to cover and there's a lot of chats so i have to go as fast as possible while also explaining everything that i can and if you watch the vaad you can also slow down my voice if that's a if I'm talking too fast hello Quran welcome how do I use react hooks and Express together those are two totally separate concepts so react hooks would be in your front-end and expresses your back-end you could technically use the use effect hook make an API request 2-year Express back-end but that's basically how they would how they would integrate can we use toe and instead of bootstrap we're not going to use any CSS framework we're gonna keep it super simple elbow cuff oh hello Andres it's been a while how do I get green colors for my icons of es code it's a part of the theme yeah somebody did the exclamation mark theme thing thing are there and that is the theme I'm using which changes the colors of the the icons which I like it what's cool all right keep going I'm here well thank you why be it's pretty involuntary cool so we created a react app like is it there's a lot going on here it's hiding the the details of webpack you don't really have to worry about that right now but there we go so we can see that the react app started up we see this nice little logo it's telling us what we need to edit and one cool thing about the this and the way it sets it up is it has hot reloading so if we change the files it'll automatically refresh the page and we don't have to do that manually so if I change this right here that just says hello world and I save it and I go back to the browser the page has already updated and I don't need to refresh it so this is the web pack hot reload a dev server it's great okay before we go any further I'm gonna get rid of all the extra junk so there is this app dot CSS which has set some styles I'm just gonna delete that gone there is this test file I'm gonna delete that who's cringing right now when I delete that test file we're not going to worry about tests today this is gonna be a super basic intro to react will keep the index dot CSS this is where we're gonna have our basic styles I'm gonna get rid of that react logo which is that SVG and now it's super basic we just have one component fjs we do have to fix this file though so you can see that it was actually importing that SVG into the file again this is a web pack thing javascript doesn't know how to import CSS or SVG files webpack takes care of that but we don't need that we don't need the CSS file and we're gonna make a super basic render function that just has an h1 that says hello world we're gonna get rid of that class here we go super basic react component that's all we get cringe and I believe oh yeah and then our index dot CSS let's get rid of all these Styles too so by default it should be a very basic webpage with just an h1 that's all we should see right there we go hello world so this is our very first react app and it's super basic right I mean you probably would just use HTML if you wanted to build this you probably wouldn't use react but it's it's gonna get better than that now I can talk about really quick what we're looking at here so this is known as a functional component if you've looked at other react code you might have seen like a class component so you might have seen class app extends react component and then inside of here you define your render function and all that good stuff this functional component is a way of creating a react component without using the class keyword it works in a single function and whatever this function returns is essentially the render function this is what will be rendered by that component mm-hmm use a span and thanks for the follow Bossier I can use browser as a tab in vs code as a tab extension I like to switch windows HTML is for normies you all are City okay remove dot get a good call so right now because whenever you whenever you Jenner whenever you call create react app it actually creates its own dot git folder so you can see inside of the to-do app we have or I thought oh no no it's not that it's that I haven't get ignored node modules but we should absolutely add agate ignore weird right I think that's why it's it's yeah it's not ignoring the node modules but my kid ignore technically should just be that right weird maybe any I think I needed getting because so here's what I'm working with my git repo is at this root folder and then I put to-do app inside of it but this is where the get fold file is let's just work let's just create a git ignore right here and it should ignore all node modules it also should do that by default maybe I need to restart vs code there we go that's better you know it doesn't have those thousands of changes cool why don't I use webstorm cuz it costs money FES coat is free yeah embarrassing and that's have been happening for them too thanks for the followed you big thanks for the follow Norden chrono gyruss star star / I like that yes o star star / would be any nested folder I don't know why the nested get ignored didn't work for that I don't know I digress and thanks for the follow 3-0 dev okay so this is a functional component now you could actually use arrow functions as well and so let's let's actually wreath I rewrite this as an arrow function so I'm gonna say Const app is a nice little arrow function that just immediately returns this JSX we're gonna do this and we'll comment this out now these are two different ways to write the exact same component and I'm using the fact that with arrow functions if you have no return keyword in the function is technically a single expression it will just return that thing so this is still the same component and it should still work yep we refresh the page no errors we're good to go so it still works and this is just another way of writing it today at least for this component right now we're gonna write it like this so we're gonna write it so that we have an arrow function that returns our JSX like that and the reason we're going to do this is because we're going to be using all of our effects or sorry all of our hooks right here this is where all of our hooks go and if we have a component that only returns the JSX we couldn't have hooks inside of there so this is how we will be writing our application how do I know when to use construe let you use const if you know that you're never going to reassign a variable use let if that variable needs to be reassigned technically I could use let right here it would still work app still works page refreshes we're good to go but because I'm never reassigning app I can put I can use Const there's just a lot of people watching there's 284 people on YouTube and 117 on twitch so if even one person spams it gets out of hand and we're about to talk about hooks right now right now right now let versus var so basically in modern JavaScript development you should not use var at all if you know that you're gonna reassign something use let both const and let our block scoped whereas var is function scoped or global scoped spam income incoming yeah basically you should never use var and the idea being that when JavaScript was first created it was it was they were trying to make it very easy to use and so weird things were happened like if you left off the VAR keyword it would automatically create that variable anyways it was very forgiving but we are serious developers and we know what we're doing now for the most part and so we have to you and there are rules that say we have to actually put the var on there and even then there are other implications of using far so either use one letter Const look at me yeah yeah if you do exclamation mark theme you can get a link to my vs code theme react core is full of ours they're probably going to be updating it checkmate now I have not used a var in a year two years I don't know we're building a very basic react app and talking about all the concepts as we go along yeah hello hello okay did I miss how the compiler knows the difference between text and code inside the JSX just a matter of the wrapping so with JSX you can basically have HTML elements anywhere I could do this I could say Const header and then I could literally just put an h1 like this Wow and I could put a semicolon right there so the the JSX compiler it just just knows that whenever it sees a less than sign we're starting HTML elements now if we have to actually want to have expressions inside of the JSX I'll show you how to do that but for the most part if you're just creating the elements that that's that's how you can do it I like to use if it's a multi-line JSX I definitely like to use parenthesis because that way we can have consistent indentation but yeah it's totally up to you and you will get like a syntax error if you do something weird but for the most part you can just put JSX anywhere I think should follow kid cube thanks for the follow Tony Clifton is there an intro to view an angular stream inbound I might do the like a front end face off let's create a language called tsx yeah we created an hello I hate Kasia we use create react app we have a very basic app we ripped out everything except for this one basic component and now we're just breaking it down and thanks for the follow our pan okay so this is our react component let's look at our readme so now we want to show a message from state on the page so I'm gonna I'm gonna do this I am going to yeah first up I'm just gonna create a variable let's call a look create a variable called name and I'm gonna put CJ in there and then how do I get this variable inside of the JSX well we use curly braces so anytime you want a javascript expression inside of your your your temp your tags you can use curly braces and so if i do single curly braces and then put name right there this should say hello CJ great great and so basically this render function can take into account this the the variable it can resolve that expression to know that that variable means CJ and that's what actually gets rendered on the page if we look at the Dom it's just an h1 and we can see that it has like multiple text elements inside of here but that's great is our basic app but what if we want things to change that's where state would come into play so right now the name really isn't changing it's just a variable it's just there but what if we wanted to have an input where the user could type their name and then we change what name is displayed on the page in that case we would need some sort of application state we would want to keep track of what has the user entered into the input form yeah and someone just asked yeah you get you get asks how do you escape the curly brace I believe Oh like this yeah this is my initial thought you do curly braces and then put single quotes inside of it with a curly brace that would do it because basically it says evaluate this expression and then this expression evaluates to a string yeah all that for a header it's good it's going to get more complex not double braces yeah no so double braces is known as handlebars but that's not what we do and react such convenient escaping okay but let's make this dynamic right before we before we get into actually like building a to-do app let's make this dynamic I want to have an input form and I want the user to be able to type their name and then we'll say hello name so let's get that going I'm going to use this CSS here I created the CSS a long time ago and all it does is make things look nice by default so we're gonna put this in our index dot CSS we're gonna save it and by default we get a nice sans-serif font with an 80% with body is great look at us we're doing it so and this is the CSS if you want to you want to use it now let's do this we want a an input on the page so we're just gonna add a form we're gonna add an input right here oh yeah and I'll show really quick one of the caveats of JSX and then we're also gonna have a label that just says enter your name see what we get cool so we have this nice little input box I want to be able to put my name in and my name should appear down below real quick let's talk about self closing components so in JSX every single element must have a closing element so every element needs to have the closing one now if you're using just regular HTML you could actually write it like this and it would still work because an input is known as a self closing tag but with JSX it is it's expecting a closing tag it doesn't know what to do so typically what you can do is just do self closing like that and it will work it's great um and so that's our input now we want whatever the user types in to show up down below we can't just update this variable that wouldn't work part of the render cycle is letting react know when things update so that it knows to update the page so for this we are going to use the use state hook but before that let's listen for when the value of this input changes so on this input we can add an on change property so every single Dom event that is available in in JavaScript is available as an attribute in your attribute in your JSX and you can assign this a function so we can pass in a function that gets called when the value of the input changes so I'm just gonna do this inline right here we're gonna get access to the event and then I'm just going to log the event and now every time I type into this input we should see something log to the console cool so it's working we're listening for when when the user is typing one thing to note is that these things are known as synthetic events so in react they aren't like a real Dom event it's actually like a wrapped synthetic event and the reason being is because of the virtual Dom and all that stuff that we don't really need to worry about right now but just know that this isn't exactly a Dom event it's a synthetic event okay now if we look at event target event target is the element that this event is for and this element is an input so it has a value property so if we log event target value we can see that every time I type in the input we're logging that value change so what I want to do is I want to keep track of this value so that reacted knows about it and this is where our use State hook comes into play so this allows us to create some state for the component and then update it dynamically so here's what I will do I will say our name and our set name is equal to use State with the initial value of CJ now you state returns an array that has two values inside of it the first value is the value of that state item and the second thing is a function that can change that value and react will know about it so right here I'm passing in the initials meaning the name value right here is going to be set to CJ by default so if I save this we still see hello CJ because in our JSX were accessing the name right there but if I want to change the name I can call set name and we can do that right here so we saw that event target value has the actual value of the input and what we can do is we can take that call the set name function which will then update our state variable name and then our function will actually are our component will rerender so let's do this we're gonna say set name and we're gonna pass in event dot target dot value okay let's watch it happen so if I type see it changes to see CJ hello Wow Wow so let's see what's happening here but like initially the value is CJ so when the page loads the value the value is just CJ but whenever I type into the input we're changing that value and react is actually kind of it's dumb act is dumb the only way react knows to re-render the function basically to recall this JSX to show the latest value of name is if something happens like set name so under the hood set name is telling react hey we just updated state meaning we need to re-render this component so that that's basically how this is how this is all working hello man Jim welcome cool one other thing that we would want to do is to bind the value of the input to name as well so right now it's technically working we see that the input starts off with no value and then we can we can get the value from it but what we should do is we should also say that the value of this input is set is set to name and so by doing that whatever the name value is will be the actual value of the input and question to you in the chat when I go back to the browser what is going to be inside of that input by default what will I see what's going what text will be in the input I think my light is blinking it's weird I don't know CJ yeah it'll be CJ because by default name has the value CJ and so when the page first renders everyone saying my name that's great when the page first renders the value of the input will be CJ so look at that CJ is just popped up in the box Wow okay great so this is uh this is the the basics of the used a function I think I need to replace that light it's like blinking let me know if things look weird to you all cuz it's kind of kind of weird but thanks for the follows UQ's uh yeah I'll use lifeshare let me set that up oh let me hide my screen real quick while I login doo-doo-doo-doo let's turn the drop game on yeah so this this video is going to be available right here on YouTube immediately after after we're done here it looks okay okay I might have a seizure it's like blinking really really fast I mean I'm not I'm not prone to seizures so it'll all be fine yeah I have a computer science degree we're using hooks in this app you but up okay here we go CS what CJ yeah if you want to join this session you can go to this link here it is read-only but you will be able to see me writing code in real time okay yeah so that's a good point and and this is another thing about like using all of the the latest react stuff here is at the end of the day you really are just using like a lot of this is just JavaScript so knowing the difference between an arrow function that doesn't have the parentheses versus with the parentheses like technically they work in exactly the same way like look our app is is gonna be no different Wow still works but that's just a JavaScript thing so yeah and is anyone joining us oh there's Chris John welcome welcome welcome what should I know to start letting me act you should know the basics of JavaScript so you can see there are things here that are not react store like this arrow function that's just plain old JavaScript export default that's just plain old JavaScript import that's JavaScript this right here is destructuring that's javascript so a lot of this is just it's just JavaScript the extra things on top of it are like you state and the fact that we can use what looks like HTML in here that's that's the the the special react stuff let's do some reformatting here cool well that's good to hear Chester how does react hope in a faster development of a website it just allows you to structure things in a more sane way instead of writing a bunch of imperative code for like updating menus and making requests to api's it allows you to structure your code in in a better way so that's the main thing and thanks for the follow Saboteur why does he structuring with brackets instead of curly braces so the fact that the thing is that use state actually returns an array let's do this let's call it name stuff and then to get access to the name actually you tell me so now that I am no longer destructuring the return value of you state how can i how can I use it in my component like here so like name and set name how do I actually call those things they don't exist anymore they're they're not actual values yeah bracket zero so the way ad structuring works and let's show it in the same way name set name you got it so now this returns an array so if I want to access the name I can say name stuff at zero and then right here I can say name stuff at zero and then this is weird for anyone that is new to JavaScript this would be name stuff at one and because name stuff at one is a function I actually can invoke it and put the curly braces after it like that but this should still work Wow still works but the reason being is that you state is very simple it just returns an array that has two values inside of it and so in yes 2015 this is known as D structuring so it's a simpler way of writing it and so if we wanted to make this a little bit easier we could say name equals name stuff at zero and set name equals name stuff at one and then inside of our JSX we can just access them by what we were calling them earlier and this can be set name like that and this should also work we probably I would probably won't cop talk about use effect because typically you need that when you're like talking to AP eyes and we're just talking about be the basics of react not really talking to AP eyes or anything like that awesome so this little thing right here is known as destructuring and all it does is what I showed almost three lines of code so this one line of code is doing what these three lines of code would have done and that's why you see like you stay written like this okay use effect is like created in view yeah I mean it's a it's a little bit different than that because you can recall you can write an effect so that it gets called anytime the dependencies change so it's almost like a watcher in a way but okay those are the basics of hooks and this is a hook so someone was asking earlier what are hooks these are new things in react and we have things like use state we have things like use callback we have things like use effect now in the readme I talked about lets or like what is the virtual Dom let's talk about this okay so if we watch the elements on the page so we can see here's div ID root here's a div here's a form and here's an h1 now whenever I start typing here let's think about what happens right I press the key on change gets called set name gets called with the latest value and then this will need to rerender right this is gonna have to be updated on the page so essentially react will run this entire entire return value and then compare it against the previous return value and then only update the things that need to be updated so if you watch in the Dom here as I type you'll notice that the value updated and then the h1 updated and we can see that that is updating here Wow and so this is the idea behind the scenes here is the virtual Dom so with react win the state updates it's going to call your render function again so basically it's gonna need to rerun this and it has the latest value and then it looks at the previous value and the latest value and does a diff to see which parts of the Dom need to be updated and so you'll notice the form isn't getting wiped out the h1 isn't getting wiped out only those specific areas where I'm using dynamic expressions is what's actually changing in the Dom so you'll notice that only the value changed and then only the inner text of the the h1 changed so under the hood that's the virtual Dom it's it's smart enough to only update the things that need to be updated and the render function we have here is a mechanism that is the the virtual Dom algorithm uses because this this whole return value here just gets turned into basically a JavaScript object that represents the Dom and then we compare it the old one in the new one and if anything changed it it updates those things so that's that's the basics of the virtual Dom that's probably all you need to know about it to even get started with react but there's a lot more to it yeah ok so we're doing not that great on time we've we've talked about very basic stuff so one thing that I want to to add here is actually use callback because you'll notice right here for on change I'm passing in a function and this is this is a this is an expression right I am basically defining a function and on every single render I am actually redefining this function and for a simple app like this doesn't matter at all but this actually would that work can I use you use call back here I think we'll try it it should work but use call will basically create a cached version of that function so it doesn't have to recreate the function on every render so let's try it on we're gonna do this on name change equals use callback that gets access to the event and then we're just going to log the event like this and we're gonna pass an empty array because there is there are no dependencies and then right here on change we're actually gonna set to on name change like this so we have this we're setting it to that and then let's yeah and we're pulling in use call back from react as well let's see if this actually logs the event I don't know will this work it does but we're not actually changing the value and so inside of here we should be able to say let's also log event target value and then we'll say set name with event dot target value like that let's see what we get hello world cool so it works now like I like I mentioned you don't have to do this it still worked without doing this but basically what we've done here is a minor optimisation instead of recreating this callback function on every render we're now using a cached version of it because it doesn't have any dependencies on extra external state so this is another hook that we can use use callback yeah well used I don't think we'll have any reason to do use ref okay let's keep moving we need we need to create a reactor so we're basically or a to-do app so let's let's change this this idea of calling it a name in here I'm just gonna comment this out we're gonna rewrite it to be a to-do app it'll be very similar but like we'll use all of the all of the things that we've learned so far but it's gonna get a little more complex because we need to manage more state okay so here's what we're going to do we're gonna get rid of that h1 we're gonna have a label that says enter a to-do and then now instead of calling it name we're gonna call it new to do and instead of calling it set name we're going to call it set new to do and the initial value here is actually just going to be an empty string and then we'll rename this on name change to on new to do change like that look at that our app has just turned into a to-do app cool inaccessible input labels we could we could get this going so we can say four equals new to do and then this can have an idea of new to do and a name of new to do yes and a good point thank you very much Andrew HTML 4 so up until this point we haven't really come across something like this but because we're working in JSX we can't actually use the word for the JSX compiler is basically saying like oh you want to do a for loop right here no we don't so because for is a reserved keyword in JavaScript when you're working in JSX you have to say HTML 4 like that and works in the same way but JSX knows what to do with it but that's a little let's more accessible so now that I've set up those two things whenever I click the label it will focus the input so like learn JavaScript cool alright and yeah in later on I don't know if we're even gonna use classes but if you're using the class keyword like on an element you would say class name instead yeah and you actually can use JSX with UJS you can create your own render functions that's something okay so I'm gonna remove this logging of when things are getting called and we have a basic form yeah and so we're already well we're already calling the function when the form is submitted and we've already talked about use callback so this used callback creates this callback function that is reusable and we don't have to create a new one every single time see you later J friendly web thanks for hanging out with us yeah yeah I don't have any classes yet but if we wanted classes we would say class name okay so that's great what's next create a string value and store the user input we're already doing that right we have our state value called new to do and that is bound to the input so that's how we're gonna keep track of creating new - duze what do you got for me Isaac's just didn't h1 great work nice h1 we're already listening for in the input changes and updating our state we're already logging the user input now we need to actually keep track of all of our - dues and let's also do this we are going to add a button that says add to do like that so they learn JavaScript we'll click this button and it should add the to do now right now you'll you saw that it just like disappears that's because we're not preventing the the default action so we need to do that just like plain old JavaScript in our our callback function here well no sorry not that one we need a listener for when the form is submitted so we'll add a listener for the on submit function on submit and we need a function something like form submitted and we can just do that here Const form submitted is a function that also gets to access to the event and then for now we're just gonna do event dot prevent default like that it'll just log form was submitted cool should work now okay each one oh nice super bra that's good to hear because of me they started to learn JavaScript open me never gonna give you this is that count that's a that's a rick roll i'll potentially talk about use effect but what I'll say is that they work in a verse in a very similar way to use callback in that well not really thing about it is that it takes an array of dependencies but otherwise the function inside of it is just going to get get called whenever the dependencies change it's a little different okay but so we have this form submitted function but again the thing to think about is every time this component renders what happen with the spacing there that should not be like that but every time the the state changes this whole function runs again it rear Enders and so an optimization would be to say use callback and pass an empty array because this form submitted callback shouldn't change unless it's dependencies change okay so let's look at our to do our checklist now let's keep track of all the to do so we can say hello world oh no learn JavaScript add to do the form was submitted and now we want to do something with it so we want to keep track of all the two dues what do you got for me nice I think you sir you stay safe as well and thanks for the follow opieop derp hey that didn't work okay yeah we want to keep track of all the to do so for that we're gonna use another use state now technically technically technically you could call use state with an object that has multiple properties like new to do is a string and then to do x' is an array like technically you could do something like that but it's much simpler and actually easier to create multiple state values so just like we have a state value for the new to do which keeps track of what the user is entering we're gonna create a state value for all of our to dues so we're gonna have to do is and we'll say we'll have a set to dues this is gonna be used staked and what goes in the parenthesis what should the initial value be you tell me right now and you get 10 coding garden points and eventually we'll create something to track those points I don't know if you open me you need to sing all right I don't want to see and thanks for the follow Montreal Chris Lee and array and empty array yeah so when when the application first starts up there is there there are no to do is right so we just start off with an empty array like that good to go just real quick though let's actually start it off so starting it off as an empty array makes it so that we have no two dues right we when the form is submitted we're gonna put something into the array which creates a new to do and let's go ahead and do that so right here we're just saying the form was submitted instead of doing that let's actually just push a value into the two dues array so when the form was submitted we are going to call set to dues and this is where react gets interesting basically you can't just modify the array so right like you could say to do is dot push and then pass something into it but then react would not know that the array has changed we have to actually call set to dues and in react the state is immutable so typically you wouldn't do something like push so we call set to dues we spread thank you as a teen we spread the existing values of two dues and then we pass in what new value we want to put into that array and so we'll say the content is going to be new to do because this is what the user entered into the form will have some other properties like done is false and we probably also want an ID and for now the ID is just gonna be taboos dot length plus one cool now that this is this is great and all but this used callback has a dependency array and because we're using things inside of this function we need to let this use callback know about that so right here we need to pass introduce because we basically need to where saying if to do is ever changes we need a new function so it has the latest to dues the other thing we need is to do so if new to do ever change ever changes we need a new call back because it needs to have the latest value of new to do and that should do it and what I'm gonna do right here is just log to Deus and the interesting thing about this is this is going to log on every single render and you may not have realized this but watch what happens so you'll notice that it log twice that means that my component has actually rendered twice and when I change things the component is rerender right so that console.log being inside of this function is actually gonna run every single time the component renders we don't necessarily want that we really just want to know when when they when the to Do's array changes and for that I think use effect is a great use case so we're not actually gonna call any API but this will let us keep track of wint win today's changes so I'm gonna add use effect right here and this is the way use effect works so we'll say use effect we pass it a function and then we pass it a dependency array so basically what does this function care about and in this case it cares about 2news and so I want to know whenever the two dues are a changes and then I'll just say I'll just log to do is right here to use and we should see this should only log once right because up until this point it hasn't changed but it has an initial value and now when I'm saying things when I'm like typing like learning JavaScript it's not logging because this use effect will only run this function if this array of dependencies has changed so now when I click Add to do we can see that the two to do is array updated so we can see and then inside of here we have an object and it has learn JavaScript inside of it so that's great what are you saying how long until CJ is I can't read that literally just a playground it already is that's what makes it fun but the real pie GaN says so it's sort of a non change for a variable in a way so like and it's at its base function yes this function will only run if it's dependencies change similar to use callback this function will only get recreated if it's dependencies change however this is where people typically do things like API calls so you could have a use effect with an empty array and that means it's only ever going to get called once and you could have this makes it kind of like a component did mount so if there's no dependencies in this array it'll only get called once you could make your API request update state and you're good to go okay one thing I'm not mentioning is use when you pass in a function you can actually return a function and this function gets called whenever the component is unmounted or disposed like component was unmounted and this is where you can do things like clean up like remove event listeners and stuff like that and we're not really ever gonna see this because our oh actually I guess it cuz it technically rear Enders the app component yeah so every time we added to do because it has to rerender it technically it gets removed interesting but inside of this function you can do things that would need will require cleanup okay when would you call an API if you had to query it first I would do it in a use effect potentially with an empty dependency array that's possible good morning Brooks what's up did I mention that on change and on change make a difference because that will request yes no I didn't but that's a good point you'll notice that in any of my event listeners on these elements I'm using camelcase and you have to do that with react so technically you could have on submit' like that which is an HTML attribute you don't want that you want the camel cased one because that's the one that reactant knows about and will actually like bind it to your to your expressions that's a good point thank you and fee whoa I found the first to do open me I'm not gonna sing that no thank you yeah and am i am ed is saying clear the new to do on submit let's do it so whenever we add a new to do like learn JavaScript how can we clear this input box right I click Add to do but I want this to disappear right because I want them to be able to enter in something new what do I need to do any ideas I will remind you that the input is bound the value is bound to new to do so what can I do right here in coding garden points if you can tell me how many years did it take to get so cool if in target that value equals empty string not quite remember that this is bound to state so we need to use our function that updates the state which changes the value that it's bound to here set new to do yeah Ahmed's got it so we call our set new to do function with an empty string and because our input value is bound to new to do then it will just be an empty string and empty it out so right after we add the new to do will say set new to do with an empty string like that and this should do it so if I say learn JavaScript it empties it out because it set it to nothing and we can see that the two dues array now actually has values inside of it great work great work okay what else what else is in my readme I think we got about 15 minutes yeah so we added a new to-do to the array let's show that actually show the to do's on the page so right below the form I'm gonna have an unordered list and basically I want a list item which eat with each each to do right I want to have something like learn JavaScript and I want this only to appear if that's actually in my array of to do's so basically what I need to do is I need to map over this array of to do's and display those inside of my JSX so we're gonna do that right here and remember if you have a JavaScript expression you use curly braces so we have purely braces oh you focus my attention don't do that please don't do that I think everyone is read-only though no no I'm gonna take that as you didn't know what it was gonna do but that's okay so right here inside the curly braces we'll say - duze - duze is an array of objects and we're going to map it so we're gonna say map and that's going to give us access to each individual to-do item and then inside of here we'll return some JSX so in this case I'm just going to return a list item that has to do dot content inside of it so remember whenever we push on you to do into the array we're setting the content property to actually have the to-do item and so we're mapping it and we're showing that list item there let's see what happens so we say learn JavaScript we click Add to do and it shows up magic so a part of JSX is that you can have an array of elements and react knows what to do with that you'll notice that we don't have to join it together on a string or anything like that we literally just map over them and they show up on the page and thanks for the follow Akash yeah you get you found my theme just black if we say set need to do the variable need to do and the input value depends on the new to do variable and it's changed now on change method needs to be read it doesn't so set need to do sets it to empty string that and that updates the new to do value I'm using use callback here and it needs the latest value of new to do so technically this will create a new callback that has the latest value of new to do that's not that's not a bug new to do changed just sets the to do it doesn't need the old value so that's not going to rerender or do anything like that so I think we think we're good to go we're good to go there and thanks for the follow amar crack is asking how can i mimic the shoot component update using hooks you would use a use effect so you can put your array of dependencies these can be props these can be state variables and whenever these things change this function will get called and then you could have conditional logic inside of here that updates the state only if certain things changed now because we are using functional components we actually you both technically you can't implement should component update like no matter what it's going to rerender this function if you really want to stop the render from happening you would need to use a class component and I think even that might be deprecated now should component update maybe not for that you would probably use a peer component I don't know but technically with the with a with hooks which can only be used in functional components you can't stop them from updating so technically you can't do component update but you can do conditional logic setting in a conditional state setting in a use effect based on the dependencies and thanks for the follow game thanks for the followed easy yeah and so we need a key Thank You yan yeah well Thank You Dylan hope you have a great day to muddy so the entire list is rerender each time a new key is added it's not and that's because of the virtual Dom and I'll show you that so right now we see an error in in the console it says each child in a list should have a unique key prop and the reason we need to add a key prop is because the virtual Dom will know whether it needs to update a given list item so you'll notice right now we're not using keys and so if I add something new like actually I think even if I yeah so if I say learned react or no we'll say learn es2015 and click Add to do technically it just added that new list item there but if we if we really really want to be explicit we can let react know when and if that element should update and so right here we can add a key and we're going to set the key to be to do ID that should get rid of our warning in the console like that and now the the virtual Dom algorithm has it's an unofficial YouTube raid welcome everyone we're learning react and thanks for the follow for us that's great yeah YouTube really doesn't even like an official rating feature doesn't exist yet welcome everyone and anybody that hasn't checked out florence channel definitely check them out youtube.com slash floor and pop yeah looks like you're still live but I guess everyone's coming over here welcome everyone so we are learning the basics of react and hooks and what we just talked about was mapping over an array that's on our state yeah so we put the key there and if we look in the Dom here react the the virtual Dom algorithm will actually use that key to - smart - smartly to be smart about updating these list items souls they learn in JavaScript add to do we don't actually see the key here but under the hood it's using it you know say like learn es6 and you'll notice that the whole list didn't rerender it just added that new one Oh welcome everyone there's more people welcome welcome welcome so by default the the virtual Dom diffing algorithm knows not to update the entire list technically this map is going to run every time but that creates like a virtual Dom object and then that is compared with the previous version and it only changes the actual things in the Dom that need to be updated but technically the map still does run under the hood yeah we're gonna add deleting and yet we're close so now we're showing all of the to do's and it's important to note that the key right here needs to be unique because if it's not unique that's when you'll run into update errors because the virtual Dom diffing algorithm will see two elements that have the same key and it won't know which one to update and it might update the wrong one so you need to make sure that these keys are unique right now is this very basic we're just setting the key to be or the ID to be the length of the array if you're working with an API in a database then you can have a very unique key which is preferred and thanks for the follow mandingo Oh MIDI go does the key show up if you have to - duze it doesn't but one thing I have not showed yet is the reactive dev tools so you can install this for Firefox and Chrome but if you click on components you can actually see I believe what gets rendered it looks like we only see the component level well that's weird um let's refresh it yeah I guess we only see the component but the react dev tools do let you guess you see like what hooks are being used and what your state is but really that key is just used internally for for the updating algorithm okay let's see where we're at in the to-do list check done on a to-do to mark it as done let's do that so when we render these list items I want to show a a checkbox next to it let's do this so inside of the Li will have the to do content and right here I'm just gonna have an input type equals checkbox is that a thing we can do so we'll say learning JavaScript that works yeah we could style it custom it's fine let's see I want to make this checkbox bigger five RINs is that how you style the checkbox to make it bigger I don't know thanks for the followers everyone thanks for the follow Pete thanks for the follow I am Irish Irish pub that's a good point D trouble we can prevent them from adding an empty to do yeah so we can do that and that we shouldn't allow that so we'll prevent that from happening what if they have the same list twice on the page and used to do as the key then you'll run into an update error it'll say multiple items have the same key which you don't want that's good to know so when would something like quids be better or would you combine the idea with unique identifier I would say in general you want to use something like a grid or an ID from a database you really never want to use the index in the array because that could change however because you might see some people do this because this is a map we also get access to the index and you would set you might set the key equal to the index when that's not very good is what if the the order changes or what if one of them gets deleted then it's technically the wrong key now so you really never want to do that but as long as it's a predetermined unique thing it's totally fine and thank you for the follow as a net local storage we might talk I gotta go like in 10 ish minutes I really gotta go oh yeah I don't have my brake timer running great point we should probably take a break and then we can do the last last few things let's go ahead and trigger a break we're gonna do a um one in a little five-minute break no I guess I did the micro break but if you're if you've been sitting at home for a while take a stretch stand up if you're not standing up you might you might you probably can't tell what I'm actually standing right now I just have the the camera at a certain angle so it kind of looks like I'm sitting this oh it needs padding to be bigger let's see you um excuse me I don't know uh there's definitely a way I don't know we're gonna worry about that though yeah that's a good point on that because if you remove the last one in the array then you technically might actually have a duplicate ID I like that I'm not CJ but as a former teacher I know that's a great way to get to really know a subject Oh we'll be answering some other question I think yeah well I want to use setting you to do value so because I don't care about the previous value I always just in this scenario right here I always just want to blank it out which is well just do empty string you can technically use the callback to get access to the the previous value like here where we're spreading to do is I believe technically this could accept a function but that's fine you cannot style checkboxes and are better off making a custom one oh okay I won't worry about that then we'll just add a checkbox like that refused to allow users to reorder the list hello Bob welcome you zoom or scale oh that's not hacky I'm okay with that oh is that too big it's huge well that didn't work okay we're gonna forget about it am i from grand theft auto no that's not me the name is called just black if you do exclamation mark theme you might get a oh no you're not might you will you go get a link to my feet zoom is deprecated scale 200% doesn't worry I'm not gonna worry about it I keep saying I'm not gonna read about it but I'm not gonna worry about it okay so what we want to do is whenever we check the box we want to mark this to do as done and if it is done we will put a line through the item itself so let's do this this input is gonna it's gonna work in a very similar way to the the text box at the top oh yeah and before before I forget we want to prevent people from adding a new to do that is empty so right here will say if new to do dot trim is not a thing then just return so this will prevent someone from adding it to do to the array that doesn't have anything in it so now you can't add anything that's empty that's good and then we want to do this which works we want to check the box which marks it is done so we have a check box and we want a non change event [Music] transform scale to didn't I try that I'm not didn't I um hey what does could totally saying oh do 55 reactant hooks don't necessarily replace Redux you you have used reducer which could replace it and you have the contacts API which could replace it but at the end of the day there isn't really a replacement for the Redux dev tools which is a good reason to use Redux in general but I want to use on click I don't think so let's just do this in line really quick and well let's just log event dot target dot checked so this should tell us whether or not it's checked and we'll look at the console true-false true-false true-false cool and then initially we can bind the value so we can say here the value is equal to to do none because whenever we create a to do we have this done property which is true or false and here we are binding or not we don't want to buy in the valley we want to bind the checked property so we'll bind checked to be to do dot done and so now if I check it it shouldn't actually check because we need to update State so right now wait true why is it true should be false regardless now we can set it so we need a function that will actually like update the to do itself so that it is checked and to do this we technically need to create a new array where that one specific element or that one specific to do has it's done property change to true so how are we gonna do that well technically inside of this map we also have access to the index so we could do this we can say old to dues is to dues that slice that'll make a copy of the array and then we can say old to dues . splice we want to replace the one at this index we're sorry we want to remove it at this index one of them and then replace it with itself we could spread all of its existing props so that creates a copy of the content and the ID and then we can set done to be to do done the opposite of that will this work and then we can say set to deuce and pass in the let's call it new to use instead of old - dues so create a copy of the array well no did I get this wrong this should be splice no slice creates a copy and then splice will remove at that index and insert a new one let's see what happens learn spice to use that spice yeah so that works so true-false true-false and you'll notice when it's true we have that element that says done is true and this one has the element done done is false now there's a lot going on right here and I probably want to extract this to a function and I don't really want to have this in line in my JSX so let's do this I'm gonna create a function that I can call yeah cuz I mean we could do to do that slice khatola is mentioning or we could spread it to create a new array the main the main thing being react does not know if the internals of a state value changed it only knows if the reference changes so by setting a brand-new array it will know to update update the the Dom thanks for the fellow of the followed I press alt f4 what does that do I'm not really into Bitcoin no okay but yeah I do want to extract this to a function let's call this like add to do and it's gonna need access to the the to do and the index but ultimately this should return a function that accepts an event so he's gonna get weird ad to do is a function that takes in V to do and the index and then it returns an event like this so this is a closure if anyone ever has ever asked you what is the closure used for this is exactly that scenario so this will actually give us back a function that has a reference to that specific to do and that specific index and then later on when the event gets called we can call it like this now I believe we can use use callback on this thing let's try it closure and the one thing that this this callback cares about is the two dues array so we're just gonna say use callback with this and then it should only change if the two dues array changes see if it works that's there we can mark it true we can mark it false alright we're making progress now one other thing we'll do is we'll change the style of this element of this list item if the to do is done so we're gonna just do some conditional class name binding so we mentioned earlier if you want to set a class on a on an element you have to use the attribute class name not just class and then you can use curly braces and then provide an expression so I can do something like this I could have a ternary I could say if to do dot done then I want to apply the gun class otherwise I don't want to apply any class and now if we look at the Dom let's look at that look at that and we'll add an item learn es6 and we'll look at this element we'll look at this li if I check it it now has the class done and if I uncheck it it has no class so we're dynamically adding that class name to it and actually I think I want to put that on the I don't think I want to just I only want to put it on the text itself so I'm gonna wrap this to do content in a span and then move this class name attribute to the span itself like that and then I need a done class so in my CSS I'm gonna say done just says text decoration line through like that and this should do it so if I say learn Java Script ad to do and then I check it it gets a line through it that's great awesome I am NOT self-taught I got a computer science degree a red dot from I covered yeah and I think someone answered it but use callback creates a cached version of the function otherwise we would get a brand new reference on every single on every single render cool yeah so and you can technically have any JavaScript expression in here typically I'll do things like this like I'll put this entire expression in an array and then join it on a space and then let's say I want to apply other class names as well like I want to apply the to do text class and I want to apply the other class and simply using javascript to join that array on spaces that gives me a list of class names that should be applied to it and that can be any JavaScript you want but for now we're just gonna do this much simpler cool and thanks for the follow all yeah man thanks for the follow Ramson my marquee implementation is not compliant with the spec I don't I don't know what to do about that and thanks for the follow Wayside can I use fetch in a function when requesting resources at some route yeah you absolutely can make fetch requests on the server side I do that all the time okay cool we're showing a line through it that's great one other thing that we want to do is we want to be able to delete to-do items so I'm gonna have a button right here that says remove to do and let's see our check list so we're showing a line through it add a button to remove it we're doing that right now but we'll have to set the function so now if I say learner and react I now have this button and when I click this button I want to actually remove this to do from the page let's do it so right here will say on click and we'll create a create a function called remove to do and we'll pass in really we just need the index is all we need to be able to remove it from the array I guess technically we could pass in the to-do reference itself [Music] yeah let's take a quick stretch yeah we'll pass in the to do reference because then we can use a filter when updating the two dews state an ex would be better like clicking an ex well we're gonna have a button for now okay so I need this function and remove to do this is gonna be another one of those closures will write it first without the use callback so this accepts the to do and then it returns a function that can be used for the Dom event of on click and for now we're just gonna log but to do that we want to remove okay learn react add to do I click this button it wants to specifically remove that one so that's good and then we need another state update so similar to how we made a copy of the array and then change that one specific one what we want to do here is create a copy of the array and remove that one specific one there are a lot of different ways to do it we could technically splice it filter is probably the the easiest way or it's gonna it's gonna look the nicest so right here when we want to remove this to do you can say set to do's and we want to set to dues to be to dues filter some other to do is gonna give us each one and we'll say where the other two do is not this to do and so we're basically updating the state by filtering out that one specific to do that we're trying to remove the leg is it you could splice it you could go a lot of different ways about it I specifically am going to do a filter here I guess another way of updating here would have been to a use a reduce that might be fun to see but I do need to go we're pretty much done with this with this with his app but let's turn this into a used call back again like so and the thing that it depends on are the two do's like that and this should work so we will say learn JavaScript oh I misspelled it editing is a whole nother feature we could add that later learn es5 learn CSS learn react learn redux okay so now we have a bunch of to do items i misspelled this one so i want to remove it we click the button and it's gone and then I'll re edit for JavaScript okay and this is the error that I knew we were gonna run into and someone mentioned earlier how we could fix it but encountered two children with the same key this is fine yeah technically so I mean if you want to do a strict equality you could do double but either one would have worked in this scenario the newest one should be added to the top we can do that we were doing that here so basically instead of putting it at the bottom we can do this so we spread the array afterwards that should put it at the top and then the other thing that would fix the ID issue is instead of just taking the length of the array we could say to dues at the last one so today's length minus one its ID and then add one to it that should prevent the getting the duplicate IDs so or in JavaScript Oh No cannot read property ID of undefined if there is a length we do this otherwise the ID is just going to be one started off as one cool learn JavaScript learn es5 or es6 and you'll notice they're appearing at the top now which is nice oh no oh but now that they're appearing at the top we can't take the last ID or can we yeah we don't want to take the last one we want to take the first one because we're doing it in Reverse now so the unique IDs are always at the top we could create a random ID yeah I don't um yeah oh that's pretty cool a math dot random but using like that's not hexadecimal what is 36 radix well base is that because you could do a two string to and that's binary what is 36 is that heck no hex is 16 it's base 36 I don't know if there's a special name for it that's pretty cool thanks for that second okay so this should work learn JavaScript base 36 let's just call it base 36 cool 30s 5 learn es6 learn react learn Redux this is actually the order you should learn it in so you should learn JavaScript first the basics of it know what is es 5 know what is es 6 then jump into react then jump in to react Redux cool but now I should be able to remove items I can remove any item I can mark any item is done and we have ourselves a to-do app as a whole lot of code but we learned we learned a lot right we learned a lot yeah learn es 7 we s 8 9 10 what are we at now cool let's look at our readme the things that we did not get to are like I will do this really quick actually I'm okay with that but we didn't get to talk about creating separate components we didn't talk about passing props we can get much more complex with this and potentially like nicer code because right now we just have one big component that has everything inside of it and in larger applications it's not ideal right it's not ideal to have all this stuff in just one component you can start to split things up and share logic and different things like that so in a future future episode we'll do that but just real quick I want to create a button that marks all the to dues as done that should be that should be pretty easy so let's put that right here so have a button that says mark all done and so if I click this they should all all the checkboxes should check and will say on click will give you mark all done and then we need a function to do that this will be a used callback it's dependent on the to Do's array because well is it yeah because it needs to modify that array or create a new version of that array and then technically what we need to do is create a copy of the array and then create a copy of each of the items and then change the done property to true on every single one what does impe saying years or greater than numbers oh yes 2019 okay yeah too much scrolling enlarge exactly yeah this is getting way too much to be one single component so there's a lot of ways to go about this we could like create a for loop and copy each object I'm just gonna use a reduce I know a lot of people are new to that but basically what we need to do I'll tell you what this is what we need to do however you do it it's up to you but create a copy of the array create a copy of each of the items update the done property to be true on each of the new items cool so this is what we need to do there's a million in one ways to do it I'm going to use a reduce so I'm gonna say new to dues are gonna be two dues dot reduce this is gonna give us each individual to do and we are reducing this into an array it already is an array but we're gonna reduce it to an array I guess technically I could do a map yeah what do the map that's way easier Matt let's do a map choose that map because this map will create a new array we're gonna get each individual to do and then we need to return the to version of the to do a copy of it so we're gonna return an object with all of its properties spread but we're gonna set the done property to be true that was a lot easier than I thought but ultimately this is what this does it creates a copy of the array because it's a map and then it creates a copy of each of the items it doesn't just modify the done property it creates a copy and then it overrides the done property to true alright so that's great and then we need to say set to do to be new to dues I mean technically we could call this like updated to dues like that but that should do it so let's add a bunch learn jeaious learn yes 2015 early yet learn redux okay Marco ball is done and it works look at us no I turned slow mode on there there were just a lot of people watching earlier thanks for the follow Spiti and thanks for the follow Roman King and thanks for the follow HCV RR en dabrian 21 I do have to go though so this was fun I'm gonna push all this code up to github if you look in the description of the video and the description on twitch that github link all of this code will be there but I'll remind you what I did not cover our components props and there are other things we could do as well but we talked about the basics of JSX the basics of effects the basics of state all that good stuff and thanks for the follow Raul aura and 2/6 roar raid Clarkie oh yeah we'll see who's streaming I might read in stuff off though we haven't we we didn't read him last time let's see who's live though but you could take this a step further you could break this down into a to-do item component to-do list component to do form component and and and creates nice little reusable components all over the place but that's it for now this was super fun thanks everyone for your suggestions and questions and and all that all that good stuff I have to go I do have to go in still fall he's alive hopefully he's feeling okay he had a he had some sniffles yesterday it is yeah it's Friday right he's usually alive on Fridays well thank you actually um okay no in stuff of his life look at him searching for Philbert let's see what clark EO is working on he's looking at Amazon he does not have curly I don't say that don't say that seems complicated enough yeah jiffy it's react he gets pretty complicated pretty quick but it works really well with very large applications it's like a simple app like this you could have built with vanilla JavaScript with not very much code but you know and thanks for the follow kate ciliary yo what are they what is he working on today though I don't know fun fun function is life I think he's probably gonna be ending soon oh he has somebody there with them that's interesting who do we raid oh nice work in peace long code complicated stuff seems about right umm let's see if there's anybody else on the live coders sped right and be krump full-stack live all right car key oh he's cool dude so if you are watching on YouTube please ando thinkin and andrew has the right message met message but if you're watching on youtube please head over to twitch that's too many messages Andrew Wow head over to twitch follow me on Twitch if you have not followed me on Twitch pretty soon I will be streaming only on twitch I will still be uploading my videos to YouTube but I'm gonna stream on Twitch for the most part and this video will be available right here on YouTube right after the stream is over so it's at the exact same URL you'll be able to watch it all the code will be on github follow the link in the description and yeah thanks everyone for watching this was super fun I'll probably I think I feel like I'm gonna stream quite a bit this weekend we'll see we'll see what happens but most likely most likely we're gonna stream quite a bit this weekend alright wherever you are in the world have a wonderful morning oh my goodness they cache they were drops that didn't happen and while the other screen was on I don't know but wherever you are in the world have a wonderful morning afternoon evening or night and until next time here's this [Music] you

Channel: Coding Garden

Views: 35,460

Rating: 4.9395247 out of 5

Keywords: learn javascript, full stack javascript, css, full stack, vscode, javascript, live streaming, live coding, lesson, learn node.js, html, beginner, educational, full stack web development, mechanical keyboard, web development, node.js

Id: 9eSwZ0z-50c

Length: 132min 32sec (7952 seconds)

Published: Fri Mar 27 2020