Let's Learn React! (with Ali Spittel) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we have ali spittle ali thank you so much for joining us today thanks for having me i'm so excited to be here i'm absolutely thrilled that you are joining us i think this is going to be so so much fun for for a bunch of reasons i mean i i think i'm excited about the subject matter but i'm also just excited to spend some time hanging out with you i've seen your work all over the place you are in in so many amazing channels doing so much cool stuff so uh i think we're gonna have an absolute blast for anyone who's not familiar with your work do you want to give us a little rundown of all the things that you do yeah for sure and thank you so much you do so much as well so i'm so excited to be here i've watched this stream before and it's a ton of fun um so a little bit about me i am a senior developer advocate at amazon web services i work on the amplify team so lots of javascript and other front-end things in my day job which is really fun but outside of that i also have a blog called we learn code and i co-host a podcast with a couple of my really close friends called the ladybug podcast and i think a lot of the ladybugs have been on here before too so um that's kind of about me but we're going to be talking about react today and i've been writing react code since before es6 came out and so it's changed a lot over the years and i'm excited to chat about it absolutely so so react i think is something that at this point we've all probably heard of it right like we it's it's one of the most popular javascript frameworks out there it's going to show up in a lot of job postings and tutorials um but what like what is it what is react yeah so react is a front-end library and there's this distinction between library and framework and i hate this debate but react brands itself as a library which means that it adds additional functionality to javascript but we also use tools like create react app or next on top of that that just besides how we structure our code and the really nice things about react are first that it allows you to build these components components are essentially reusable chunks of code that you can use over and over again in your application when i was starting out with react i thought of these as writing your own custom html tags and it goes beyond that and that's not really accurate but i still kind of like that analogy of you are creating these things that you can use that look like html but you can reuse them over and over again something that i've always talked to with um students about before is people think that you can write dry or html code that doesn't repeat itself when you're just starting out because instructors are always like don't repeat yourself don't repeat yourself don't repeat yourself but for html code that doesn't really hold true you can't really write html code that doesn't repeat itself what you see is what you get but with react you kind of can in some ways you don't necessarily need to repeat all of your user interface code over and over again like say you had a table with a bunch of rows in it you wouldn't need to write out the code for each row from scratch every time right other nice things about react is it uses jsx which is a syntax that allows you to write what looks like html tags inside of your javascript code doesn't work natively within javascript we have to use some tools on top of that to work those are some of my favorite react features yeah yeah i think so what like all the things that you said i think are are what makes react so powerful and i think where it really started to click for me was when i realized that i was already doing a lot of the things that react did in my own projects before i started using react i had you know i was using jquery or i was using document.queryselector or you know any number of javascript tools to loop over data and and create html or to find a dom element and replace something or to keep track of a value as somebody clicked around a page and what i what i found was that like every time i did this it would be uh it would be subtly different and it was really hard when i moved between projects to keep track of what like how it had been implemented or why it had been done the way it was done and so we lost a lot of time trying to just remember why we were building things the way they were built react does all of that work in a way that's consistent and predictable and so when i go in if i'm looking for how do we loop over data react has a really solid pattern you'll see it used the same way all over the place if you want to keep track of data it has state management patterns that are really predictable and well documented a phrase that i hear a lot is that if you're not using a framework you're writing a framework and i think about that a lot when i'm when i'm choosing like how am i going to build this thing and most of the time something is complex enough if i'm ever going to work on it again in the future i probably want to use something that's documented for me not something that i have to document myself that's so true especially when you're building something with a team of people where you need to follow similar conventions between the group of people so that you aren't all confused by which code is in which position and the different techniques that everybody is using so react really helps to standardize that but it also really helps when things change as well and the so react was written by facebook and was initially used internally by them so the example that i like to use a lot is remember like way back in the day when facebook moved from likes to reactions so if they had to go and change that like button and every single place that it was so statuses images pages that would be a lot of work and would probably lead to a lot of bugs like you'd have to do a find and replace the whole project and introduce a lot of issues into that code react helps manage this so you would only need to change that like functionality in one place and changing it in one place means that there's going to be less bugs people know where to look for those changes instead of across the whole entire project so as your project scales using something like react is going to be so helpful for that absolutely uh so i saw a question in the chat that's a probably a good context setting question how much javascript does somebody need to know to write react code oh that's such a good question and such an age-old one too i see this debated so often online and i will say that when i dove into react i actually did not know that much javascript i had just kind of started out with it and honestly i thought that certain point parts of react were javascript in certain point parts of javascript were react which is probably not great so i would recommend learning the javascript fundamentals first so you know variables loops functions classes if possible as well and you feel pretty comfortable with those things in order to continue on with something like react because react is javascript and so any of those things that you learn in javascript are going to apply to react you'll just have a more solid foundation that being said none of this is mandatory everybody comes from a different path and so if you didn't come from that place i didn't really either and i don't want to invalidate that i'm just going to say that it's probably going to be easier if you do know a little bit of javascript first yeah i think like to to echo that because i feel like that's an important thing to say a bunch of times everybody's going to have some different base level of knowledge and there is no such thing as a correct level of knowledge like we all are going to know things and we're not going to know other things and and you know i've i've just learned some you know i've been writing javascript now for 15 years and and uh sue's hinton was on my stream a month or two back and showed me something that i had zero idea existed that really changed my life for the better and it was like a built-in javascript feature i just you know how i didn't know somebody had to tell me and so i think that the the thing is we can what we're using these tools for us is solving problems and you can start anywhere and solve a problem the more expertise you gain the less mental friction you will encounter while trying to solve problems like that that's the most cliched like oversimplified answer but but it's true the more you know the easier this is but that that can come from any direction you can start in the middle and work outward you can start at the end and and like inherit a react app and learn javascript as you as you deconstruct it or you can go and and go through a course and and like learn the very very basics before you ever try to do anything else as long as you keep learning you're going to get there yeah for sure um well cool so i mean i i love uh i love this kind of abstract talk about it all i think there's there's so much that we could talk about and and chat make sure that you ask questions as we're going because you know especially with these these kind of intro sessions um a lot of times we don't know what what we should cover because there's so much to cover um and let's see uh there's some questions so there are a couple questions that we're not gonna dive into i don't think like what one question that i see here is uh are like functional components preferred over class components those sorts of questions are they feel very much like preference right like what's your take on that yeah yeah i think that's something that we can discuss as we get into the demo and talk about why we're doing certain things but i would agree that that's mostly preference and maybe depends on the era that you're writing reactant and the the project that you're working on as well yeah yeah i mean it's it and i think like something that maybe we should start by talking about a little bit is is the care with which the react team rolls out changes um yes and you know something that i thought was really cool was when they when they rolled out react 16 react 17 they didn't really ship breaking changes they shipped like new features and so stuff that worked in you know like years ago still runs and oh yeah that feels kind of different like what's the what's the oldest code base that you're working in right now me personally i have i'm not writing in an old code face whatsoever but lucky um oh my goodness so i started writing react again before es6 classes exist had to write objects in order to write react components so a totally different architecture than was introduced when es6 classes were introduced um and then now with hooks i think that hooks and functions are function based components are so great in such a step forward but i've definitely been there for the kind of progression of react yeah well okay so a lot of the questions that are coming in now are very specific so let's let's actually switch over so we can look at things i think it'll be easier to show than tell here so i'm going to move us over to the pair programming view and let's take a quick minute to shout out the sponsors the show like all shows is being live captioned right now by jordan who is with us jordan is from white coat captioning and uh this is all available on the home page of learnwithjason.dev um that is made possible through the generous sponsorship of netlify fauna authzero and hasura all of whom are kicking in to make the show more accessible to more people which means a lot to me and i hope that you are getting some value out of it uh also make sure you go and follow ally on twitter she has a just wonderfully rich feed of uh excellent information that uh you're gonna you're gonna get a lot out of um we talked earlier about the ladybug podcast that is another great resource that is uh full of a lot of good laughs and a lot of good information um we learn code is the blog that ali writes about and uh were there any other resources i did not link to yet i don't think so this is amazing your setup is so gorgeous thank you very much so let's do this uh i'm going to pull up a terminal and now i don't know what to do what's the what's the first thing that you would recommend if you were going to start with a react project amazing let's use create react app so create react app is a tool that allows us to scaffold a react project i kind of hinted at this but some of react won't work in the browser by default we have to set up some build tools in order to make it so that our app will actually work so cree react up does a lot of this setup for us there's this tool called webpack that it has and it has some nice dev tools like hot reloading so we can run the command npx create react app and then your application's name and that will scaffold a bunch of files for us and we'll dive into those before starting okay and so for anyone who's seeing this for the first time npx is something that ships with npm which is part of the node library so if you don't have node installed you will need node and we can link to that really quick nodejs.org there you go if you do need node you can install it through there that is gonna it's gonna be pretty necessary these days for for all javascript uh if you're if you're building anything um and npx just lets us run a command without having to actually install it so this will go get it and then we'll run it and then i'm just naming my project let's learn react it's such a nice tool because you don't need to update things in order to have the latest version it just does that automatically for you and it's also really secure so npx is great to create to use yeah this is this is one of the if this just worked yes it would [Laughter] um but so this is this is uh i think npx was a that's a cat marchand special um who uh kat was at at npm for a long time it built a lot of the the great features there and is now working on a lot of rust tooling which is a whole new space if you're interested i do have an episode on rust while we're waiting for npx to finish there um where prince came on and taught us the intros to rust let's see if we can find it how's my how's my googling is this it here it is yeah what is rust and this is uh this is a lot of fun and you get to hear me scream at the top of my lungs oh my goodness i need to watch this i've heard such great things about russ but it's a little intimidating to me not gonna be not gonna lie on that one like no joke it's it's heavy like i've never written any kind of c like language uh or you know i've i've gone as deep as as like the far descendants of of c like languages so getting into something like rust i was like i don't know i don't know if i can do this this is pretty back endy um but there's such great tools like rustlings and um you know some resources that prince talks about in this episode that are are like truly excellent and and it's such a really truly excellent community which i think that is um that is something that is worth kind of noting in any situation like this right like what type of community are you walking into if you're gonna go and try to learn something new and the rust community is so top-notch um the the party corgi discord that i hang out in often is a a great resource for rust if you are interested in such things um did i spell that wrong oh it doesn't have a hyphen there it is uh party corgi go find that uh swarlow you are not that late we are we are just now installing the project so i have run uh i've run create react app and that's all we've done so far so i'm now inside this project and we can see that we've got a few things here we've got our source um do i have i think this created did this create a new git project too yeah it does which is super nice you don't need to run git init or anything like that you can get already set up for you that is very nice so i'll open this up in code so that we can take a look at it and so you can see that that create react app command created a bunch of files for us we didn't create these it did it automatically so my setup is a little bit broken because i have uh like i all of my folder is is in a git repo so i think it breaks that automatic initialization um but so now now that i've fixed that here we go so we've got a basic folder here and let's see so nice it comes with instructions that's always good super helpful and it's got testing stuff that's always nice react react dom here's react scripts ooh web vitals is that new that's a good question i think it's been in there for a little bit but i haven't looked into what it does i should look into these things a little bit more i feel like you just use them and sometimes they don't look too deep the the web vitals thing is really cool it does um like performance marks for for the the metrics that you get in like a lighthouse test it's so cool contentful paints and stuff like that so you get these these really nice reports on on whether or not you're building a performant app which is which is really cool so important that's so cool um okay so i am now i think i have a project right so can i can i just run this yeah so if you run npm run start from your terminal that will open up a server for you here we go look at this buckets did that just work indeed it did there we go we we've got uh we've got ourselves an app we've we made it work so i'm gonna put these side by side so that we can kind of look at stuff here um so let's take a look and it looks like we have like an index oh so we would need to add code here we go is that right so the index is the first file that connects everything together so actually in that public directory you have an index.html file and we don't need to use this so if you're following along you don't need to open this up but i just want to show that this is what is including our react code so if you scroll down a little bit there is they added a length of comment so there's more scrolling but there's this element with the id root in there and this element is what all of our react code is going to attach to so there is an html file we just don't need to worry about it because of the build tools that we have set up through create react app they're going to handle all of this for us and insert our javascript and all that yeah yeah yeah and so the and this is maybe where it starts to diverge a little bit from from what we think of as like traditional building a web page if you're coming from html and css you would think well how does this work because there's no content right um exactly but so react react does something called a v dom and and somebody asked what that is so maybe this is a good time to talk a little bit about that because since we're gonna be uh sticking a bunch of stuff into this root div yeah yeah so react use is this virtual representation of the dom and if you've written normal vanilla javascript the dom stands for document object model and that allows you to interact with the html code within your javascript so you hear a lot about like dom manipulation which is when you change your html using javascript reacts kind of turns all of this on its head and tracks changes to your code within react itself and this allows you to do a lot just in javascript without having to manually update the dom yourself so we'll kind of see what that means as we go through this but it's it's really nice to have yeah it and it's like it gives us some uh normalization stuff like one of the things that's really tricky with the dom is event handling because the event handling in internet explorer is a little bit different than the event handling in chrome is a little bit different from like embedded browsers on on different devices and so you would have to write all this extra code to make that work the same way and react uses its um what they call synthetic events and the virtual dom to kind of smooth over a lot of these interactions which i i it's such a like coming from the world where you know you have to write these kind of browser specific hacks or you're including a lot of like you know check the browser for you know if uh document.queryselector or document you know contains query selector all then do this or you have to do like a regular query selector or getelementbyid or all these things you know there's this really complicated kind of fallback structure for browser support and that all gets rolled up into the framework so that if you run it it just works and it feels nice yes this is so true so it's great for developer experience but also the way that the virtual dom works it makes transitions feel very smooth so whenever you load javascript onto a page it's going to be less performant than if you don't right html is the thing that the browser understands best so it's going to be the most performant but there's also this idea of perceived performance and that's how fast a page feels to your user even if behind the scenes it's using more javascript and so the page has a little bit more weight to it so i think the virtual dom makes it so that transitions are a little bit smoother and things feel a little bit faster to the end user even though in actuality maybe it's not as performant yeah and that and that's a good point too because like a a lot of the the arguments about this get dogmatic like should you ship javascript or should you only ship html yeah it's easy for someone to just like draw a hard line and say yes or no and and the the truth as with most things in programming is it depends it depends yeah and it depends on your project too um well cool so so looking at this uh so we looked at that index.html and in the index.html we have this root div so then when i come back to my index.js this is the first thing that reacted so what's happening in this file so in this file this reactdom.render method or function is taking two arguments the first one is the app component and we're getting a preview of this jsx syntax here it kind of looks like html but we're writing it in javascript code and so we're saying that our app component which we'll get to in a few minutes is going to be attached to the element with id root which we just saw in that html file we also have this react strict mode thing and this is just for like development it's going to give us better error messages i think and i think it's like stuff that isn't wrong but will be eventually is is the difference like it's like not now but soon we're gonna make a change that will that will cause this to act differently so you could you should change this now so that your stuff doesn't break later is that's at least that's how i've understood it i haven't actually like dug deep into what strict mode does yeah it's mostly just warnings and things like that this is actually pretty new to create react dev i remember coming in and all my students being like what is going on in here but um it changed overnight but we don't need to worry about it too much it'll just give us more warnings as developers it's not going to really impact the end user the really important part is that line 9 there that's taking that app component and attaching it to that document with an id root nice and that it looks like is coming from here line four we're importing app and so it looks like we're importing a couple things um the web vitals i think we can we're not going to worry about that today there's a link here if you want to learn more about that but we're importing react and react dom so i can see where we're using react-dom this makes sense to me um where are we using react why do we import react it looks like on line eight we're using react dot strict mode so we're using the extra mode from react there it used to be that every file that you used react in you needed to import it up until super super recently and that will make it so that you can use jsx within the file but the very last or the most recent version of react makes it so that you don't need to import react into every file anymore so now it'll work without it but up until very recently any file you use this jsx syntax and you needed to import react okay and then we're importing css and so this is something that that is uh this caught me off guard when i first looked at cs react so this is a plain style sheet how come i don't have to use a link like a link tag to get this in um because this is in javascript right this is this is something else yeah so this syntax is given to us using javascript modules and we're using this build tool webpack under the hood that's going to allow us to import and export things the way that we are here so it looks a little bit different than linking a css style sheet like you may have in the past if you've used vanilla html and css but this syntax will do the same within our react app nice and so that that is maybe the first thing that we're seeing that is very specific to react that's not javascript like we couldn't just open up a new javascript file and import a css file this is now something that react is providing for us or specifically webpack is is providing for us as part of our react setup yes yeah so not necessarily react specific but we do need to use additional tools in order to get this it wouldn't work natively within the browser nor would those lines eat through 10. and so i think this is the part where it becomes important like when we were talking earlier about whether you whether you need to know javascript this is where it starts to get like helpful because knowing that this is something that's being set up in your create react app project and not something that's supported in javascript will make it easier to debug and understand why things are happening the way they're happening it's not strictly knowledge it's not necessary you can absolutely just pick this up and run with it um but it's it's again that like the more you know the easier it is to to dig deeper yeah for sure so i i don't want to get too deep into it but a few people have asked so i'm going to ask you uh there's a lot of talk about css in js versus this kind of like this is just css this will work in the browser it just functions what how do you feel about css in js where we actually kind of write it in line as opposed to this or or other approaches kind of how do you how do you make decisions on on what approach you're going to use yeah i think that's another one that at least to me it depends on the project other people have more opinions on this than i do but i think that css and js is great especially when you are working on big projects where having these styles be reusable in that way or conditional is really helpful um that being said react doesn't really care how you write your css code so you can just write it like normal as well there are lots of different options here yeah yeah for sure um and so you know my what like my take on this is is exactly the same as yours i think that it depends on the team it depends on what you're trying to accomplish how many people have to work on it how far into the future it needs to survive i'm a big fan of just like a css file it makes me really happy to know that everything's in one place but when you get into the hundreds of pages or hundreds of components it gets really hard to track and you start accidentally introducing bugs and somebody will accidentally you know they'll break something or they'll add like important hacks to get around specificity problems that they they don't know enough to solve and and then you're just in for like sad times right so and that's where i think the power of css and js starts to shine is when you are like really scoping things down to just the component um but uh that is probably a whole episode in and of itself it would be to talk through the the trade-offs uh so instead let's let's get back to react and let's look at an actual so the the component that we looked at before we imported a component and then we used it so let's look at how that's built and that's this is that's this file so can you walk us through kind of what's going on in here yeah so if you go to that local host i think it's on 8 000 tab that we have in the browser you can see that when we ran our react application it actually has something displaying on the page right now and that stuff is written in our app.js right now so you can see that on line eight we have this logo that we are rendering on the page and so this is again this jsx code we have this function and it's returning what looks like html from it it's not actually html it's a little bit different than that but you can edit any of this html code and then those edits will actually show up on the page so if we strip everything in this div with class name app okay now we've just got an empty div yep and if we save this file then it should make it so that now our localhost 3000 or 8000 is just a white page we're no longer returning anything from it it so whatever we return from this return inside of our app is going to show up on the page so if we put like in each one hello world in there okay there it is there's our hello world there you go and and a couple things that are worth noting here um so this is just html like uh the the major difference here is that we're writing class name instead of class is there do you know why we do that yeah so in javascript there's a thing called a class and that thing called of a class is there for us to use object-oriented programming within our javascript code so it means something there it also means something within html in html it's a class for your css to decide which elements to apply a set of styles to so since these mean two different things within html and javascript we got to pick one to use and since we're already in javascript in react we change some of those html attribute names so one of them is class theme which we use instead of class that will work exactly like a css class that you may have used in the past just this time you call it something else so that we can still have that thing called a class within javascript as well and there are a few of these right so it's it's any time that there's a collision with a javascript keyword so another one that that i can think of is like you would have a for loop um but you can also have a label with a four attribute to describe like which input the label is for and so that one um what do they rename that one too it's html4 like that yeah and so you'll see a few of these in react and this can be a little bit of a gotcha as you as you initially start but the nice thing about something like um like create react app is i think it's just gonna tell us yeah it'll give you a warning in the console so it'll actually work as expected just it'll tell you and it says you mean class name yeah so this is really nice like i it's something that i think is is again it's well considered because we're trying to avoid collisions but they're not breaking the app they're just telling you like hey this is probably not going to work the way that you want in all in all situations and i i dig that um well cool so okay and so then um from here what what else should we what else should we do like what should we do next okay so my idea for an app is to build a color switcher and what that will allow us to do is have a couple buttons that are different colors and when we click on one of them it changes the background color of the whole page so it's nothing super complex but it's going to show us a bunch of the fundamentals of react i'm into it cool all right so i'm gonna just clean this up to get to just the stuff we need so i i removed the logo because we're not using it anymore and i think i think we're ready so what what should we do first let's create three buttons okay so one will be red one will be blue and one will be yellow or we could do other colors as well but like the primaries um why did i what have i done i've forgotten oh no i've forgotten how all of my shortcuts work why doesn't this do what i wanted to there it is uh red yellow and blue wow my spelling today is it's hard it's going well okay type a cool and let's go ahead and add some classes to those two so we'll use the class name attribute on each of these and make them correspond to the color on each button so we'll add the red class the red one yellow class to the yellow one and a blue class to the blue one okay oh here we go with the stampede [Music] [Laughter] i'm so glad that i brought this back i i had the sound off for a long time because it was just like ear splittingly loud and i figured out how to turn it down so i'm i'm very happy about that that's so fun um okay now let's go ahead and add in another div that contains all of these buttons and stuff just so that we can position them on the page and still color that app div gotcha okay so i'm going to add my container here and this functionally didn't do anything exactly okay yeah just for styling for now and so then let's add some css in our app.js or sorry our app.css so this is another thing that we can chat about real quick is that before we saw that the index.css was being imported and now we're using the app.css this is another decision that you can make so you can either put all of your styles for your whole entire application in that index css that's perfectly valid if that's what you want to do but you could also write component specific styles within the componentname.css file if you wanted to so in this case we're using this app.css file to write css for app.js and we are importing that app css in the app.js file okay um and so now yeah so if i do something like let's just make this red to see what happens we can see that there and so you want this to be like full width yeah yeah okay so let's make it so that that app is the whole height and width of the page okay so let's go with like we'll make it a grid and then we'll make it height 100 and maybe like a width of 100 that does what we want and then we could do because we've got the the thingy here we can play with a little bit of grid stuff and like uh align items center i think we'll do it vertical vertical centering in css uh they said it couldn't be done i love that you did it this way too because i would have done it a different way so it's so fun the different ways to to do something just like making the div the height and width of the page so yeah i mean it's this is i think the thing that's so exciting and so frustrating about css is that you can solve the problem a thousand different ways and so it's hard to get a straight answer because the answer as with everything is it depends [Laughter] so true so true okay so let's also make it so that our red button's red our yellow buttons yellow and our blue buttons blue okay so let me make this to start then probably do you think just like make it white again so that we can see our buttons okay and so we can do something like have a button style that will give us some basics so we can do like a border of uh like a black border and we can give it a little bit of a like a border radius to make it look buttony um and maybe make the font size a little bit bigger so like that and then we can do a button dot red can have a background of red um and then we can duplicate these and do blue and yellow and i think that'll get us oh that's rough um uh let's make the blue one we'll do a uh white behold my bucket and maybe to make that just a little bit more legible we can make it bold okay and maybe a margin of like give it a little space look at it go there we go those are amazing this one might not pass contrast but um we're learning we're learning today yeah yeah um okay one other thing and we could come back to this down the road but maybe just so that we can abandon this style sheet is if we remove the button from the red class in the blue class in the yellow class it'll make it so that we could reuse the red class on the body background as well oh interesting okay just to make our lives a little bit easier in the future but if you wanted to just style the buttons that's perfect but this will make it so that we can reuse the red class on the whole entire body i get what you're saying yeah no that totally makes sense too and and we'll get to see some cool stuff like the color adjusting to the background so that this will stay legible as well which is kind of nice yes okay all right so we've got some some basic styling setup we've got our our container i've got buttons but if i start clicking these nothing happens nothing happens at all what we want to have happen though is if we add a class right now to the app div if we add like the red class to it see how the look at it goes background changes and if we change it to yellow or blue it would do that as well we want to in our react code make it so that we can add this second class dynamically yes so we could add a red class or a yellow class or a blue class in our react code okay this is a preview of what's to come great okay so now we need to have a variable that changes to red yellow or blue and within react if we have a variable that we want to have change within our component as it runs we're going to use use state use state is a react hook react hooks are a little bit more recent within react they're they were introduced at the end of 2018 i believe so they are definitely in the last couple years instead of something that's been around the whole entire time but we can import this use state hook from react and this is going to allow us to use functions to write our react code back in the day you needed to use classes to write these react components if you had any state within them and state is the data that's going to change within the life of our component so if you're looking at older react code you'll see it all be classes and up until recently that's what you needed to use if you see things like component did mount or anything like that those fall into those class-based components the function based ones with hooks are more recent and these hooks allow us to use the react lifecycle and state within these function-based components the syntax from them is really nice it's a lot less verbose than writing these class-based components i think both are still totally valid but i really like writing hooks now so that's what we'll be doing today i think it's a little bit more beginner friendly too i it definitely so it's beginner friendly once you get past the initial weirdness of destructuring syntax i think is the is the part that throws me the most so there's a couple things that happen here where like this if you've never seen it before is destructuring so what we're doing is we're getting react and then we're doing use state equals react use state like that um yes but we don't need all of react for that right we can just go right here and then we get to skip that whole step that is really really pleasant and then use state is kind of the so if i'm gonna use use state right it's a function so i know that much um how do we actually interact with this like does it how do we how do we use it okay so let's provide something to use state so let's say in quotes red just to start out with okay and then what we'll do is we'll save this to a variable so const color equals use date red okay and then let's console.log what color is on the next line i'm gonna do it like this so that we can see the label this is one of my favorite debugging tips is if you if you add the quotes like this it'll say color and then what the value is love that okay so we've got a color and if you look in the console this is actually giving us two things back so it's an array with two items in there the first item is red and red is what we passed into that you state function that's going to be your initial value for state usually you'll see like an empty string or an empty object or empty array or something like that passed in but you can pass a default and that will be what your state variable is set to by default and again state is just data that's going to change in our application then the second thing is a function this function is given back to us by this use state function as well and it's going to allow us to update that value in state so if we wanted to change the variable or that's now set to red to be blue instead we would use that function that's returned okay and so if we look at that like how you would maybe we can call this one state instead and then we would get color by doing like the first entry in the array exactly and we would be able we can use the that function is how we would set the color and so we get it like this is that right yes you can very much do this and then now you have these two variables color and set color you could use those within your application that being said most almost always you'll see this all in one line just because three lines of code every single time that you want to use this used state it's a little clunky and could lead to some bugs because more code than you need and so what you'll normally see is on line five if we change state to an array with color and set color in there now we can drop all of that that will do the exact same thing where it's setting the first item in that array to the color variable the second thing in the array to the set color variable and now if we look when we log color it's it's red it's not an array anymore that so and this is again this is destructuring so up here we're restructuring an object that's where the the curly boys come in and then when it's an array you use the square boys yeah this is another thing where we were talking about knowing javascript versus knowing react this is built into javascript so you can do this in any javascript code that you want and just run it in the browser this isn't a react feature or anything like that it's just javascript yeah exactly and this is i mean this is something that it's a little a little head bendy when you see it the first time but it's such a power up when you when you get comfortable with it because it just saves like you said if you write extra lines of code that's more places for things to go wrong if everything's contained it just feels a little more i don't know approachable a little less spaghetti-ish agreed agreed uh the mdn documentation or mozilla developer network i think now i'm like what does mdn stand for um uses has really great documentation on array destructuring so if you're interested in learning more that's a really great resource destructuring assignment this this will be a good uh primer on that there's probably more pages with more specific things in there but that is uh that is pretty excellent pretty much their stuff on everything is excellent yeah mdn is definitely my go-to i use it every single day amazing so i think the next thing that we want to do is use that color variable within our class name so on line 10 we have the app class already there but we can also have this secondary color here and if you do that this is going to add the word color to our div but we want the variable instead of the word color so if you look at it now yeah how do i get it to show me the html i just switched to firefox and so i'm learning okay i'm such a i've been using chrome for too long though you know i i fought it for as long as i could but potato salad i fought it for as long as i could but i'm on an older macbook and chrome now has like a memory leak or something where it gets completely unusable at beach balls on me so i i switched to firefox out of out of necessity uh not out of any any particular stance i'm actually still kind of salty at mdn for laying everybody on yeah oh my goodness i was a mozilla tech speaker part of that program which was really really cool so i was really sad when that disbanded yeah at the same time um okay cool so we can use javascript variables within these class names and what we'll do is we'll put that whole entire string so everything from app to color within curly braces the curly braces tell react that this is javascript code instead of just text and then what we can do is change the double quotes to backticks which will allow us to use string interpolation okay this is another es6 thing just javascript not react and then what we can do is put the color in curly braces and add a dollar sign before it and this will allow us to have the color variable instead of just the word a color and if you all were looking you can see that as soon as i add that dollar sign vs code recognizes that this is something special and it changes the highlighting and so that's that to me is is always helpful to to notice that if i remove this it goes back to looking like a string and now it now it knows that it's javascript text editors are so helpful like knowing your developer tools is one of the things that really just that levels you up as a developer absolutely but now you can see that the word red is plugged in instead of the word color and our background turned red to match and if we changed it to blue boom then we get blue as well there we go okay all right i'm feeling it so uh so from here then we still we just got to make these buttons click clicky exactly so in vanilla javascript you would add an event listener to an element tell listen for a person clicking on it and then fire that event listener on click and we're going to do the same thing within react the syntax is a little bit different but it's the same basic idea okay so what we'll do is inside of the open button tag on line 13 we'll add on click uh line 13 ad on click okay um there's a question in the chat about the curly braces around app color um can you can you remind us why these ones are here yes so anytime that we want to write javascript code so we don't just want it to be a string we need to add those curly braces in and that will tell react that we want to write javascript code in this area otherwise it's like the hard-coded word color instead of the string color or instead of the variable color great and so um i imagine we're probably going to need that right now right on this on click exactly yep so we'll do on click equals curly braces and then we can write a function inside of here so maybe for now we can do an arrow function that console logs clicked or something along those lines okay here's my okay auto formatted that's helpful so our on click we have a an arrow function and it's gonna console log and that's all that this does so now when we click red and only red we should see a log okay nothing happens when we click yellow or blue good okay all right cool so we want to build on this a little bit more and we discussed that we have this set color function and the set color function is going to allow us to change what the color variable is so what we'll go ahead and do is use that set color function inside the on click right in here yep okay and we'll set it to red okay and so is this like i can just copy paste this between each one right yeah let's try it out first but good call good call we're gonna go okay so so red works and if i i'll refresh the page so we can see that again so we default to blue right if i click yellow we haven't added anything blue haven't added anything but when i click red it calls this and watch this so do you see how it went white when i refreshed the page how come it's not doing that when i when i click red this is like react nice transitions and all of that but also because the variable's set to blue by default so it's not having to go back to white to go to red right yeah because like when we when we refresh the page we're doing like a whole load right like i'm saying hey browser go get this file and then load it and parse the javascript and then show things and read the css and now when i click this it's it's it gets to skip all that right exactly yeah that's oh that's so powerful like and and this is kind of where i i feel like the for me at least now that we're getting into dynamic stuff like user interactions this is where the light bulb really went on for me when i started using react was like whoa i can do all of that with this and that's really the power of this state too is that it'll automatically redraw for you without you needing to set anything the variable will just set that will trigger the page repainting with the new color and so now i can just pop between these exactly wow that is cool and and like how nice is that that it it just works the way that we want it to work too right like that's um that is it's really really slick that you can do this kind of stuff so quickly in yeah yeah one other thing to talk about is i think people are like why can't you just do color equals blue or something along those lines instead of using the set color function and the reason for that is that the page won't actually update with the state if we do color equals that new um that new color so it is important to use the state because it will make it so that react automatically updates our page with our changes so a question i have then is when i'm looking at this um and this is this is beautiful but i can see like this also could get a little repetitive where we've got like we're setting a class name and we're we're setting up the button and all this stuff is there how would we use react to to simplify this a little bit yeah do you want to write a second component heck yes i want to write a second component amazing amazing so this is the really nice part of react is that we can start reusing this code so our three buttons right now have really similar code in between them they all have a class name they all have an on click event with a color they all have the color as their text and so instead of having to write this from scratch every single time because again the more code that we write the more potential problems that we can have right we can reuse this as a component and so we can write a second component by creating a second component file so maybe we'll call it button.js or colorbutton.js i think we can probably stick with button and then oh so here's a question index.js is not capitalized app.js is capitalized should button be capitalized i normally capitalize my component name files okay so i would capitalize it and and there's not like a rule for this this is just a thing that it's more for like us to see oh this is capitalized it means it's a component exactly it's a convention got it got it okay cool so inside of this file we can create a second component we will create a javascript function okay or copy that into we'll have to do that yeah i figured we this is this is what we want to abstract out right it's like this is the part that gets reused and so if i want to create a function and i name it i can just call it button right yep okay and then we want to return this button code from it okay okay cool the one last thing that we need to do is export the button file or the button component sorry not the file and that will allow us to import it into other files so we've been using this import syntax throughout import use date from react or import app from app.js if we want to import something into another file we need to export it from the file that we write it in and we're actually already doing this and the app.js is just down below oh there it is so same thing we can just go down here and export default button is that right exactly okay what does default mean this is going to make it so it's the default export from the file and we can just import button from button.js you so we have the import app from app.js within the index.js this allows us to import like that okay so it's going to be like button.js um okay so now i have my button and so if i if i didn't have the default then whatever we would need to use that other import syntax where we're destructuring the item that's being um imported so without default it would be like this okay that makes sense okay great so now i have my button i am getting an error and it looks like oh i know why it's because we've got this set color but that like how did that get in here we don't yeah so that was defined in our app.js or instead of in our button.js so why don't for now we just comment it out and make it so that our three buttons show up on the page as needed and we'll come back to that set color in a minute but that's a good note that right now our set color is erroring out because it's defined in my app.js but not in my bet in js we'll come back okay so um to use this then i can just delete this all together yep we can delete these three buttons that we have written and then delete the first one yeah okay all right let's go cool okay more than one on there it would show up like we wanted as well so let's get these buttons out now we've got our three buttons oh okay but they're all red um there were some changes between the three different buttons they were mostly the same but the one thing that changed between them was the name of the color and so what we can do is when we are creating an instance of the component we can pass in the color for each button and then use that and this is called using props props allow us to pass data from one component to another and make it so that we can have instances of a component that have information that differs between them okay and so i'm i'm setting this up like i'm i just want to be able to say this is my this is my button and i want it to be blue exactly so now we have three buttons each one has a different color got it cool now if we go back to the button js and i just saved and nothing happened here because we haven't used this yet right exactly yeah we still have the hard-coded red everywhere so inside of line one we're going to pass props as the argument to the function props props props pops would be fun too [Laughter] i like that and if we console what props is here we will get what oh look our color of red our color of yellow our color of blue so yeah does that mean i can put i can put whatever i want in here and it'll just like give me that exactly and underneath the hood react is turning it into an object which is more usable for us so you can see that now that one has test and high in it okay all right so that makes sense i get that so then i can i can just use this as like so do i have to do it like this you can directly use props.color if you want but the string interpolation should work as well so i can i can use it directly like i don't have to to do this this bit here there you go that looks cleaner to me i'm happy cool and then let's also set the t so now we've got one yellow that's blue as well and then on line 11 we can substitute in the prop stat color as well and this will also need to go in curlies so anything that we want to use the variable we need to put curlies around if you remove those curlys every single button is literally going to say props that color got it so this is the the curlies are the signal to to react that like hey i'm doing something here yep gotcha okay and then it looks like i did uh you know the the thing is lowercase if we wanted to we could go through here and use javascript to like make this uppercase or or we could do something where you could write different texts but i think we i think we can call this good enough right yeah i think i think people will understand okay amazing so the last thing that we need to do is actually get this set color working yes and right now we have set color wired up in app.js and we're going to need access to color in that app.js style because that's where we use that variable to decide the color of the body so that needs to stay in the app.js component but we also need to get access to that set color within this component we just went over how to pass data from one component to another and that's props so even though set color is a function we can still send it as props from this app component to the button component so i can just put it right in exactly like this i think because it's javascript exactly okay needs the curly's sense of javascript and then now in button.js it needs to be we can comment line 8 back in but now this would come from props and so we can we can destructure this now right like we can use that same destructuring syntax and get exactly color thank you for the sub ben i appreciate it oh i can turn on my my goofy here we go look at look at me look at me appreciating you and so then we'll get set color and so then i can just edit out the props dot here exactly okay that looks pretty healthy that looks clean look at that that is that is lovely amazing and then let's change the hard-coded red on line seven to color as well or we could just make it so that every button turns the background red oh that's a good catch i was i would have missed that so um so now what we're doing is i'm passing in a color for my button and we're dynamically telling set color what color to use that's and so okay so we you just showed something that i think is is so small but so important we just made this completely dynamic so check this out now we've got these buttons and i can go red yellow blue but also look at this what if i go like [Music] purple and then i go into my app.css and add a purple button um this is gonna need to be on white isn't it oh whoops i forgot to change the actual name of the thing there it is and so now we have like support for purple and so i didn't have to write new javascript i just had to create a new instance of this button that is really like this i think is where where the power of this comes in is like you know we can we can drop things in and out and just add more more and more as we go um really really powerfully yeah so handy react is so great for for things like this and you could even write it as an inline style so you don't need to have the new class in here too but we'll oh that's a fun idea what if we tried that so instead of cl and oh we can do a little bit of css in js here um so if we if we're gonna do that we would instead of using the class name how would we do this so we could add a style here okay and then style is going to work a little bit different than inline styles in html it's actually going to take an object instead so this is going to look weird we need two sets of curly braces one set of curly braces to say that this is javascript the second set to say that this is an object of styles okay here we can just do color or background color set to color i think background this isn't going to work is it that's another really great catch so the dash doesn't work as a variable name within javascript okay we instead within these styles we'll use camel case so we will delete the hyphen but add a capital c got it amazing and then we need yeah this should work so now we've got to do the same thing with our app.js with our app.js um oh you're right you're right okay so but for this one oh this is gonna get fun so instead of using or we can just leave that actually so then we're gonna have a style and we're gonna set the background color to be color and i can delete this that's fine [Music] okay cool so now red yellow blue and you can see like the the thing that we lose is i can't change the text color without doing extra javascript logic so this is where you know writing css for style things starts to make more sense um but check this power out because now if i do like i don't know what's uh here's a good here's a good javascript color tomato now i have a tomato button and i can just keep going like i can i can add more and more buttons and i don't have to change anything else it's just gonna work and that i think is is really where this starts to shine um because now we've got this flexibility right and like we could do this with uh with more thoughtful css generation too where it was you know and really in any production app probably the designers would would pound down our doors and drag us out into the street if we started arbitrarily adding color options in for sure for sure but this is cool for showing how javascript stuff works um i even have had an apps before a function that determines how dark the background color is and then decides on white or black text depending on that oh very cool a function that you could add in i think there's like stack overflow snippets for stuff like this yeah i think what what is yeah there's they're like contrast checkers that you can that you can use um to make that stuff work so yeah this is this is super cool i feel like this is uh this is kind of a solid overview so so maybe just to recap what we've done thus far we used uh the create react app which is somewhere over here create react app here so we we just used create react app which is a one-liner um with npx so that's not what i meant to send you um just dropping arbitrary react code into the chat uh so the um we use create react app so npx create react app and then we called this one let's learn react we started it and then we we just edited like app.js and that's really all we've had to do and we've been able to create what i would consider to be a pretty like a pretty full featured you know this isn't like an app where you're going to ship to the app store or anything but but in terms of what we were able to do we've got user interactions we've got styles we've got dynamic loading the the fact that this isn't reloading the page when we click buttons there's a lot going on in here yeah for sure and it also shows a lot of the different concepts within react so we have two different components and reusable components is one of the core pieces of react that really makes it beneficial that you have all of your user interface and user interaction code all bundled into one so we have all of our logic for changing the background color and all of the code that shows up in the app in the app.js and then we also are showing the two types of data within react as well so state is any data that's going to change within your component so our color variable here is in this app in this component is state so our color changes our background changes to match that state color and so that's state the other one is props and props allows us to pass data from one component to another making it so that our different buttons can have different colors associated with them and how we can combine them too because we're able to to use props to pass around this function to control state which for sure which is really kind of interesting because it it it shows that this isn't like an either or it's you you get to do any combination of things um and as you get more advanced like there are lots of patterns that are established that make this more approachable um so so oh geez this i'm so happy with how much we got done uh so we've got about 15 minutes left and i i wonder is there anything else that you wanted to build or or would you prefer to show like some extra resources for people to take next steps oh other resources would be great yeah let's let's do that so if i if i want to go further from here and and learn something more um where should i go what what's a good starting point there's so many so many react resources out there i think some of my favorites are ken c dodds creates so many great react resources he has some courses that are out there that are really excellent um the react documentation itself i think is really great as well i always love starting at the documentation level just because you then you understand where the authors are coming from of react itself you get really really reliable information um they also have a ton of resources linked in here i think under the community tab of resources that they recommend for getting started with react as well my where should i be looking here is this up next to it's like docs tutorial world community community i was looking in the sidebar here oh no you're good see articles oh look at that there's a whole bunch in here yeah and so these will be mostly free as well which is really great and they've got different modalities too so if you learn better via video or something along those lines there's that as well uh dave sedia also has really really great react resources let's see complete react tutorial that seems yeah this resource is amazing if you want to go deeper on what we learned today it'll be review for the first couple sections and then go deeper on how to uh call an epi and things like that from here and actually deploy it as well you know one thing that that might be worth looking at i we might not have time but uh the the chat was asking if we could cover use effect really quick oh that's going to be a tough one in the time we have remaining i think so if if somebody wants an intro to use effect do you have something that they could watch that would kind of show them how it works i don't personally but this tutorial linked here uh the dave sedio one has a bunch unused effect in it so that's really great and also the react docs as well uh dana ibramoff this is more advanced but he also has a massive blog post about use the fact it's like a half an hour read or something like that so i really really enjoyed that when i was teaching react just because it really gave me a great basis on that um not it's on overreacted right yeah it's unoverreacted uh come on i think it's maybe maybe it's called something different complete guide to use effect was that it it's this one right this giant 49 minute holy crap yeah okay that's even more than that 49. this is a book [Laughter] um but this so this is this is deep deep um but i think i think what's cool about this is like this is sort of that joy you can always choose how much you want to learn because the the docs here for use effect are going to show you what happens like it'll it'll run you know use effect is is for i guess the shorthand is like you when things change like if if something happens like the component mounts or unmounts or a piece of state changes or or something you can use use effect to track that um but it's so it's i feel like it's that easy and it's that hard is a is a good description of use effect like it sounds so simple when you describe it and then you start looking at the edge cases and what all can be done with it and it's like wow that does a lot it does a ton and it also is a little dangerous too i feel like i've never written as many infinite loops as i have with use effect yeah it's it's definitely something that is like if there's anything in react that's gonna trip you up it's it's this is probably where it's gonna start is is gonna be in use effect because it's use effect is like an escape hatch from the way that react wants you to do things which means that you are now kind of stepping into into territory where things get tricky because everybody's got their own way that they do things everybody's got like their different use cases this is you're gonna see a lot of animations end up in in use effect stuff um but uh yeah it's it's worth learning it's worth learning like deeply to make sure that you would need a whole another yeah one of these sessions for use effect absolutely on these same ones i want to give two shout outs to developer tooling for react the first is the reactive tools in the browser i have used that chrome extension for forever and it will really help you debug what state and props are at different points and if you have anything like a use effect that's going crazy why it's doing that um the other thing that would be really helpful is that there is a library of snippets for vs code that i use all the time and it's like react snippets or something like that and it allows you to use emmet like abbreviations to write react components i'm so reliant on things like this because is it this one here i don't think it's this one let me see which one i have it's like react es7 something es7 react redux graphql react native snippets okay yes great oh yeah two million installs that looks useful i actually don't have this one and now i now i want it um it is so nice you can do like rfc to write a react function based component or rcc to do a class based component dang okay all right you have my attention um okay so that is that is super cool and uh with that i think we are running a little bit low on time so let me do one more shout out to uh to jordan and white coat captioning who have been with us today uh doing live captioning for the show that is always available at lwj.dev right here in this big box while we're live um that is made possible through the generous sponsorships of what happened here look at that what did i do i have no idea but david is getting a lot of attention that is made possible through the generous sponsorships of nellify fauna auth0 and hasura all of whom are kicking in to make this show more accessible which i very much appreciate uh ali if people want to find more about you where should we send them so a couple places first twitter i feel like that's the hub of everything um then i also have a youtube channel that's kind of new it's ali spittle dev and my blog is we learn code i also hang out on dev2 a lot i don't know i'm pretty much out uh a spittle everywhere on the internet okay there's this the right channel yes it looks like it yes okay [Music] so go yeah go go subscribe go do all the things get uh get in touch with ali definitely follow her on twitter it is a a a great feed to be a part of um aly thank you so much for taking some time to hang out with us today and teach us react this was a lot of fun yeah thank you so much for having me this has been really really awesome i've i've had an absolute blast chat i hope you had as much fun as we did uh make sure you tune in later this week because we've got so much good stuff coming uh ali was here today we have uh uh scott moss coming on thursday and we're gonna learn next.js next is a react framework so it's like a framework built on top of react for building sites it has all sorts of extra features that we will talk about it's a great kind of next step if you've been learning react and you want to learn what else you can do here we go with another stampede um and then next week we are going to be talking about vue and the composition api so ben hong was here and he did a great introduction to view you can go find that in the episodes list uh and then sarah drasner on thursday is gonna come in and talk about how she looks for people what makes someone stand out when she's hiring and also how we can do more to make ourselves uh more likely to get that interview to get that job that's going to be a really interesting episode it's going to be q a based so go check out the schedule make sure you add the calendar so that you can see things coming it's going to be a great a great next couple of weeks and there's just more and more after that so so make sure you go check it out and uh i think with that ally thank you again chat thank you as always um stay tuned we're gonna raid and let's all go out there and do our best to to help people up not hold each other down we'll see you next time you

Channel: Learn With Jason

Views: 3,945

Keywords: React, Ali Spittel, Learn With Jason, JavaScript, JS, JavaScript Frameworks

Id: w4kMM96ohDc

Length: 85min 28sec (5128 seconds)

Published: Wed Jan 13 2021