Let's Learn React!

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Hello, everyone, and welcome to another episode of Learn With Jason. Today on the show we have Ali Spittel. 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 that this is gonna be so, so much fun for a bunch of reasons. I mean, 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 so many amazing channels doing so much cool stuff, so I think we're going to have an absolute blast. For anyone who is not familiar with your work, do you want to give us a little rundown of all the things you do.

Yeah, no , for sure. Thank you so much. I've watched this stream before and it's a ton of fun. A little about me, I am a Senior Develop Advocate at Amazon web services. I work on the Amplify team so lots of JavaScript and other front-end things in my day job. A lot of fun. Outside of that, I also have a blog called We Learn Code and I co-host a podcast with a bunch of my really good friends called the Lady Bug Podcast. I think a bunch of the Lady Bugs have been on here before. That's kind of it about me. We're going to be talking about React today. I've been with React since before ES6 code came out. It's changed over the years and I'm excited to talk about it.

Absolutely. At this point, React is something at this point we've probably all heard of it. 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, but, like, what is it, what is React?

Yeah, so, React is a front-end library and there is 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 decides 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 students about before is people think that you can write dry -- 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. 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.

Mm-hmm.

Those are some of my favorite React features. What about you?

Yeah, I think, so, all the things that you said 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 J Query or document.queryselector or any number of JavaScript tools to loop over data and create HTML or to find a DOM element or keep track of a value as somebody clicked around a page, and what I found is that, like, every time I did this, 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 just trying to remember why we were building things the way they were built. React does all of that work in a way that is 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 choosing, like, how am I gonna build this thing, and most of the time, something is complex enough, if I'm ever gonna work on it again in the future, I probably want to use something that is 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?

Yeah.

So, if they had to go and change that like button in 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 of 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 in it 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. So, I saw a question in the chat that probably is a good context setting question. How much JavaScript does somebody need to know to write React code?

Ooh, 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 parts of React were JavaScript and certain 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, 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 echo that, because I feel like that's an important thing to say a bunch of times. Everybody's gonna have some different base level of knowledge, and there is no such thing as a correct level of knowledge. Like --

Yeah.

We all are gonna know things and we're not gonna know other things and, you know, I've just learned some -- you know, I've been writing JavaScript now for 15 years and Sue Hinton was on my stream a month or so back and showed me something that I had no idea that existed that really changed my life for the better. It was a built-in JavaScript feature. I didn't know. Somebody had to tell me.

Yeah.

The thing is, what we're using these tools for 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's the most cliched, like, oversimplified answer, but it's true. The more you know, the easier this is, but that can come from any direction. You can start in the middle and work outward. You can start at the end and, like, inherit a React app and learn JavaScript as you deconstruct it or you can go and go through a course and, like, learn the very, very basics before you ever try to do anything else. As long as you keep learning, you're gonna get there.

Yeah, for sure.

Well, cool, so, I mean, I love -- I love this kind of abstract talk about it all. I think there's so much that we could talk about, and, chat, make sure that you ask questions as we're going because, you know, especially with these kind of intro sessions, a lot of times we don't know what we should cover because there is so much to cover. And let's see. There's some questions -- so there are a couple of questions that we're not gonna dive into, I don't think. Like one question that I see here is, are, like, functional components preferred over class components? Those sorts of questions are -- they feel very much, like, preference, right? 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 React in.

Mm-hmm.

And the project that you're working on as well.

Yeah, yeah, I mean, and I think, like, something that maybe we should start by talking about a little bit is the care with which the React team rolls out changes.

Yes.

And, you know, something that I thought was really cool was 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.

Oh, yeah.

And that feels kind of different.

Yeah.

Like, 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 base whatsoever.

Oof, lucky.

Oh, my goodness. So, I started writing React, again, before ES6 classes existed.

Ooh, wow.

You had to write objects in order to write React components, so a totally different architecture than was introduced when ES6 classes were introduced. And then now with hooks, I think that hooks and functions are -- function-based components are so great and such a step forward, but I've definitely been there for the kind of progression of React.

Mm-hmm. 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 will be easier to show than tell here. So, I'm gonna move us over to the pair programming view, and let's take a quick minute to shout out the sponsors. The show, like all show is being live captioned right now by Jordan who is with us. Jordan is from White Coat Captioning, and this is all available on the homepage of learnwithJason.Dev. That is made possible through the generous sponsorship of Netlify, Fauna, Sanity and Auth0, all of whom kicking in to make this show more accessible to more people, which means a lot to me and I hope you are getting some value out of it. Also, go and make sure you follow Ali on Twitter. She has just a wonderfully rich feed of excellent information that you're going to get a lot out of. We talked earlier about the Ladybug Podcast. That is another great resource full of a lot of good laughs and a lot of good information. We Learn Code is the blog that Ali writes about. And 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 impressive.

So, let's do this. 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 gonna 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 as a default. We have to set up build tools to make sure that our app will actually work. So Create React App does a lot of this setup for us. There is a tool called Web Pack that it has and it has some nice Dev tools, we can run the command NPX, create React app and your application's name and that will scaffold a bunch of files for us and we'll dive into that before starting.

Anyone seeing this for the first time, NPX is something that ships with NPM, which is part of the Node library. If you don't have Node installed, you will need Node. We can link that really quick. Nodejs.org. If you do need Node, you can install it through there. It's going to be pretty necessary for all JavaScript if you're building anything. NPX lets us run a command without having to install it. This will go get it, then we'll run it and I'm naming my project "let's learn React."

It's such a nice tool. You don't have to have the latest version. It automatically does that for you, and it's really secure. NPX is great to use.

If this -- it would be neat if this just worked.

Yes, it would. So this is, NPX that was a Kat Marchand special. Kat was at NPM for a long time, built the great features there and working on a lot of tooling, which is a whole new space. If you're interested, I have an episode of Rust, where Prince came on and taught us the intros to Rust. Let's see if we can find it. How is my Googling? Is this is? Yeah, What is Rust? This is a lot of fun. You get to hear me scream at the top of my lungs.

Own -- oh, my goodness. I need to watch this. I've heard great things about Rust, but it's a little intimidating to me. Not gonna lie on that one.

No joke, it's heavy. I've never written any C-like languages, so getting into something like Rust, I don't know if I can do this, this is pretty back endy, there are such great tools like rustlings and resources that Prince talks about in the episode that are truly excellent and it's a really, truly excellent community, and I think 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 going to go and try to learn something new? And the Rust community is so top notch. The party Corgi discord that I hang out in often is a great resource for Rust, if you are interested in such things.

That's awesome.

Did I spell that wrong? Oh, it doesn't have a hyphen. There it is. Party Corgi, go find that. You are not that late. We are just now installing the project. So, I have run Create React App and that's all we've done so far. So I'm now inside this project. We can see that we've got a few things here. We've got our source. Do I have -- I think this created -- did this create a new git project, too?

Yes, it does. You have git already set up for you.

That is really nice. So, I'll open this up in code so that we can take a look at it.

Amazing. 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, like, all of my folder is in a git repo, so it breaks that automatic initialization. I've fixed that. So, we've got a basic folder here, and, let's see. 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 is React-scripts. Is that new?

That's a good question. I haven't looked into what it does. I should look into these things a little more. I feel like sometimes I use them and don't look in too deep.

The web vitals thing is really cool. It does performance marks for the metrics that you get in a light house test.

Oh, that's so cool.

So you get these really nice reports on whether or not you're building a performant app, which is really cool.

So important. That's so cool.

Okay. So, I am now -- I think I have a project, right?

Yeah.

So, 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.

Holy buckets, did that just work?

Indeed, it did. There we go. We've got ourselves an app. We made it work. So, I'm gonna put these side by side so that we can kind of look at stuff here. So, let's take a look. And it looks like we have, like, an index.

Oh, so, we would need to add code, is that right?

Here we go.

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.

Mm-hmm.

So, if you scroll down a little bit, there is this element with the ID root in there. This element is all of what 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 are going to handle all of this for us and insert our JavaScript and all that.

Yeah, yeah, yeah. And so -- and this is maybe where it starts to diverge a little bit 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?

Exactly. Exactly.

So, React does something called a VDOM, and somebody asked what that is. Maybe this is a good time to talk a little bit about that. Since we're going to be sticking a bunch of stuff into this root div.

Yeah, so React is this virtual representation of the DOM. 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 Dom manipulation when you change your HTML using JavaScript. React 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 really nice to have.

Yeah, and it's, like, it gives us some normalization stuff. Like, one of the things that's really tricky with the DOM is event handling. Event handling in internet Explorer is a little different than Chrome, so you would have to write all this extra code to make that work the same way, and React uses its -- what they call synthetic events and the virtual DOM to kind of smooth over a lot of these interactions which I -- it's such a, like, coming from the world where, you know, you have to write these kind of browser-specific hacks or including a lot of check the browser for, you know, if document.queryselector or document contains query selector, do this. Or you have to do a regular query selector or get element by ID, all these things, there is this really kind of complicated fall back structure for browser support, and that gets all rolled up into the framework, so if you run it, it just works and it feels nice.

Yes, that's 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 on to a page, it's going to be less performant than if you don't. HTML is what the browser understands best, so that's going to be most performant. There is also this idea of perceived performance, that's how fast your page feels to the user even if behind the scenes it's using more JavaScript so the page has a little more weight to it. I think the virtual DOM makes it so the transitions are smoother and things feel faster to the enduser, even though in actuality it's not as performant.

Yeah, that's a good point. A lot of the arguments about this get dogmatic. Should you ship JavaScript or should you only ship HTML?

Yeah.

It's easy for someone to draw a hard line and say yes or no, and the truth, as with most things in programming is, it depends.

It depends, yeah, and it depends on your project, too.

Well, cool. So, looking at this -- so, we looked at that index.html, and in the index.html, we have this root div. When I come back to my index.js, this is the first thing that React hit. So, what's happening in this file?

In this file, this React DOM render function is taking two arguments. The first is the app component. And we're getting a preview of this JSX syntax here. Kind of looks like HTML, but we're writing it in JavaScript code. So we're saying 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 the HTML file. We also have this React strict mode thing. This is just for development. It's going to give us better error messages, I think.

And I think it's stuff that isn't wrong but will be eventually is the difference?

Yeah. For sure.

Like, it's not now, but soon we're gonna make a change that will -- that will cause this to act differently, so you should change this now so that your stuff doesn't break later. At least that's how I've understood it. I haven't actually, like, dug deep into what strict mode does.

It's actually warnings and things like that. This is actually pretty new to Create React App.

Oh, nice.

I remember using it and my students being like what's going on here? It changed overnight. We don't need to worry about if it. It will give us more warnings as developers. It's not going to impact the enduser. The really important component is the line 9 that is taking the component and attaching it the document with ID root.

Nice. And that, it looks like, is coming from line 4, importing app. So, it looks like we're importing a couple of things. The web vitals, we're not going to worry about that today. There is a link here if you want to learn more about that. We're importing React and React DOM. So, I can see where we're using React DOM. This makes sense to me. Where are we using React? Why do we import React?

It looks like on line 8, we're using React.strictmode. It used to be every file you used React in, you needed to import it, up until super, super recently. So, that will make it so you can use JSX within the file. The very last -- the most recent version of React makes it so that you don't need to import React into every file anymore.

Oh, nice.

Now it will work without it. Any file that you use is JSX syntax, you needed to import React.

We're importing CSS. So, this is something that -- this caught me off guard when I first looked at 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. Because this isn't JavaScript, right? This is something else.

Yeah. So, this syntax is given to us using JavaScript Modules, and we're using this build tool web pack 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. So, 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 Web Pack 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.

Yeah.

Nor would those lines 8 through 10.

This is when it becomes important, talking earlier, 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 is supported in JavaScript will make it easier to debug and understand why things are happening the way they're happening. It's not necessary. You can absolutely just pick this up and run with it. But it's, again, that, like, the more you know, the easier it is to dig deeper.

Yeah, for sure.

So, I don't want to get too deep into it, but a few people have asked, so I'm gonna ask you. There is 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 other approaches? Kind of how do you -- how do you make decisions on what approach you're gonna 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.

Mm-hmm.

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. So my -- like, my take on this is exactly the same as yours. I think 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 a CSS file. It makes me really happy to know everything is in one place. When you get into hundreds of pages or hundreds of components, it gets really hard to track and you start accidentally introducing bugs and somebody will accidentally break something or add important hacks to get around specificity problems that they don't know enough to solve.

Yeah.

Then you're in for sad times, right? 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, but that is probably a whole episode in and of itself, would be to talk through the trade-offs.

Oh, for sure.

So, instead, let's get back to React, and let's look at an actual -- so, 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. So that's this file. So, can you walk us through kind of what's going on in here?

If you go to that local host, I think it's the 8,000 tab we have in the browser. You can see when we ran our React application, it actually has something displayed on the page, and that stuff is written in our app JS right now. So, you can see that on line 8, 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 now that our local host 3,000 or 8,000 is just a white page.

Mm-hmm.

We're no longer returning anything from it. So, whatever we return from this return inside of our app is going to show up on the page, so, if we put an H1 hello world in there.

There it is. There's our "hello world."

There you go.

And a couple of things that are worth noting here. So, this is just HTML. Like, the major difference here is that we're writing classname instead of class.

Yes.

Is there -- do you know why we do that?

Yeah. So, in JavaScript, there is a thing called a class, and that thing called 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 --

Mm-hmm.

-- we changed some of those HTML attribute names. So, one of them is class name, 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 any time that there is a collision with a JavaScript keyword.

Yeah.

So, another one that I can think of, you would have a for loop, but you can also have a label with a for attribute to describe which input the label is for, so that one -- what did they rename that one to?

It's HTML for.

Like that. You'll see a few of these in React. This can be a bit of a gotcha as you initially start, but the nice thing about Create React App, I think it's just gonna tell us.

Yeah, it will give you a warning in the console. So, it will actually work as expected, just it will tell you --

And it says.

Did you mean classname instead of class?

This is really nice. 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 gonna work the way that you want in all situations. And I dig that.

For sure.

Well, cool. So, okay, and so then from here, 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.

Okay.

And what that will allow us to do is have a couple of buttons different color and when we click on one, it will change the whole background color of the page. Nothing super complex, but it's going to show us the fundamentals of React.

I'm into it.

Cool.

I'm going to clean this up to get to just the stuff we need. I removed the logo because we're not using it anymore, and I think we're ready. So, 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 I like the primaries.

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 want it to? There it is. Red, yellow and blue. Wow, spelling today is --

It's hard. It's challenging.

Going well.

Cool. And let's go ahead and add some classes to those two. So, we'll use the classname attribute on each of these and make them correspond to the color on each button. So, we'll add red class to the red one, yellow class to the yellow one and a blue class to the blue one.

Okay. [�Barking�]

Oh, here we go with the stampede.

So many Corgis.

I'm so glad I brought this back. 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 very happy about that.

That's so fun. 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. Yeah, just for styling, for now. And so then let's add some CSS in our app JS -- sorry, our app.css. This is another thing that we can chat about. Before we saw 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 the entire application in the index CSS. That's perfectly valid if that's what you wanted to do. But you can also write component-specific styles within the componentname.css file if you wanted to.

Okay.

We're using that CSS file to write CSS for app.JS and importing that app.css in the app.JS file.

So now 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 a grid and then we'll make it height: 100 and maybe a width of 100. That does what we want. And because we've got the thingy here, we can play with a little bit of grid stuff and, like, align items: Center I think will do it. Vertical centering in CSS.

Amazing.

They said it couldn't be done.

I loved you did it this way. I would have done it a different way. It's so fun to do -- the different ways to make something, to make the div the height and width of the page. Very cool.

This is, I think, the thing that is so exciting and so frustrating about CSS is that you can solve the problem 1,000 different ways.

So true.

It's hard to get a straight answer, because the answer, as with everything, is "it depends."

So true. So true. Okay. So, let's also make it so that our red button's red, our yellow button's yellow and our blue button's blue.

Okay. So, let me make this to start, then, probably do you think make it white again so that we can see our buttons?

Yeah.

Okay. And so we can do something like -- how about button style that will give us some basics? So we can do, like, a border of -- a black border and give it a little bit of a border-radius to make it look buttony and maybe make the font size a little bit bigger. So, that and then we can do a button.red. You can have a background of red and then we can duplicate these and do blue and yellow. And I think that will get us -- ooh, that's rough. Let's make the blue one -- we'll do a color: White.

Ah, behold, my bucket.

Just to make that a little more legible, we'll make it bold. Okay. And maybe a margin of, like -- give it a little space. There we go.

Amazing.

This one might not pass contrast, but we're learning. We're learning today.

Yeah. Yeah. We'll talk about this down the road, but maybe so we can abandon this style sheet, is if we remove the button from the red class and the blue class and the yellow class, it will make it so that we can reuse the red class on the body background as well.

Ooh, 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 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 basic styling set up. We've got 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 go.

-- background changes. And if we changed 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 can 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 of years, instead of something that has 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 gonna 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 div 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 life cycle and state within these function-based components. The syntax from them is really nice. It's a lot less verbose than writing the class-based components. I think it's a little bit more beginner friendly, too.

Yeah, it definitely. So, it's beginner friendly once you get past the initial weirdness of destructuring syntax, I think is the part that throws me the most. So, there's a couple of things that happen here where, like, if you've never seen it before is destructuring. So, what we're doing is we're getting react and useState equals React.useState like that.

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 useState -- so, if I'm gonna use useState, right, it's a function. So I know that much. How do we actually interact with this? Like, does it -- how do we use it?

Okay, so, let's provide something to useState. So, let's say in quotes "red," just to start out with.

Okay.

And then what we'll do is save this to a variable. So, const color equals state red. Let's console.log red on the next line.

I'm going to do it like this so we can see the label. This is one of my favorite debugging tips. If you add the quotes like this, it will say "color" and then what the value is.

Love that. Cool.

So we've got a color.

If you look in the console, this is actually giving us two things back, so it's an array with two things in there. The first item is red, and red is what we passed into that useState function. That's going to be your initial value for state. Usually you'll see, like, an empty string or object or array or something like that passed in, but you can pass a default, and that will be what your state variable is set to be default. And, again, state is just data that's going to change in our application. Then the second thing is a function.

Mm-hmm.

This function is given back to us by this useState function as well, and it's going to allow us to update that value in state. So, if we wanted to change the variable 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 then we would be able -- we can use that -- that function is how we set the color and then 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 useState is a little clunky and could lead to some bugs because it's more code than you need. So what you normally see, on line 5, 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 red. It's not an array anymore. That -- so, and this is, again, this is destructuring. So, up here we're destructuring an object. That's where 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 something that's it's a little head-bendy when you see it the first time, but it's such a power up 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. The MDN documentation -- I'm like what does MDN stand for? Uses -- has really great documentation on array structuring. If you're interested in learning more, that's a really great resource.

Destructuring assignment. This will be a really good primer on that. Probably more pages with more specific things in there, but that is pretty excellent.

Pretty much their stuff on everything is excellent, in my opinion.

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 always 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.

I've been using Chrome for too long.

Show me potato salad.

I fought it as long as I could, but I'm on an older Macbook and Chrome has a memory leak where it gets completely unusable. It beach balls on me.

Oh, now.

I switched to Firefox out of necessity. I'm salty at MDN for laying everyone off.

Oh, my goodness. I was a Mozilla tech speaker, part of that program, which was really, really cool. I was really sad when that disbanded at the same time. 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 back ticks, which will allow us to use string interpellation. We can 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 "color."

And if y'all were looking, you can see as soon as I add that dollar sign, VS Code recognizes that this is something special and it changes the highlighting. So that, to me, is always helpful to notice, that if I remove this, it goes back to looking like a string, and now that it knows that it's JavaScript.

Text editors are so helpful. Know your developer tools is one of the things that really 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. All right. I'm feeling it. 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 to 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.

Line 13, add on click. Okay. And there's a question in the chat about the curly braces around app color. Can you remind us why these ones are here?

Yes. So, any time 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 variable color.

Great. And so I imagine we're probably gonna need that right now, right, on this on click?

Exactly. So we'll do on click equals curly braces. Then we can write a function inside of here. So, maybe for now we can do an arrow function that console logs clicks or something along those lines.

Okay. Here's my -- okay, it auto formatted. That's helpful. So, our on click, we have an arrow function and it's going to console log, and that's all that this does. So, now when we click red and only red, we should see a log. Okay.

It worked.

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 onclick.

Right in here?

Yep.

Okay.

And we'll set it to red.

Okay. And so is this -- I can copy-paste this between each one?

Yeah, let's try it out first.

Good call. Good call.

I think it should work. Always paranoid.

Ooh, look at it go. So, red works. I'll refresh the page so we can see that again. So, we default to blue, right? If I click yellow, haven't added anything, blue, haven't added anything. If I click red -- did you see how it went white when I refresh the page?

Yep.

How come it's not doing that when I click red?

This is the -- React's nice transitions and all of that, but also because the variable is 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 refresh the page, we're doing, like, a whole load, right? I'm saying, hey, browser, go get this file and then load it and parse the JavaScript and show things and read the CSS, and now when I click this, it's -- it gets to skip all that, right?

Exactly.

Yeah. That's -- oh, that's so powerful. Like, and this is kind of where 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 like, whoa, I can do all of that with this?

That's really the power of the state, too, is that it will 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.

So, now I can just pop between these?

Exactly.

Wow, that is cool. And, like, how nice is that that it just works the way that we want it to work, too. That is really, really click that you can do this kind of stuff so quickly.

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 -- 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.

Mm-hmm. So, a question I have then is, when I'm looking at this, 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 setting up the button and all this stuff. Is there a -- how would we use React 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. This is the really nice part of React, is we can start reusing this code. Our three buttons have really similar code between them. They all have a class name, onclick event with a click, 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. So, we can write a second component by creating a second component file. So, maybe we'll call it --

Okay.

Button.JS or colorbutton.JS.

We can probably stick with button. So here's a question. Index.js is not capitalized, app.JS is capitalized. Should button we capitalized?

I normally capitalize my component name files, so I would capitalize it.

There is not like a rule for this? This is just a thing -- it's more for like us to see, oh, this is capitalized, it means it's a component.

Exactly. It means it's a convention.

Got it.

Okay, 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 what we want to abstract out, right? This is the part that gets reused.

Exactly.

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.

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 useState. If we want to import something into another file, we need to export it from the file that we write it in. We're actually already doing this in the app.JS, it's 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 that it's the default export from the file, and we can just import button from button.JS. So, we have the import app from app.JS within the index.JS. This allows us to import like that.

Okay. So it's gonna be like button.JS okay. So, now I have my button. If I didn't have the default then, what did I --

We would need to use that other import syntax where we're destructuring the item that's being imported.

So without default, it would be like this?

Yeah.

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 setcolor, but that, like, how did that get in here? We don't know.

Yeah, so that was defined in our app.JS or instead of in our button.JS.

Mm-hmm.

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 or set color is erroring out because it's defined in my app JS but not in my button JS. We'll come back to that.

Okay. So, to use this then, I can just delete this altogether.

Yep, we can delete these three buttons that we have written. Or just delete the first one.

And then use it.

Yeah.

Okay. All right. Let's go.

Cool.

First one worked.

If we put 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. Ooh, okay.

But they're all red.

Mm-hmm.

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 setting this up -- like, 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.

Okay. 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.

Okay.

We still have the hard-coded red everywhere. So, instead of line 1, we're going to pass props as the argument to the function.

Props. Props. [ Laughter ]

Props. Props would be fun, too. I like that. And if we console log what props is here, --

We will get what? Oh, look, our color of red, our color of yellow, our color of blue.

Yeah.

So does that mean I can put -- I can put whatever I want in here and it will just give me that?

Exactly. And underneath the hood, React is turning it into an object, which is more useable for us. So, you can see now that one has "test" and "hi" in it.

Okay. All right. So, that makes sense. I get that. So 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 interpellation should work as well.

That looks cleaner to me, I'm happy.

Cool. And let's also set the --

We've got one yellow, one blue as well.

Oh, okay.

And on line 11, we can substitute in the props.colors as well. This will also need to go in curlies. So, anything we want to use the variable, we need to put curlies around. If you remove those curlies, every single button is literally going to say props.color.

Got it. So this is the -- the curlies are the signal to React that, like, hey, I'm doing something here.

Yep.

Gotcha.

Cool.

It looks like I did the -- the thing is lowercase. If we wanted to, use JavaScript to make this upper case or write different text. I think we can call this good enough, right?

Yeah, I think people will understand. Amazing. So, the last thing that we need to do is actually get the set color working.

Yes.

And right now we have set color wired up in app JS and we're gonna 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 --

Okay.

-- 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.

Mm-hmm.

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. It needs the curlies since it's JavaScript. And now in button JS, it needs to be -- we can comment line 8 back in.

Now this would come from props. And so we can destructure this now, right? We can use that same destructuring syntax and get, like, color.

Exactly.

Thank you for the sub, Ben. I appreciate it. Oh, I can turn on my goofy. Here we go. Look at me. Look at me appreciating you.

Oh, my goodness.

And so then we'll get set color. So then I can just edit out the props dot here.

Exactly. Pretty helpful.

That looks clean. Look at that. That is lovely.

Amazing. Let's change the hard-coded red on line 7 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, 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. You showed something that is so small but so important. We just made this completely dynamic. So, check this out. So, now we've got these buttons and I can go red, yellow, blue, but also, look at this. What if I go, like, purple and then I go into my app.css and add a purple button? This is going to need to be on white, isn't it? Oh, whoops. I forgot to change the actual name of the thing. There it is. So now we have support for purple. I didn't have to write new JavaScript. I just had to create a new instance of this button. That is really -- like, this is where I think the power of this comes in, is, like, you know, we can drop things in and out and just add more and more as we go. Really, really powerfully.

Yeah. So handy. React is so great 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 --

Ooh, that's a fun idea. What if we tried that? So instead of -- oh, we can do a little bit of CSS in JS here. So, 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.

Okay.

It's actually going to take an object instead. So, this is gonna look weird. We need two sets of curly braces. One set of curly braces to say that this is JavaScript.

Okay.

The second set to say that this is an object of styles.

Got it. Okay.

And here we can just do color. Or background color set to color, I think.

Background -- this isn't gonna 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 will use camel case. So, we will delete the hyphen but add a capital C.

Got it.

Amazing. And then it should work.

So now we've got --

We need to do the same thing with our app JS.

With our app JS. Oh, you're right. You're right. Okay. So, but for this one -- ooh, this is gonna get fun. So, instead of using -- 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. Okay.

Cool.

So now red, yellow, blue, and you can see, like, thing that we lose is I can't change the text color without doing extra JavaScript logic.

Yeah.

So this is where, you know, writing CSS for style things starts to make more sense.

For sure.

But check this power out because now if I do, like, I don't know what's --

Pink.

Here is a good JavaScript color. Tomato. Now I have a tomato button, and I can just keep going. Like 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 really where this starts to shine. Because now we've got this flexibility, right? And we could do this with more thoughtful CSS generation, too, where it was, you know, and really in any production app, probably the designers would pound down our doors and drag us out into the street if we arbitrarily started adding color options in, but --

For sure. For sure, but this is cool for showing how JavaScript stuff works. A function that determines how dark the background color is and then decides on white or black text depending on that.

Oh, very cool.

So, that could be a function that you could add in.

I think there are stack overflow divs for stuff like this.

Yeah, they're, like, contrast checkers that you can use to make that stuff work. Yeah, this is super cool. I feel like this is kind of a solid overview. So, maybe just to recap what we've done thus far, we've used the Create React App, which is somewhere over here. Create React App, here. We just used Create React App, which is a one-liner within NPX. That's not what I meant to send you. Just dropping arbitrary React code into the chat. So, the -- we use Create React App. We started it and then we just edited, like, app.js. And that's really all we've had to do. We've been able to create what I would consider to be, like, a pretty full-featured -- this isn't an app we're going to ship to the app store or anything, 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 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. 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.

Mm-hmm.

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 do you 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 use props to pass around this function to control state.

For sure.

Which is really kind of interesting because it shows that this isn't like an either/or. You get to do any combination of things. And as you get more advanced, like, there are lots of patterns that are established that make this more approachable. So -- oh, jeez, this -- I'm so happy with how much we got done. So, we've got about 15 minutes left, and I wonder -- is there anything else that you wanted to build or would you prefer to show, like, some extra resources for people to take next steps?

Ooh, other resources would be great.

Yeah, let's do that. So, if I -- if I want to go further from here and learn something more, where should I go? What's a good starting point?

There's so many React resources out there. I think some of my favorites are Kent C. Dodds creates some excellent resources. The React documentation I think is really great, as well. I always love starting at the documentation level because then you understand where the authors are coming from of React itself.

Mm-hmm.

And you get really, really reliable information. 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?

It's up next to -- it's like Docs, tutorial, blog, community.

Oh, community. I was looking in the sidebar here.

Oh, no, you're good.

Articles. Oh, look at that. There's a whole bunch in here.

Yeah, so these will be mostly free, as well. Which is really great. They've got different modalities. If you learn better via video or along those lines, there is that as well. Dave Ceddia also has really, really great react resources.

Let's see. Complete React tutorial. That seems.

This resource is amazing, if you want to go deeper on what we learned today, it will be review for the first couple of sections and then go deeper on how to call an API and things like that from here, and actually deploy it as well.

You know, one thing that might be worth looking at. We might not have time, but the chat was asking if it we could cover use effect really quick.

Ooh, that's gonna be a tough one in the time we have remaining.

I think -- so, 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, the Dave Ceddia one, has a bunch On Use Effect, so that's really great, and also the React docs as well. Dan Abramov, he has a massive blog post about useEffect. It's like a half hour read. I really, really enjoyed that when I was teaching React just because it really gave me a great basis on that.

It's on overreacted, right?

Yeah, it's on overreacted.

Oh, come on.

Maybe it's called something different.

Completely guide to useEffect, is this it? 49-minute. Holy crap. So, this is a book. This is deep, deep.

Super deep.

What's cool about this, this is sort of that -- you can always choose how much you want to learn because the docs here for useEffect are going to show you what happened. UseEffect is for, I guess the shorthand is for when things change. Like, if something happens, like, the component mounts or unmounts or a piece of state changes or something, you can use useEffect to track that, but it's -- I feel like it's that easy and it's that hard is a good description of useEffect.

Yeah.

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 useEffect.

Definitely if there is anything in React that's going to trip you up, this is probably where it's going to start, in useEffect. It's like an escape hatch from the way that React wants you to do things, which means you are now kind of stepping 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. You're going to see a lot of animations end up in useEffect stuff, but, yeah, it's -- it's worth learning. It's worth learning, like, deeply to make sure that you --

We'd need a whole other one of these sessions. I want to give two shout-outs to developer tooling for React. The first is React Dev tools in the browser. I have used that Chrome extension forever. It will really help you debug what state and props are at different points and if you have anything like a useEffect that's going crazy, why it's doing that. 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 E S7 something -- that one, yes.

Great. Oh, yeah, 2 million installs. That looks useful. I actually don't have this one and now I want it.

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, all right. You have my attention. Okay, so, that is super cool. And with that, I think we are running a little bit low on time, so let me do one more shout-out to Jordan and White Coat Captioning, who have been with us today doing live captioning for the show. That is always available at lwj.dev, right here in the big box while we're live. 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's getting a lot of attention. That is made possibly through the generous sponsorships of Netlify, Fauna, Sanity and Auth0, all of whom are kicking in to make this show more accessible, which I very much appreciate. 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. Then I also have a YouTube channel that's kind of new. It's Ali Spittel Dev. And my blog is We Learn Code. I hang out on Dev. @ASpittel everywhere on the internet.

Is this the right channel? It looks like it.

Yes.

Okay. So, go -- yeah, go subscribe, go do all the things. Get in touch with Ali. Definitely follow her on Twitter. It is a great feed to be a part of. Ali, 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 had an absolute blast. Chat, I hope you had as much fun as we did. Make sure you tune in later this week because we've got so much good stuff coming. Ali was here today. We have Scott Moss coming on Thursday and we're going to learn Next.js. Next is a framework built on top of React. Building sites. Extra features we'll talk about. A great next step if you've been learning React and want to learn what else we can do. Here we go with another Sam speed. Next week we're going to be talking about Vue. Ben Hong is here. On Thursday, Sarah Drasner is going to talk about how she looks for people, what makes people stand out when she's hiring and also what we can do to be more likely to get that interview to get that job. It's going to be Q &A based. Add the calendar so that you can see things coming. It's going to be a great, great next couple of weeks, and there is just more and more after that. So, make sure you go check it out. And I think with that, Ali, thank you again. Chat, thank you, as always. Stay tuned. We are gonna raid. And let's all go out there and do our best to help people up, not hold each other down. We'll see you next time.