00:00:00
We're going to talk about a hundred devs. We're going to jump into like, what is React? What are components? What are props? What are state? We're going to do some things to help us learn React, see some bad code, see some examples. And then you're going to have some homework that's a reading and some videos to watch. And then next week we put more stuff into practice. We go deeper. I'm leaving out all the big words tonight. No disrespectful stuff. We're just going to do the basics, see it, understand it. And we'll get into the heavy lifting tomorrow. Maybe a slightly shorter class, maybe a little end early action tonight because we're gonna we're just gonna let things sink in Marinate over the weekend right and then come back with these concepts baked in React folks it's time for some react now with react See some examples in action but my warning is

00:01:00
that we're gonna be baddies, we're gonna see some bad code. I'm gonna save all the heavy lifting for next week. All right. The place I always ask folks to start with React and what I assigned for homework was the React docs. You'll also notice that the beta version of the new docs just dropped recently. So you might've been reading the docs and notice at the top bar that there's new beta docs. React honestly has some of the best documentation in the game. When you have to sit down and learn a new library, a new framework, a new whatever, the place you're often going to start is with the documentation. And sometimes that documentation is old, dusty, it's confusing, but the React docs are pretty good. So in the spirit of getting used to reading documentation, in the spirit of

00:02:00
knowing that you're gonna be transitioning to a job where reading documentation has become part of your daily life, it makes sense to get started using the React docs because they are just that good. For a lot of folks, you wanna employ strategies to help you get through reading. Some folks will use readers that will read aloud stuff to them. Some folks will install plugins like beeline reader, which makes it easier to read through things. But you have to get comfortable with the idea of reading through material because a lot of times there won't be books. Sorry. Sorry, there won't be videos. There won't be tutorials or the stuff you need isn't yet available in those types of mediums. And so the reading is really important. And I can't tell you how much of my day when I'm learning new stuff is spent reading documentation. And I want you to get comfortable with it before you're on the job. So the homework to start off with, start it with the docs. Cool.

00:03:00
Now, if you've given it the good old 100 devs try, Right and you still need a little bit more help mine wolf in their last dreams has actually walked through the docks together so Once again community taught give it the gold good old hundred devs try right and then after You've given that good old hundred devs try if you still need a little bit more kind of working together through it Definitely check out my own streams. I'll link them in the follow-on follow-up Cool Let's start with a little bit of ES6 Plus review. When I say ES6 Plus, what the heck do I mean? ES6 Plus, what do I mean? MinMule said after 2015,

00:04:00
okay, yep. ECMAScript, yep. So the standard of which we use to build JavaScript is called ECMAScript. And in 2015, a lot of significant changes happened and it started a development cycle that added on to the specification for JavaScript that added a lot of features. And so we call all these like newer features ES6 plus. So from 2015 forward, kind of all the latest stuff that gets baked in the JavaScript. And a lot of these newer features that you might not have come across too often are actually heavily used in react. So I like to start off with just a little bit of review. Uh, just before we start looking at code tonight, the code really doesn't matter. Like you don't have to understand it. you

00:05:00
don't have to really get intimate with it. But as we go deeper, especially as you do the tutorials, especially as we get ready for next week, you're gonna see some of this stuff quite often. So it makes sense just to kind of highlight it very quickly. We're gonna see classes in the beginning. Throw out the arguments class functions I don't care about right now. We'll get into that all next week, but you're gonna see classes again. It's important to note that classes enable us to spit out objects. We have this lovely constructor object that enables us to spit it out. we have the ability to have methods on our classes. And so the objects that we get from these classes can have properties that are assigned and they can have methods that were assigned as well. If you think of classes like our templates for objects exactly, we're gonna be using it to create components in the beginning before switching to functional components. All right. Another thing that you're gonna see quite often are spread operators. and there's both an array spread and an object spread.

00:06:00
So here are two variables foo and bar, and we can see that they're both set equal to an array. When I do the ellipses, the three dots followed by the variable name, I can actually pull all the values out of the array without having to do things like looping through it, et cetera, right? if I create a new array with my square brackets using literal notation, and I do the ellipses for the two variables, I wind up with a new array that has all the values inside of it, kind of replacing any type of concatenation that we might've done before, or anything that we might've done to like loop through, we can just spread out these values and create really new arrays, and combine different arrays together, it makes life a lot easier. And when we start seeing React code, you're going to see this quite often. And so it's helpful

00:07:00
to know, all right, this is a spread operator. All we're doing is pulling the values out of that array and using them. Folks are saying, I use this today on Code Wars. Yeah, this shows up in tons of Code Wars solutions. So definitely something you want to have in your repertoire. Definitely comes in clutch with Code Wars for sure. Cool. There's also an object spread, which you're gonna see a lot, especially when it comes to React, where you have kind of your style or part of a component as well. And so if we look at this spread, we have this lovely object up here called default style. And then inside of this style object, you can see that I spread the object. And what's going to happen is all the, all of the values that were in this, hold on one second,

00:08:00
demo pro, all the values that were inside of this default style are now gonna make their way into this style object. So what winds up happening is that inside a style, there will also be a color black, there will also be a font size 12, there will also be a font weight normal, and I don't have to constantly keep retyping this, I can just spread that object wherever I need it, right? Now, this code, right, this code that we're seeing is gonna pop up in, I'm sorry, I have something in my eye, Jesus. This code that you're seeing is gonna pop up in the two tutorials that I just shared with you on the previous slides. So just know that's something that you're gonna see kind of over and over again. All right.

00:09:00
We have this idea here that we can pull in these values. And then something that will also be helpful is that you have to remember that it's still read from top to bottom. and so what will wind up happening is we passed in these three values with the spread, but we still overrided the font weight, right, from what was originally normal to bold. And so what you'll see here is that the final style object has a font weight of bold. Even though the spread was there, the cascade is kind of still in effect. It's kind of like a cascade, exactly. Cool. All right. So we're actually going to see this tonight. And so when we get to it, we'll see. All right. This is some lovely spreading here. We also have destructuring. And destructuring is a really important

00:10:00
concept that we've actually seen already in our backend code. And I think it's really important that you take some time to understand it a little bit more deeply cause it just does come up a hell of a lot. And so Free Code Camp actually has a wonderful article on destructuring that is linked here in the slide. You can just click that link and read it, make that part of your homework. The beautiful thing about destructuring is you can do it with arrays and you can do it with objects. Jason Derulo, hey, how you doing? Thank you for getting this up, so I hope you're doing well, good to see you. Yeah, this is all over the place in React. Yeah, it really is. You're gonna see destructuring everywhere, so it makes sense to get comfortable with it. Here you can see some very simple syntax where we have name and team and we have two values. and basically what we're able to do is to

00:11:00
pull all the values out of this array and give them a variable name that we can use. So very quickly instead of having to like loop through and like assign variable names to each value inside of the array, we can use this notation and very quickly be able to say alright name is now Bob, team is now 100 devs and loop through it. Array destructuring, we'll see we've actually already seen object destructuring. And object destructuring is kind of the same thing. This is kind of following the template from the free code camp article. But in this case, we have mascot with name of Bob and team of 100 devs. And I'm able to create individual variables of name and team from this original objects. When I say name, I get Bob when I say team, I get 100 devs, I'm I'm not actually using the object. I'm just kind of pulling these values out. Well, I'll say destructure all the time. Exactly. Where have

00:12:00
we seen, where have we seen destructuring so far? Yeah, so when we did Brad's authentication course, their authentication, the insure auth, the insure guest, right? That insure auth, that insure guest, that was an example of destructuring, right? That was a big old object that we were able to pull out the pieces that we wanted, give them their own variables and use them inside of our files. And so we carried that code over to our binary upload boom as well. And so we have already been using destructuring even if you haven't known that you're using destructuring. So we've seen it in our past code. you're gonna see it react all

00:13:00
the time, right? Cool. So definitely give this article a read. And when you see the syntax, don't freak out. When you see the syntax here, don't freak out. We see the syntax here, don't freak out. You can definitely go through and understand destructuring in more detail and know that it comes up quite often. Cool. All right. All right, this is my warning. Tonight, we're not looking at good code. Tonight, we're not looking at clean code. We're not looking at good React examples. We're looking at old stuff. We're looking at bad stuff. We're gonna be baddies and write bad code because tonight has nothing to do with the code. It has nothing to do with actually writing components. It

00:14:00
has nothing to do with the actual syntax that we'll be using going forward. Tonight is simply, I want you to walk away understanding why. So this is my warning. If you're a code weenie, get out. This is not going to be a good class for you. You're going to have a really rough time over the next few hours. Uh, so yeah, my, my, my warning, I'm about to be a baddie. We're going to write some bad code. We're going to look at some bad code. We're going to look at some old code. Right. And, uh, I always get this question and I just want to be very clear. Um, I have people like, I, I've read some of the DMS in the past and I'll, this is a very common DM, especially when I get to react, Leon, how dare you teach them that, that old way of doing things? You're setting them up for a lifetime of react failure. and my response is always how many folks have you helped get jobs in the last six months because if it's less than a hundred you're not on my numbers

00:15:00
you're not on my numbers if it's less than a hundred you ain't on my numbers that means hundreds of companies hundreds of companies that I am seeing people walk into. I am getting the real boots on the ground. What they're experiencing, what they're working on. And I could tell you right now, one of the most common things that a lot of my folks that are walking into entry-level rules are doing is they're updating React code bases from class-based components to functional components. So why would I not teach both, right? Why would I not show you some bad code? Why would I not say, Hey, this is some things you're probably still going to see out in the wild, right? This is some things that I'm seeing my students having to work on quite frequently. And so, yeah, I'm going to still show it. So if you're

00:16:00
code weenie, you're getting ready to send me that message. You already know what my response is going to be. It floats all over again, exactly. It floats all over again. But that being said, things have fundamentally changed, right, and so I want that to be very clear. The way that we're writing React has changed, it's changed over the last year or two, and for the better. There are lots of improvements that we're gonna talk about next week that make our lives easier, but tonight's not about any of that, it's just understanding why React. All right, React is a library for handling your UI. That's it, have a wonderful night everybody. Hope you do well, have a great weekend. I will see you on Sunday for the continuation of the Super Review, that's it. All right everybody, let's figure out who we're gonna raid. Let's see who's online. No, please don't leave. React is

00:17:00
a library for handling your UI. It very simply allows you to write components, which you can reuse and extend when needed. And it does not handle anything else. So I used a couple of big words that we're gonna break down tonight, but it's simply a library for handling your UI. That's it. What the heck is a UI? That's my first question in the chat. What's a UI to user interface. Exactly. It's a user interface. It's the thing that our users are going to interface with to use your application. Right. And so if we look at an older UI, this is kind of Facebook's old UI for folks that aren't, that aren't hip yet. Facebook was the folks that kind of initially helped develop and popularize react and they

00:18:00
used it to solve some very real problems that they were facing as their code base got larger. Okay, so what we're looking at right now is Facebook's old UI, like their older user interface. This is actually one of my past cohort members' Facebook page. They've given me permission to use it. I've just blanked out anything that mattered. That's why there's a lot of missing stuff. All right. Yeah. Cool. Now, when it comes to Facebook, sorry, when it comes to React being a library that handles your UI, right? Somebody asked what's the difference between a library and a framework? You can think of a library as kind of just a set of tools, but with no like rhyme or reason for how you should use those tools. There is no opinionated stuff behind how you use those tools.

00:19:00
It's not bringing in other scaffolding for you to use those tools. It's just a collection of kind of like methods, right? It's a collection of things that enable you to do some stuff. We'll go deeper into that on Tuesday, but that's kind of it. Like a framework is gonna give you a lot more. And so people all kind of argue whether or not React is technically a framework or not, but we'll be able to have that argument better once we learn the basics. So let's save that argument for Tuesday. Yeah, that's a, that's a big code weedy, uh, big code weenie argument, but I don't think we're ready to have that argument yet. So let's learn a little bit and then we can have the argument. Cool. All right. So Facebook is, I keep saying Facebook react is simply a library for handling your UI and Facebook was running into some significant trouble as their app was getting bigger as their UI was handling more stuff or seeing more stuff so far. We've built some very

00:20:00
simple UIs and we introduced an architecture pattern that we've been using recently. What's the big architecture pattern that we've been using recently that helps keep our applications organized? Yeah, it's been MVC. And if we're worried about the UI or the user interface, like the things that our user is actually interacting with to do things on our application. What part of the MVC structure is React kind of going to be existing in? Yeah, it's going to be existing in this view area. We're actually going to introduce an extension to MVC, which kind of adds a slightly different twist to it, but for now we're just happy to exist in the view territory, right? Our user interface is always gonna be handled by our views, how we get into things like view model, we'll save for later. But the idea right now is that

00:21:00
Facebook needed a better way to handle their views. And so let's take a look at Facebook's kind of older interface when this kind of stuff started kicking off. So here's Facebook's old user interface. Let's take a look at all this stuff that's actually happening real quick. We have posts and posts kind of have all their different complexities, likes, time, all this other fun stuff. We had stories that were popping off. We had creating posts. I don't know if statuses were still technically a thing. We had marketplace and watch and knowing whether or not there are new things to watch or new things in the marketplace. We had all of our groups and whether or there were new posts in those groups. You could explore new things and see as those pages were going up or down. You had your events that were coming through and sometimes it'd be more or less events. You had information on the pages that you created. You could see all the things that recently happened.

00:22:00
You could see the games that your friends were playing and you could drop into those friend pages again. You could keep track of whether or not your friends were online or not. You could see all your events coming through, your friend requests, all your stuff. all your stuff on this page. And so if we are thinking about kind of our current understanding of how we handle our views, this is a colossal unmaintainable, hot garbage dumpster fire of a mess, right? Because all of this stuff is gonna be in like one what? Like the contents probably in like one big-ass HTML file or in our case right now one EJS file There's

00:23:00
so much logic happening Look at all this logic right like are they is there new stuff is is the likes going up? Are there new posts? Do you have new notifications? Do you have new friend requests? Like, if we're gonna be handling all that pretty much like conditional logic, right? That would probably all be in one singular what right now with the way we've been doing things. Like one JS file, right? Imagine having all of this logic. all of this logic, like all this client-side logic, whether or not it should be red or gray or green or numbers going up, going down, like all that stuff, if we're thinking about it right now, right, is maybe one EJS file, maybe a few if we figured out partials, right? Maybe like our header and footer got separated on the partials,

00:24:00
which we could think of partials as kind of like the beginning of components, right? but all this logic is all over the place, right? All this logic is all over the place. All this style is probably in one CSS file until we start breaking out. So there's just too much. If I take a developer and I tell them to go and fix something on this page, it's over, right? It's over. To define what to fix, to be afraid not to break anything. Like go back to kind of even like our object oriented at lectures, right? Like, is any of this stuff abstracted? Are we encapsulating the right stuff? Like, is there, like, is this maintainable? Is it easy for new developers to jump in and make changes and not lose sleep at night? And the answer is like, no. Where we're at in our journey right now, the answer is just a big, fat no. But what I want you to do is I want

00:25:00
you to take just a slightly deeper look at this. and what we're gonna notice is that a lot of this stuff is being reused. Can you see what I mean? I feel like a lot of this stuff is kind of repeating itself, right? So we're gonna have posts and there's probably posts on this page, like your homepage, other people's pages. are those posts across different pages really fundamentally any different? Not really. And are stories that appear on this page versus some other place really any different? No. And so what React really introduced first is an idea of a component. And

00:26:00
then a component really changes the game when you start to look at a lot of these UIs. A lot of these UIs are using the same thing over and over again, right? If we look at these shortcuts that kind of have the numbers going up, it's almost the exact same component as the Explorer. So we could figure out our logic, we could figure out our styling, we could figure out kind of our content and store it all in one component and then be able to reuse it where we need it to, right? And so this idea of breaking things down into components really does add to the maintainability of our code. And what I mean by that is that one, we can keep all of our stuff together,

00:27:00
right? We can keep our logic, our styling, our content into these components. And then these components can be reused not only across the page, but across our entire application and maybe even across other applications. is a post on Facebook fundamentally any different than a post on Instagram, right? Facebook owns both Facebook and Instagram. Are they fundamentally any different? Now I'm not saying this is how it actually works at Facebook but the idea is there, right? Like we could write our post component once and then reuse it across our application and maybe even across other applications. And then the beautiful thing is if any other engineer wanted to come and fix how posts work, they know exactly where

00:28:00
to go. They're not jumping through a hot mess of a JavaScript file to find the logic for likes, right? They're not jumping through a hot mess of 10,000 lines of CSS to change how a post looks. We can store all of that logic, all of that style, all of that content into one reusable, easy to maintain component. And so as we start to build out our applications, what we want to be able to do is see components everywhere. If we could start breaking down our applications into reusable components, Not only does it like make your life easier when you have to maintain or update or work with other engineers that want to do the same but it also Accelerate your development because you could just reuse them. I on two classes

00:29:00
ago, I showed you how to How to like make your MVPs Stylistically look good very quickly. What did I use to get that landing page done in like three seconds? It was components that were using Tailwind, right? And so I was literally able to like re copy and reuse my components. And I had a nice header, I had a nice hero, I had a nice footer and boom, boom, boom, copy and paste it and I'm done, right? Now this is kind of like a very simple introduction to it, but these reusability of components, the maintainability of the components can make our lives a lot easier, especially as our UIs start to get more complex. So tonight we're gonna talk about components.

00:30:00
We're gonna talk about something called props, and we're gonna talk about something called state. And when we use all three of these things combined, we can build UIs that handle our views, that really enable us to build faster, build more maintainable code and make it so that we can not have a hot dumpster fire of a mess of client-side JavaScript, a mess of client-side CSS and all this other stuff that's coming through. So what I wanna do now is we're at the top of the hour. So we're gonna take our break. When we come back from the break, we're gonna kind of dive into this idea of components a little bit deeper. And then I'm going to introduce something called props, which really does add flexibility to our components. And then we'll bring state in, and then we're going to see some real examples, play around with some real code, and hopefully walk away tonight having a feeling about what React might do for us as we continue

00:31:00
on our development career. So we were talking about components. Let's take a look at some of the components that Facebook might have been implementing here. And let's kind of think about it. Would it be like without components just again for a quick second, right? Let's go and take a look at this. What are these red dots used? Like what are these red dots used to mean? What was that for? Yeah, it was like new, like new stuff, right? Like new things were either there to be watched or there was something new in the marketplace. And so if we were doing this, like originally somewhere in our JavaScript file was like the code to change that from gray to red. Um, there was probably some sort of Ajax stuff going on. We look at any of these updates,

00:32:00
like there's some sort of way that we're like actually getting new information and updating it. There's probably like if we're doing it like the way we've been doing it There's like would there be a page refresh much if you're refreshing the page for all this crap, right? Like no that can't happen If we look at something like the bell to write like think about that for a second that bell could be Like that dark blue It could be white. It could have a number the number has to keep going up Right, like that's a lot of JavaScript to keep track of. And if we were doing it the way we've been doing it, this would all be like in a singular file. And imagine trying to maintain all of this crap, right? So the beautiful thing about components, as Facebook's UI got bigger and bigger, more and more not maintainable by the easiest choice

00:33:00
of the imagination components, the react gave them some really a beautiful things. Like if we think about this kind of box here as a component, we can keep all of this logic about the dots. We can keep all this logic about kind of when they show, when they go from gray to red, when all that stuff happens. And better yet, these dots can be their own component that is reused in a larger, let's say like feed component or something like that, right? So we can actually start having components that exist inside of other components or extend, right? And so we can really start to think about each piece of this UI as a component, and that component could have all of its logic. Like it could have all of its CSS, everything in one place. Now,

00:34:00
some folks start to say, Leon, well, this kind of seems like it violates what? Like Leon, you're telling me that you're combining like your content, your style, your JavaScript into this one entity called a component. We're starting to get pretty close to violating separation of concerns. Exactly. And so, what was the goal of separation of concerns? What was the goal, kind of subtly, what was the goal of separation of concerns? Yeah, thank you, Blau. It was organization, right? It was adding maintainability to our code. It was making, exactly, Blau, our life easier. It was making it so that when other developers came and worked on our code, they knew where to go and what to do. And the real purpose behind separation of concerns and why I introduced it so early on is

00:35:00
because I want you to think critically about the code that you write, right? Like the reason why separation of concerns is introduced at that point is because I need you to start thinking like a developer. What's going to make your life easier? What is going to make the life of the other developers you're working with their lives easier. And as we add more stuff to our developmental skillset, we might need to revisit some of these paradigms. And so in, in essence, I mean, if you really think about it, you got, got, right, you got, got right. Like it's where we started, but there might be some other things. That might be a little bit better now. We've been a little bit further along down the timeline, right? And so when it comes to separation of concerns, yes, it was about adding maintainability, it was about adding organization, it's

00:36:00
about separating presentation and business logic. And all that stuff is still happening, right? All that stuff is still happening with components. It's just a different way of going about it. And so will it actually be separated out into individual files? It depends on how you go about building out your components. Some folks will have everything in their component. It will have the style, it will have the logic, it will have everything in one place. Sometimes people will separate out into individual files that are all associated with one component. It'll be up to you and the team that you join about how together things are, but you're still adhering to it just in a slightly different way. And at the end, it's still achieving the same goals of that maintainability, that organization, having new developers know where to go. When they sit down, when they sit down and the big sweeping change is that these dots now have to be squares, right? They know where to go, right?

00:37:00
They know where to go, right? So that's the idea of components going forward. Now, as we start to think about components, we start to think about about the reusability of our components, I want you to pay attention to some things that were happening in this UI. Over here, there was something that would show up when your friends were logged on. What would show up when any of your contacts were online? You better remember what would show up there before Messenger or things like that. Yeah, we would have a green dot that showed up when that user was online. Now, a question for you, in terms of like logic, like there's an update that has happened, there's somebody online, or there is something new to watch, or there's something new in the marketplace, is there really

00:38:00
any difference between these dots And these red dots? Give me a little creative freedom here. Hey hey Zeus, hey! We're in your territory tonight. If y'all have React questions, just go to Nick. On Discord. Hey hey Zeus. They're there for ya. Yeah, they're... There's no difference, right? There's real no difference between the green dots that show up here and the red dots that show up here, except for one change. And that change is the color. So the beauty of React components is that you can pass in what we call props. And props

00:39:00
give flexibility to your components. There's nothing fundamentally different between the dots that show up for new things in the marketplace and the dots that show up when somebody's logged on except for the color. And so with props, we could pass the color we care about into our components. Right? So the component that we're using over here, we would pass in a prop of red and the component that we're using over here, we have passed in the component, sorry, the prop of green. We could literally reuse the exact same component and just pass in different props. We get all the reusability, we get all the maintainability of having just to maintain one component that is these dots, but we get the flexibility of saying, Oh, over here, the dots should be red. And over here, the dots should be green.

00:40:00
It's not something we have to go and like fundamentally change our CSS. It's nothing we have to go and like fundamentally change any logic. We just need to pass in a freaking color so that it knows to be red for this component and green for that component. That's it. So components have this wonderful bit of reusability. If somebody needs to edit how dots function across our entire application, they go to our dots component, right? These dots are going to show up here, here, here, maybe 20 other places across our application. We're going to need these fricking dots. But in some places we're going to want them to be red, some places we want them to be green, some places we want them to be blue. We don't have to want to rebuild a whole new component. We don't have to rebuild all that logic, redo all that CSS. We just want to be able to say, it should be red, green, blue. And so when we use the component, we can pass that color into it via props and get that flexibility. Cool.

00:41:00
Could you implement dark mode and light mode across the whole app simply with props? Possibly, yeah, let's think about it that way. You know. Now, let's think about another really key thing to Facebook. When we're looking at our posts, right? We're thinking about posts. There are posts on Facebook and there are also posts on Instagram. We said earlier that a post on Facebook was fundamentally exactly the same thing as a post on Instagram, but there's probably just like a few key differences. What's probably the biggest difference between a post on Instagram and a post on Facebook? There's really only one big difference, right? They both have like text or they both have like a text. They both have like images, right? Like they

00:42:00
both have like almost the same stuff, but the real big difference in my mind is like on Facebook, it's a thumbs up for liking and it's a heart on Instagram. Right? Fundamentally, they're the same thing, right? Maybe a little bit different in terms of like text or image or something like that, but fundamentally a post on Facebook should operate almost the exact same as a post on Instagram, but the likes are different icon. So what could we use to keep the same component across two different code bases that have fundamentally the same logic, the same kind of styling almost, right? We just want likes to look different on one versus the other. What could we use to pass in a thumbs up or a heart?

00:43:00
Yeah, we could use our props on Facebook to pass in a thumbs up. and we could use our props on Instagram to pass in a heart. So we now not only get the ability to reuse the component throughout our application on Facebook, right? Like we could have a post here on the homepage, the newsfeed, et cetera, but maybe we could even reuse components across different applications as well. And this is something that I do a lot. For me, I have a lot of components that I have written that do key things for me. And when I'm building out a new application, I can just go yoink that component, plop it into my React code base, and I know it has everything that I need. I know that it has all the logic, all the styling, has all the content that I need. And the ability to reuse that anywhere I want is huge. It really speeds up

00:44:00
my development. Cool. So if you build a component, you can just reuse it over and over again. Yeah, that's kind of the idea. Because if we really look, right? Like if we really look at this UI, is there anything different between shortcuts and explore? Like look at it. Is there anything different between shortcuts and explore? Not really. Right? They have slightly different icons, but it seems like they have all the same functionality. They have all the same style. They have all the same logic, right? Like they still have like the numbers going up. So if we were to do this originally, right? We might have JavaScript handling each one of these like numbers that are

00:45:00
going up, right? We might even have two different sets of them for the different areas, but we can start to see this as a component. So maybe this number going up is a component. The kind of list of links is a component. And so we can just reuse these components wherever we want. So we kind of just like copy and paste and boom, we got a new component. We might have to pass in slightly different text. These texts might be props that we're passing in and we'll figure out ways to do that later on. but it's still the same thing that we're just reusing. And any other page that needs this type of thing, we can reuse that component over and over again. And yes, we can have components inside of components, right? And that makes it even more maintainable because if I want to work on these numbers going up, right, think about this. I wanna work on these numbers going

00:46:00
up. There's two ways we could approach it. The old way, I wanted to work on these numbers going up. These numbers going up were probably intimately tied to this content, right? There was something in my JavaScript file that was targeting this specific place in the DOM. There was some JavaScript that I was like using that like made that number work with that content or at least that place in my content. What if I decided, you know what, Leon? I don't want these numbers anymore. Back in the day, what would we have done? Like, if I just, I don't want the numbers anymore. What would I have done back in the day? Well, now I'm going to my, cried. I'm going to my HTML or my EJS. I'm removing the content like the HTML, like whatever

00:47:00
I'm using for my templating language. Then I'm like trolling through my JavaScript to find all the logic that was controlling each of those numbers going up. Maybe there were some like fetches that were pulling data from somewhere. So now like I got to go through all my content in my HTML. I had to go through all my JavaScript. I might even have to go through like a lot of my CSS to pull out all those styles that I was using. I probably had specific classes for it. So that was a big pain in the butt. But if this was a component, right? If this was a component and that component was just being used inside of another component, all I have to do is remove that component and I'm done. I literally just delete one line. I delete one line and it all goes away. I don't have to worry about going through all these individual files.

00:48:00
And if I wanna add it back, I just add one line and it's back, right? So when we're talking about like the maintainability of our code, like React can really change your life, right? If all your logic, your style, all that stuff is contained in one little area, the ability to add and remove stuff, of the ability to reuse stuff across your application becomes huge. Yeah. And we're gonna see some examples of the components in a second. We're gonna see some examples of the component. Don't worry, we're gonna work through it. You're gonna be able to see kind of all these things in action. I'm gonna show you props in action. I'm gonna show you the components in action and how we can reuse them. All right. So we talked about components bringing maintainability to our code, the ability to reuse components over and over again, which saves time and development effort. We talked about having props, which enable us to pass individual things into our components so that we can reuse

00:49:00
them. We want something to be red versus green. We don't have to rewrite a whole new component. We can have that flexibility by passing in props. And then there is one last thing that we have to add. And it's something called state. You can think about each component having an object that exists inside that component that we can access. So state is just an object on a component that we can access. Now, the really cool thing about this object that exists inside the component is that when the state changes, right? When that object inside the component changes, Well, the component reacts.

00:50:00
We have components. We can add a flexibility or components by passing in new things via props. but each of our components can also have an object that we're gonna call state. And when that state changes, our components can react. Now, let's think about it. Let's think about it. Friend logs on, right? friend logs on, this dot component could have a state that says, are they online? Right now, are they online is false. As soon as they log on, that state changes to true.

00:51:00
And since the state changed, that component's going to what? It's gonna react, exactly, it's gonna react. It's gonna go from gray to green. All that logic we need to know what happens when the state changes, the component already knows, right? The component already knows what to do when state changes. That's the beauty of building out these components is we get to put in all the logic set. Hey, when that state changes, this is how I need you to react, right? All right, let's look at something else. Let's look at this, this, this bell. This bell probably has a state of what? Let me figure out what the state might be here. Yeah,

00:52:00
probably has a state. Remember, state's just an object, right? Let's just keep it very simple for right now. let's just think about state as an object. It probably has a count property. When that count property goes from 16 to 17, what does that component do? It reacts, right? It knows what to do. It knows how to go from 16 to 17. Better yet, let's think about if it was zero, right? Let's say there's no notifications, right? Let's say there was no notifications and it was just a dark gray or dark blue bell, right? There's no red box, there's no coloring. As soon as it goes from zero to one, that component knows how to react. It knows to, all right, now make it white. Now bring in the red box. Now put in a number

00:53:00
of one, right? All of that is contained in the component. No chasing down some JavaScript file, no wild conditional logic that's just all over the place. No chasing down our style changes. It's all contained in that component. And when the state changed, it knows how to react. If we were going back to the dark ages and we had all this in a JavaScript file, right? All these little bits of logic, all this conditional logic, all this stuff in a singular file is bad news. We would start messing up our conditionals. We would start messing up like what happens when we get new information. It just becomes not maintainable. And so the idea of bringing components into the mix does quite a few things. Components bring maintainability, they

00:54:00
bring reusability. The ability to have props brings flexibility to the components that we've already written. So we don't wind up having a bunch of very similar components. We can have one and kind of the unique changes we need for each we can pass in as a prop. And then the last thing is this state. And each component can have its own state. And when that state changes, the component knows how to react. that logic, that style, everything is contained in that one area. We don't have to go chase it down. We don't have to worry about when we remove components that it's gonna break some other places of our code base. We can add and remove them as we see fit. All right. Does it make sense why we might use components? All right, is that kind of clear? Like why we might use components? Yes, cool.

00:55:00
All right, that's the goal for tonight. The goal for tonight is just to understand, all right, components might make our life a lot easier as we start to develop more and more complex UIs. The reusability, the maintainability, the ability to not have to worry about what happens when our state changes, right? Like all that's been coded out for us, right? We can just add and remove them as we see fit. Awesome. So what I wanna do now is I wanna talk through some of the kind of the important bits and bobs when it comes to React. We're gonna see some examples and then we'll end class. There's one other thing too, since we're just talking about state real quick. And we're gonna see it again in a little bit, But think about all these things where state is changing. Right? Think about all these things where state is changing. State change. Let's just count out. State change, state change,

00:56:00
state change, state change, state change, state change, state change, state change, state change, state change, state change, change, change, change, change, change, change, change, change. Probably each of these are state changing. Change, change, change, change, change. Like I'm going to stop here like all these things that have to change. If we were doing it how we've been doing it, that's also a lot of what. It's kind of a I know it's a stretch here, but it's also a lot of what's happening on the page. If we were to do this in the end, yeah, exactly shadow song. It's a lot of refreshing. We don't want to have to refresh anymore, so the beautiful thing about react is it has something called the virtual DOM. It has something called the virtual DOM. So what we're actually doing, as all of these things are changing, like as all this state is changing and our components

00:57:00
are reacting, we don't actually have to refresh the whole page. And better yet, we only wind up refreshing the small tiny piece that actually needs to be refreshed. So we're not repainting the whole DOM, the whole DOM tree. We're using something called the virtual DOM to compare the actual DOM versus the change that we want. And we're making a patch to the actual DOM that just changes this little piece. And so I really like from some of the reading that we're gonna do, there's a really good example that highlights this that we're gonna see like live. And I'm gonna show you through some cool Chrome tricks, how we can actually see that the whole page is not refreshing. It's just the small things that are. Cool. Now, we have some, we have some, some

00:58:00
warnings I need to make. We're about to go into some more technical terms. We're about to see some code. I don't really need you to understand this right now. I don't really need you to understand these bigger concepts. I don't need you to understand the one-way data flow versus two-way data binding or any of that crap. For now, let's just understand what components are, what's some props, what's some state, and we'll take it from there. All right. When we're using React, there's kind of two crucial APIs that we're kind of consuming. React, which contains all the APIs for like how we actually create components. And then React DOM, which tells us how to render those components to the DOM. So React actually gives us the API for creating the individual components. And then React DOM enables us to actually take those components and put them into the DOM. Like we have to have some mechanisms for doing those

00:59:00
two things. And so these two APIs are what enable us to do it. And we're going to see them in some of our code. There's also another big component of React and it's JSX. JSX is just a syntax extension to JavaScript. And it's really just a shortcut for this specific API. And what it does is it just helps us generate the stuff that eventually spits out HTML. So we can kind of think of it almost like our EJS. It's gonna look an awful lot like JavaScript, but some things are gonna be a little suspect and a little bit different. And we're gonna be noticing like some quirks to it, just like our EJS kind of looked like our HTML, but it really wasn't. At the end of the day, we're just using it to eventually build our component and spit out the actual HTML. Cool. We'll go deeper with it next week. There's another really good resource that I really love for

01:00:00
React. And a lot of my examples are gonna be kind of built off of some of the stuff that comes in this overview. So React.express is just like another resource that I like for React, especially for some of the older stuff that we'll be covering. We talked about two big things that come to React already. We talked about props. You can just think about props as arguments that are being passed into our components. Just like when we had like functions and we're able to pass into arguments to a function, you can think about your props as the exact same thing. It's a way of, right, right? It's the same way of passing in values into these components, right? That's it. And then we also have state, which is just an object that's built into

01:01:00
the component. And when that object changes, our component reacts and importantly re-renders, right? So that reacting also includes the re-rendering of that component using that virtual DOM to make that actual change in the DOM. So if we can kind of absorb kind of some of these very high level concepts, we'll be in a good spot. Remember that virtual Dom is a way of us kind of looking at the Dom as it stands. Right. Right. Looking at the Dom as it stands and saying, I want to make very specific changes and being able to make those changes without having to re-render the full Dom, the way it works is that we keep the real Dom and a virtual Dom. we make all of our changes on the virtual DOM and based on what we change, we say, hey, just

01:02:00
make this very simple update, right? So as we start to build out our components, as we start to see these things, the state changing, our components reacting and needing to re-render, we take advantage of this virtual DOM to make the specific individual changes that we need to make, cool. That's all the big stuff I'm gonna throw out to you for tonight. I don't really want to go too much deeper because I think and you got to go through the reading you got to go Through the materials first and then you will come back on Tuesday to go deeper into all of these kind of higher level concepts Do I currently work with react all the time I think it's something that you should have in your repertoire Right shoving your repertoire. I don't think you need to go as deep with it as you might think to get a job It's good to understand these high level concepts. It's good to understand what it might bring to your code. Right? But I don't need you to go much deeper than the materials that I'm sharing. So if

01:03:00
you go through this class and our classes next week, you go through the two courses I shared, Brad's course and the Kent C Dodd's course, that's enough. You really don't need more than that for right now because there's a good chance when you get to your job, they might not actually use React. So you're better off spending your time right now, especially as we go into the hunt, finishing up your hundred hours project, investing your data structures algorithms, making sure you're doing your code wars and all the other things I'm asking. The basics are enough to get the job. And as you figure out what your local kind of job market is asking for, you might invest a little bit more in React, you might invest a little bit more in things like Vue or Angular or whatever it might be. But I just want you to see the basics of what one of these UI type libraries can do for you. And you don't really need to go super, super, super, super deep on it to get the job.

01:04:00
Cool. All right, another warning. We're about to be baddies, we're about to see some bad code. We're about to see some bad code, it's all right. We're baddies, we're seeing bad code, it's all right. All right, so we're gonna look through some examples. And these examples come from the reading that I assigned. And there's three of them that are on code sandbox. And so we're going to look through these different examples on code sandbox. We're going to play with them and I just need you to let these concepts marinate in your brain the rest of tonight over the weekend. I really do need you to start thinking about components everywhere. You can look at anything in your life as components. And everything that you're doing, please, over the next weekend, And just,

01:05:00
just think about components, right? Like, like when you're hungry and you're going into the refrigerator, you could see your refrigerator of a component and your refrigerator is made up of a bunch of other components that are inside your refrigerator, right? You might have almond butter inside your refrigerator. Almond butter is a component that exists inside your refrigerator component. and your your your your almond butter right might have a prop that you passed in of crunchy or creamy right that you might have a crunchy almond butter you might have a creamy almond butter right and when when you eat it your state might change right you might get bigger I don't know right I know it's silly but But I really do want you to try this. I really do want you just to like take a few moments throughout your weekend to say, all right, what's in front of me? How could I view these as components?

01:06:00
What could I view as props for these components? What would be the state of these components? And I want you to just to really see components everywhere. They're everywhere. folks. Just got to see them. They're everywhere. They're everywhere. Right. And so let's see some components together. And then over the weekend, I needed to see them everywhere else. So there are three examples here that come from the reading. They're all in code sandboxes, which are pretty cool. These code sandboxes just enable you to run code directly in the browser. So we're actually running our React code in here. And right off the jump, please, please, do not think you need to understand any of this code. This is bad code. This is code that we will not be using going forward. This component is

01:07:00
not how we would write components in the future. It's going to come in the reading, so I want to see it now together. I want to show you of how can we did these older class components, but this is like not, this is us being bad. He's writing bad code. I do like it because it helps it very simply to see some really key features that we need to see before we move on to how we would actually probably use components in the future. Cool. Also, it's not something that you would ever have memorized. It's not something that you would ever have like in your memory. It's just an example for me to show you how these things come together. Cool, you can see that we're importing React. What is that gonna give us the ability to do? We import React, what is that gonna give us the ability to do? Yeah, create components. Remember, that React is the API that enables us to create the components. So we need that if we wanna create

01:08:00
the components. And then when we import React on, what is that gonna give us the ability to do? Yep, it's gonna enable us to render them to the DOM, right? Remember, we actually have to put this stuff into the DOM if we want our users to see it on the client. So one React enables us to create components, and the other enables us to put it into the DOM. And so you can actually see that we're using a little bit of what here, A little bit of what, that we talked about earlier tonight? A little bit of what? A little bit of the structuring, right? To give us the component that's coming from React. And so here with this kind of older class-based syntax, you can see that I am making a component that's coming from the components in React. So this class of card is the component I am making, but it's just the React component. I get to name it whatever the

01:09:00
heck I want. I could have called this the boomer food, it would have been fine, but since I'm making cards that you see over here, I called it cards. And here is everything I am using to make this card component. And then down here is me actually rendering these card components to the DOM. Now, if we look, we can see kind of our component is in this index.js file. and we also have an index.html file. This is going to be very, very common. We're going to have some just very simple HTML. And this is where we're going to actually append all of our components, right? All of our components are going to be appended into this div, right? Remember, we're going to have components. Those components have to make their way into the DOM. The way we make them into the DOM is we actually just place them into the DOM in this area. So if we go back and we look at our index.js, we

01:10:00
can see, all right, we're gonna select that div, which had the idea of app. Like if we look, it has the idea of app. We're gonna select that div that has the idea of app, and we're gonna render our elements to that place in the DOM. So all we're saying here is all this stuff that I've just highlighted is gonna make its way into this div. This is how we're gonna place our components into the DOM. So, just very quickly, we have the ability to create components, we have the ability to render them into the DOM. Down here we're saying, hey, where in the DOM am I putting this stuff? And what am I putting into the DOM? It's this stuff right here. So that's very high level. Just so you can have a rough understanding that we're gonna build our components, we're We're gonna put them into the DOM. It's not magic. We actually have to tell it where to go, where to put the stuff into the DOM. And that's what we're doing with these kind of other simple files.

01:11:00
Now, the thing that we really care about is right here. These three lines, right? These three lines are our actual what? These three lines are our actual what? Yeah, these are our actual components. We can see up here that we've created the component called card, right? We've created the component called card. And what we are doing down here is actually using this card component. And we're just having to use the card component three times, right? We use that component that we created three times. So we did card, card, card, right? We use that component three times. We can actually see what this component spits out. What does this component spit out?

01:12:00
Yeah, this component spits out a div, right? It spits out a div. And the cool thing is you can see that that div also has some style. And so we can see that style is coming from up here. Well, style spread the default style. So the default style will be a color of white, a border color of red, a border size of one, a border style of solid. We're also gonna have some margin, some padding. And then, wait, before we get to this line 16, What looks a little weird here? Border color, border size, border style. It's CamelCase? What's going on here? Yeah,

01:13:00
it's not actually CSS. This is the JSS syntax we just talked about. that extension, right? That it's not actually CSS. Kind of like how our EJS was not actually HTML. Same thing here. This is not actually CSS. This is the JSX syntax that's going to help us to eventually spit out the stuff that we care about. So it's going to look a little funky. It's going to look a little different. And remember, this is bad code. We might actually have our CSS in a separate file and then just use that file inside the component. But for now we have everything together. So we have some base styles here, the default style. We spread them into style and then that style is gonna eventually be applied to our div So when I use card down here, I know that this card is going to be a div When I use card again here, I know that it's going to be a div when I use card down here again I know that it's going to be a div now Each

01:14:00
of these cards here are fundamentally all the same, but what is different about them? Their colors are all different. Go back and think to our dots on the Facebook UI. Where the gorgeous tiling, Were the dots fundamentally different between like the marketplace dots or the friends logging in dots? Were there any differences there? No, it was just the color. We wanted to be able to use the same component. We wanted just those components to look a little different depending on what we wanted them to look like. And so the beautiful thing here is I have this lovely card component that spits out a div. However, on line 16, you're

01:15:00
seeing that each component will have a background color that comes from the where. Where would this background color come from? It'll come from the props. Exactly, it'll come from the props. And so when we look at these cards, we see these cards here, we can see that each card has a prop. What is that prop that each of these cards comes with? Yeah, each of these cards has a color prop, right? Each of these cards has a color prop. And the beautiful thing is, whenever I go to use these card components, I can pass in

01:16:00
those different props, right? And each of my components, even though they are the same, will now each have a different background color, right? This color prop right here is being used right here. So the very first card will have a background color of sky blue. That's why this one looks sky blue. The next card will have a color prop of steel blue. Right? So that will have a background color of steel blue. And then the last card component has a prop of the color yellow. And we have this lovely background color of yellow. Now the yellow is very hard to read. That white on yellow does not look good. So if I wanted this last card component

01:17:00
to be something different, it'd be very easy to change it. So what color should I change it to? Purple, people are saying. Let's change it to purple. Cool. There we go. And so now it's purple. We're able to pass in a different prop, and when that component goes to be rendered, we can use those colors so that we can reuse the same card component over and over again, but have the flexibility for certain things to be slightly different. We could have a card, we could have a post component where we were going and making our posts, but we would have props on them that were like likes, and one could be a heart and one could be a thumbs up. Right, we have the ability to pass in different props that will do

01:18:00
different things inside of our components. We still get the maintainability and the reusability of the components throughout our entire application, we can still get the flexibility should we need it by these props. Cool. Love the color scheme. All right. So this is the beginning of kind of starting to see these components come to life. We're starting to see props come through. I want to be able to look at a few other examples. Another example of props, but also another example of state. So we're going to take our break. We're at the top of the hour. When we come back from break, we're going to see two more examples that further our understanding of props, but also help us understand state as well. We'll get to see some cool things like the virtual DOM in action, individual re-rendering. And so we'll see a lot of

01:19:00
neat stuff when we come back from break. Let's take a look at another component here. Remember, you're absolving yourself from actually understanding any of this code. It doesn't matter. We're just here to see some components. We're here to see some props. We're here to see some state, understand what they might bring, exactly as well says to be baddies. Let's take a look at another one here. All right, let's go ahead and change this number. Right now it says, at 10 degrees Fahrenheit, water is considered to be a solid state of matter. Let's go ahead and change this to, let's go ahead and do 33. And as soon as I typed in 33, we could see what happened. What happened here?

01:20:00
Oh, it reacted. So for it to react, what else do we know happened here? If this component is reacting, what, what, what, what happened? Yeah, the state changed. Exactly the state changed when the state changed the component knew how to react now What do we think in this component example without looking? Is state like what are we keeping track of in terms of state for this component? Yeah,

01:21:00
in this case it's the temperature And so if we look at this water component we can see that it has a state object and it has a current temp property of 10, right? It has a current temp property of 10. The cool thing is I have this method here called set temperature. And when the current temperature changes, you can see I'm actually setting the state, right? I'm setting state to be the new temperature. If we go all the way down here, we can see that this component, right? We can see that this component is a div. This component has an input and a paragraph, right? And we can see that it has this lovely like on change method. Once again, absolve yourself from understanding this code. But the idea here is that

01:22:00
whenever the number changes, is we're running this set temperature method, right? So right here, when the number changes in this input, we're running this set temperature method, right? And that set temperature method, all that set temperature method is doing is it is setting the state to be that new temperature. So when I typed in 33, When I typed in 33, this onChange method fired and it ran the setTemperature method, right? The setTemperature method changed the state from what it was 10 before to now 33, right? To 33. And when that set state ran, it changed the current temperature property on state from 10 to 33. Since the state changed, what

01:23:00
is this component going to do? React. Exactly, it's going to react. Now, how it reacts, we actually get the code out. So you can see our lovely render method here, and we can see all the stuff that's going to happen for us to render out this div. The goal of this component is to render out this div that has the input and also has this paragraph. And we can see inside the paragraph that we have the this.state.currentTemp, which is pulling the current temperature, right? It's pulling the current temperature from our state. So right now, current temperature would be what? Right now, current temperature will be what?

01:24:00
33. Nice. And then state of matter, we're using here as another variable that we haven't actually seen this defined yet. So the things that are going to change in this paragraph or the current or are the current temperature that's coming from our state and then the solid, liquid or gas will leave out plasma for now. right? The salt liquid or gas that it could be. And so if we look at this component a little bit deeper here, we have our state, which has the current temperature property. We have a method that changes that state whenever the value in the input changes. And then we have some logic here. We're going to say, hey, if that current temperature and state is less than 32, then our state of matter will be solid. If it's greater than 212 or equal to, greater or equal to 212, then it'll be gas. And if it's not solid or gas, we're going to say that it's a liquid.

01:25:00
Right? We're going to say that it's a liquid. And so when this component goes to render and it renders out this div, It's going to pull the value from a state, which is 33, and it's going to plug in whatever state of the matter was. In this case, it is liquid, right? It'll be liquid. And so if we look down here at the actual component, right, if we look down here at the actual component, we can see that we're using the water component. And this water component has all of this stuff, nice, neat, and contained in the component. Not only do we have the state, we have all the logic for what happens when that state changes. We don't have to go chase it down somewhere. It's not in some other wild JavaScript file. It's all right here. It's more organized. It's more maintainable. If I want to update this

01:26:00
to also include plasma, right? Maybe it's not just going to be water. I'm going to have plasma as well. We don't have to worry about going and chasing down something in our JavaScript file, we can come right to this component. We can change just this component and only this component and add the things that we want to change. Cool. If we wanted to add a centigrade, yes, that's a really good thing to think about. we could have a prop called type of temp, right? We could have a prop called type of temp and you could pass in Celsius or you could pass in freedom, right? You passed in Celsius, then we would have to have some logic for not being 32 to 12 or whatever, right? And if you passed in freedom, then we could keep these numbers, right? And

01:27:00
so it's up to you if you want to use Celsius or freedom units. And so that'd be a really great prop. We could then reuse this water component. We could have a water component that maybe we have a, maybe we have something on our site that detects based on maybe somebody's IP address or their location, if they're in say the UK or the land of the free, right? And so if they're the land of the free, then we would use the freedom units and if they're in the UK they could use celsius and we could maybe pass in what we want this component to do with a prop right cool so props is like a function you can think of it as like arguments on a function you're passing something into the component it gives a little bit more flexibility to our components so we don't wind up having a bunch of very similar components that are just tweaked in very little ways we can reuse our components

01:28:00
with the flexibility that we need. Cool. All right. So this is just a very simple way of seeing state. We have the state object that has a current temp property. When it changes, our component knows how to react. it'll re-render with the logic that we have contained here, and we'll wind up seeing different stuff in the DOM. Like we can play with it, like let's go back to zero, we'll get solid, let's do 213, we'll get gas. And so we're seeing this component based on state changing React and re-render. Now, the re-rendering, we haven't been able to see that well, right? The re-rendering, we haven't been able to see that well. I want to show a last example where we can see the virtual Dom in action and

01:29:00
see this re-rendering actually Actually take place, okay Bells of Abba a thank you for the gifted subs. I appreciate for being here. Thank you. All right How does it know that it updated it knows that it updated because the state changed That's the whole point of React, right? When the state changes, the component reacts. We don't have to code anything else, right? We don't have to code anything else that's like an event, like we have an event listener here that's listening for the onChange of the input, but we don't have to have anything that says like, all right, when it does change, like do all this stuff, it just, we're calling this method. This method, all that this method does is change the state, right? So if we look at our onChange down here, when this number changes inside the input, it's gonna call this setTemperature method. When this setTemperature

01:30:00
method runs, the only thing that setTemperature method is doing is changing the state. And when the state changes, the component reacts, right? It's gonna force the re-rendering. It's gonna work through all the logic that we've put together. And then this div will be probably different if the state changed in one of these three conditions. Automagically, exactly. Is that what set state is really for? Set state is just to literally change the state. We wanna change it from whatever, we wanna change it from 213 to zero. The way that I have changed state is by setting the state from 213 to now zero. So the current temperature value is now zero. The state has changed. Since the state has changed, our component reacts.

01:31:00
It's going to force the re-rendering. All this stuff is going to be taken into account and we're going to have a new div that is spit out. Are we going to talk about use state? Yeah, but not tonight. Catherine can, hey, thank you for the hydration. Cheers to you. Oh, too legit to quit, actually putting out something really interesting. How let's, let's do this. Let's type in two 13 again. How many times did state change? Yeah. Right now states changed three times, right? When we changed it from zero to two, that was a state change. 21, 21, 21, 21, that was a state change. 13, state change, right? It's just the way we've coded it for now where each of those on changes is its

01:32:00
own thing. And so what you're noticing is that it's super what? It's super what? I'm watching a lot of like, old, like Muhammad Ali clips, I'm fast and he's getting ready to fight. I'm afraid you're I'm past hit the light switch. I was in bed before the lights went off. I'm fast. That was good to me. I'm a bad man. The best one is he, uh, makes a reporter hold up their hand. And

01:33:00
it's like a three minute setup for how he's going to hit the hand. And like, it's telling them like how to hold his hand, how to do it more correct. And eventually it just goes, he's like, ah, do you want to do it again? I'm fast, all right. So yeah, it's really fast. And why, why is it so fast though? Bathing ape, it's bad code, don't worry about it. Yeah, it's fast because of the virtual DOM, right? I'm not actually, I'm not actually re-rendering everything. I'm not re-rendering this whole page. I'm re-rendering just this piece here and that piece there. And that's why it's so fast, right? It's that virtual DOM that's enabling us to, to do it so fast, right? And we were doing this like the old way

01:34:00
that we were updating the DOM. Nah, it's just, it's just not, it's just not good. It's just not as fast, right? And so this virtual DOM is something that we're gonna see now. All right, here's the last example I wanna walk through tonight. And what we're gonna notice is that we have, how many components right here? So let me open this in a new page. How many components am I using? Kind of a tricky question. It's one component, but how many times am I reusing it?

01:35:00
Four, I technically, I could break this down into like two individual pieces here if I wanted to, but let's say it's one, but I'm reusing it four times. And without even looking at the code, what do we know when I reuse these component four times? What are some things I'm gonna be using here? If I'm seeing four uses of the component, What am I also having with these components? What are you noticing here? Yeah, this component's gonna have some props and there's gonna be a prop for a color. Notice how each of these colors is a slightly different color of blue, right? And they're all different sizes. So even though I'm reusing the same component four times, each time I use it, the font size

01:36:00
and the color is different. And so that means when I go and look at this code, I can expect that there are at least two props that are being passed in for each of these components. Let's take a look. All right, here you can see I'm reusing my counter component four times. And you can see I'm passing in a color prop and a size prop, right? Color prop and the size prop. And so we can see the very first counter component has a light blue and size 16. That's light blue size 16, sky blue 32, steel blue 80, and then dark blue and 140. Same component, different props that are changing the color and the size. Let's go ahead and take a look at this

01:37:00
component. So here's my counter component, right? Here's my counter component. You can see the end goal of this counter component is to spit out a div that has the H1 of doesn't change and then a paragraph that has the current count inside of it and the specific color and font size. Once again, absolve yourself from understanding how this code works. This is bad code. We will write better code in the future. Just understand that we're using props in state here. So the goal of this counter component is to spell out a div that has an H1, which is the doesn't change and then a paragraph that's gonna have a different color and size based on the props that I pass in, right? So you can see that I am able to pass in color sky blue,

01:38:00
size 32, and I'm able to use a little bit of what on line 15 to not have to set up individual color and individual size. Yeah, a little bit of destructuring, right? A little bit of destructuring, right? To pass in that color and size. And we're also gonna be using count, which is the property on our state. So here where you see count, it's actually the property that's coming from our state. Now, what you'll notice is that this state is continuing to change, right? Which means that this component is constantly doing what over and over again? Yeah, it's re-rendering. The

01:39:00
state is changing and as the state change, our component reacts and it re-renders. Now the cool thing is we have this componentDidMount method. For folks that did the reading, that read the docs, what is componentDidMount, what type of method is it? I'm curious, did the reading. Yeah, it is a lifecycle method, beautiful. Cool. Now, the beautiful thing here is this componentDidMount lifecycle method, When does it kick off? When does it start running? Component did mount. When do you think it actually starts? Yeah, at the beginning when it's actually, yep. It's called after the DOM has been mounted, exactly. Once this component has been rendered to

01:40:00
the DOM, this method fires, right? This method fires. And we can see that the only thing this method does is it sets up a set interval and set interval is going to run once every second. This is a thousand milliseconds. So every second set interval is going to run. Right? So once the component renders to the DOM, this component starts, it sets up the set interval and set interval is going to run every second, right? Now, every single second that this runs, what are we doing? What are we doing? Yeah. We're adding one. So every single second, we are adding one to our count, but notice the method right here,

01:41:00
set state. we are updating our state to be whatever count was plus one. So every second we are changing our state, right? Every second we are changing our state, which means every second what else is happening? When state changes, our component reacts, and it's forcing the re-rendering of our component. Now, so I said, what is componentDidMount? ComponentDidMount is a lifecycle method. It's just a function that runs once this component renders for the first time. Once this component is in the DOM for the first time, this method runs and it sets up our interval, right? So this interval is gonna run every second going forward

01:42:00
and every second it's changing the state to be whatever count was plus one, right? It's a homework method, exactly. So now state's gonna change every second. Each time the state changes, this component's going to react and re-render. All right, and re-render. And we can see the re-rendering happen here. But now, I want to show you something really cool. If this is truly React, what does React come with that's going to save us a lot of, it's going to help us in a very significant way. Like what does React come with that's gonna help us with this specific example? Yeah, the virtual DOM. If this is updating every second, that'd be a lot of refreshing of the page to make this work. But with the virtual DOM, we don't really do

01:43:00
that. And I wanna show you it so you can actually get what I mean. Now, in our inspect tools, so if you go right click inspect, we've been kind of just seeing like a lot of these tools that we've been using. And we think that this is just all that's there, Boy, do I got a surprise for you. Actually, if you click these three dots and you go to more tools, look at all this stuff that's built into the Chrome tools. And there is a rendering tool here. And for folks that have photosensitive epilepsy, I'm gonna need you to stop watching and I'll tell you when to start watching again. So I'm gonna turn something on. I wanna show an example, but it will be flashing green on the screen. So if you're sensitive to flashing green colors, please stop watching now, give you another five seconds. And I'll say verbally when to start watching again. Okay, so I'm gonna turn something on. I click this paint

01:44:00
flashing. And what's happening on the screen right now for folks that can't see, is the text that says doesn't change is not actually being repainted. this flashing green around the numbers is actually the part of the DOM that is being re-rendered this paint flashing shows what is actually being re-rendered on the page and what you'll notice is doesn't change is not being re-rendered it's only the numbers that are flashing green because that's the only thing due the virtual DOM that is actually updating. So notice my page is not refreshing. It's just these individual pieces that are updating. All right. Paint flashing is turned back off. If you have epilepsy, you can start watching again. I've turned off that feature.

01:45:00
All right. So the way I got to this was I clicked on the three dots, the vertical ellipses, more tools, rendering. Look at all this other crap that's in here. Rendering, and then there's this paint flashing checkbox you can turn on. Cool. So we could see that even though, Even though this whole div is being re-rendered, the only thing that had to change was this paragraph. So the virtual DOM was able to look at the actual DOM and submit a patch directly that said, hey, I don't need everything to refresh. Just this paragraph is the thing that's changing. And that's the only thing that got re-rendered on the page. Cool. All

01:46:00
right, so tonight we saw quite a few things. We saw the ability to create components and components bring what to our code? What do components bring into our life when we look at something, when we look at something like, let's look at something like this now. When we look at something like Facebook, What is, what are these, these components bring into, yeah, maintainability, reusability, right? The ability to like have our code in one place and keep it maintained, the ability to reuse components as we need to, and not have to keep adding more and more spaghetti code into the mix, not adding more and more complicated JavaScript to mix that we're going to forget how to update. So adds that maintainability. It adds that reusability. We saw that our components also have props. And what are these props enabling our components to be able to do?

01:47:00
What does it add to our components? Yeah, it adds flexibility. We don't wind up with a bunch of components that are all very, very similar, but just changing a few tweaks here and there. With the props, we can have of the red dots and the green dots that are the exact same component, but pass in the colors that we want them to change to. Right? We can have posts on Facebook and posts on Instagram, where the only thing that's different is the likes, and we can pass in a heart on Instagram and a thumbs up on Facebook. So the props add flexibility to our components. And then last but not least, State gives us the ability, right? State gives us the ability to contain all of our logic in one place and have our components know what to do when

01:48:00
that state changes. We're not chasing down random JavaScript. We're not chasing down different logic in different parts of our application. All the logic about what should happen to that component specifically because this is tied to our UI. Think of all these UI flourishes that would have been a hot mess to maintain. And now all those changes are contained in the component. And when the state changes, when it goes from 16 to 17, our bell component knows what to do. When the stuff in the marketplace goes from false to true, the component knows what to do. When the shortcuts goes from four to five, our component knows what to do, and we're not chasing down that logic anywhere. Our components are able to see if the state changes, they're able to react, be able to re-render, and since we're using React, we're not refreshing the whole page, we're using this other wonderful benefit called the virtual DOM to just submit patches to the actual DOM

01:49:00
and just change the things that we care about, making this way faster as we start building out our UIs. So do we see the value that React could bring to the table? Do we see what it could do for our UIs? Yep, cool. All right, then I did my job this evening. I don't wanna go any deeper than that. What I would like for you to do this weekend is please read through this free CodeCamp article on destructuring. As you saw, it came up a lot. And you already read the docs for homework. Where's the other reading? This and next week, of course, is React. There are two new bits of homework that I need you to get through, ideally this weekend. One is the Goat Traverse Media's course on React.

01:50:00
Kind of covers all the big changes that have happened. There has been a big switch from kind of class-based components to functional components, things like hooks and all this wonderful stuff was introduced. And so if you're reading the docs, it kind of gives you some of the original ways things were done. Brad's video will kind of walk you through some of the newer stuff. And then Kent C. Dodd's course is completely free and it's one of the best React courses ever made. So you can definitely check out these two resources, please, before next week. So all the heavy concepts you've kind of already been introduced to kind of do it as like a first pass and then we'll kind of keep working together on Tuesday and Thursday. Um, one thing that we have to keep in mind is that we're, we're slowly starting to switch away, right? Uh, the, the source of learning will not be me going forward, right the source of learning will will be on you because we only

01:51:00
have what five more classes left together plus all the Huntober shenanigans and then you're on the job by yourself and when you're on the job by yourself you're gonna join day one and they're gonna use a tool or technology that you have never heard of A tool or technology that we did not cover in this bootcamp, or sorry, this experience. And you're going to have to be able to figure it out and work through it on your own. So React is one of those topics that I'm going to introduce the basics, the why, the how, but a lot of the heavy lifting is going to be put on you to go deep with the materials that I'm sharing and to work together next week to go even deeper. So I'm slowly, slowly fading away, y'all. Slowly fading away and hoping that you understand

01:52:00
that that is an attempt to ease your transition when you get on the job. All right. October is upon us. Remember that everything is due on Tuesday. If you weren't able to meet the deadlines before, that's okay, get it in on Tuesday. We're gonna have some fun events starting to happen before Hunttober officially starts, but I need your materials in by Tuesday. That means you should have been checking in for every class. You should have all the homework done and up to date. You should have been doing your networking. You should have been pushing your code wars every day. And remember, I'm asking you to each week do some prep for Huntober specifically with methods, right? Specifically with methods, so that when we are focusing on how to interview and we're

01:53:00
focusing on how to get through technical interviews, I know that we're all kind of at a base level, meaning that I don't have to worry that you haven't seen these methods before. We'll still go over the harder ones, but I'm expecting you to come into Huntober having seen and played with these methods, explored them, understand what they do, how they work, and that way we can put them into practice during our month together. Hey, Abelaw, me too. All right, the other big one, Tuesday, your client signature, your approved PR, whatever it may be you're submitting. Also do Tuesday, your 100 hours project, beautiful MVP do Tuesday. It's been a blast seeing all of them on Twitter. It's been wild. Some of you really kind of knocked it out the park. It's been really cool to see all the MVPs come in. You're not even done yet. You're not even fully done. All right. Thank you for sharing them.

01:54:00
I definitely was really, really pumped to see all the hard work y'all have been doing, gearing up for Hunttober, all the hard work you're doing as you come across the finish line of program. And so thank you for sharing and thank you for putting in that work, right? This community is only possible because of the hard work that you put in to do all this stuff. And it shows folks are getting amazing opportunities, folks are learning, you're learning in community, which is even better. And so shout out to everyone that's still here shout out to everyone that's putting in the work. I love to see it