 Okay. So we just got our first email from react holiday and we have an assignment. We need to implement the simplest version of a show more component that we can. Okay. So probably involve button state, a couple of conditionals, and to keep it real, a way to truncate the text. Okay. Now my favorite way to start a new kind of component project like this these days is to use VIT and there's a couple of commands here. So let's grab this one and do it in the terminal. I will paste this in. We're going to use the react template. There's a number of templates here, but we're just going to do react template. We'll call this show more. Let's try that. Cool. So then we can just a CD show more PNPM install. Nope. PNPM install, PNPM run. Was it dev? Was that it? Yes. Okay. Open that. Perfect. And open it in code. Okay. So we find app JS and we delete everything that we don't need. And then let's put some text. I wonder if there's a way to like actually, we see that there, generate a text for this cause we want like a large block of text. I mean, I guess we could just like keep letting co-pilot add the next word. That's a big pain in the ass though. Let's look for like a developer Ipsum, something silly developer Ipsum. How many paragraphs? Let's just do two paragraphs, generate, copy and paste. Perfect. Let's put this inside of a paragraph, something like that, even though there's two paragraphs here. So cheating a little bit and add a button. That was one of the first things. So we'll call this show less. I guess it's probably the first thing that we need to do. Yeah, cool. Show less. Click on that. Nothing happens as we could assume. So we have this state and we need to use the state to do something. Let's change this to false, change count to expanded. Now let's add some styles to this. So style just changed the display for now. So if we have a display of, if it's expanded, we want the display to be block, otherwise none. And then this button is just going to set expanded, right? On click set expanded. And we can do something is really easy, like not expanded. Okay. So it's not expanded. And then we get it. Okay. Cool. Cool. Perfect. Now displaying isn't going to be exactly what we want. So let's try to improve that a little bit. I think we could like truncate this text if we put it into a prop, but I think more so. I want to do it based on height. So let's change this to max height is expanded, say none. I think none is appropriate. And then if it is, we'll say a hundred pixels. You know, I'm going to change that to text because I prefer the explicitness. Okay. Well, we have a little bit of layout silliness because of this CSS file. So we can make that go away. Maybe this isn't my favorite way to make a CSS app anymore. Okay. Cool. Okay. So we have this and so this is funny. This is kind of like that, that, that classic CSS issue. You know, CSS is awesome where the bounding box isn't like actually collapsing over the content. So we need to set one more property, I think, which is overflow hidden. Okay. Cool. So now this opens and closes. It doesn't do so particularly gracefully, but it does open and close over that content. All right. So we see a handful of things that could be improved a little bit. Like this is just cutting off. We don't see any like truncation. It'd be nice if there was like a truncated thing right here. And this doesn't like animate in any meaningful way. Just pretty boring, but it's done and it works. Okay. So we got day one done. We used state. We used button. We used a little bit of styles, which I kind of forgot to mention, but it's okay. The next part of this is for you to use a ref to get access to the underlying DOM. So we have a notion of how tall this element actually is and what it should be shrinking to and from the documentation right here. If you want to hear my take on what a ref is, well, then you can sign up for react dot holiday and get this email newsletter to get all of my takes on these specific elements or subscribe and get this tomorrow. So that's it for day one. We scaffolded it out our basic component. I'm going to put some links to the introduction video up here and then followed by the next solution video, which I will include next. Bye.