Complete Intro to React, v7 Search Form Component

Transcript from the "Search Form Component" Lesson

[00:00:00]
>> So so far, we've been doing relatively, well, not relatively, actually, no state in our UI, right? There's no interactivity in this page. Can't click on this, can't click on this, nothing's changing, it's a very statically just blog post kinda thing, right? And nobody likes blog posts, just kidding.

[00:00:22] I mean, do people like blog posts? That's a good question, I don't know. Anyway, that's what hooks are for. Hooks are for adding statefulness to UI. Now, most of your bugs that you will ever write or ever encounter are due to not accounting for change in your application correctly, right?

[00:00:46] You went from state A to state B, and somehow you ended up in state C because you messed up the transformation from A to B, right? So the idea with React here is we're gonna make this as simple as possible and as easy to track change over time in your application.

[00:01:04] So the idea of a React component is given this state and this props, my component will look like this. So every time that you render your React component, it's like a snapshot of given this state and this props, my component will always look like this. That's the idea.

[00:01:25] So that's why I was telling you that you don't wanna do things like let counter = 0, and then counter++. If I render this 10,000 times, what's counter gonna be? Different than it was on the 9,999th time and different than it was on the first time and the second time, right?

[00:01:48] I can no longer reason about, and I hate that phrase, but that's what we're doing, right? I can no longer reason about my code very easily. But if I do this and I render this app 10 trillion times, on the 10 trillion and first time, what's it gonna look like?

[00:02:04] Same damn thing, right? That's the idea here. That's why we're avoiding side effects, right, and having pure functions. If anyone comes up with some Haskell stuff right now, I'm just gonna throw them out. You think I'm joking. All right, create a new file and call it SearchParams.js. Put that inside of your source directory.

[00:02:37] Gonna make a function here called, you guessed it, SearchParams and it's a function, okay? In here we're gonna put in the location. You can put that wherever you want. I'm gonna put Seattle, Washington. Okay, and then I'm going to return a div with a className. So sorry about classNames for a second, you're probably expecting to see here class, right?

[00:03:08] Why can't we just put class there? Class is a reserved word in JavaScript, right? You can have a class Thing, right? This means something in JavaScript. So if we just put class there, JavaScript is gonna think that, that's a class, right? And it's gonna blow up. Now, some of the build tools are actually smart enough to build around that anyway, but just use className.

[00:03:37] className is actually the name of the JavaScript API anyway, so they're just not making it up, right? That's actually what inside, if you search for domNode.className in MDN, it'll bring up the JavaScript API. So that's why it's called className and not just class. There's a couple of them.

[00:03:53] There's htmlFor instead of fourth labels and stuff like that. You'll see that later in the course. Anyway, search-params. Okay, we're gonna put a form. We're gonna put a label. Actually, we wanna see it now, htmlFor="location". Location. No, capital please, thank you. Input id="location" value=(location) placeholder=, can you guess, location.

[00:04:42] Okay, and then in that, we're gonna put a button, and that's gonna submit. And we're gonna get rid of class Thing down there cuz we don't need that, but we are gonna say export default SearchParams. So let's talk about what we did here. We made a div. Inside there, we're gonna use a form.

[00:05:00] I still ends up using a lot of forms in JavaScript cuz forms work very well in browsers. So why are we gonna try and recreate forms when forms exist? So for example, I don't have to track submitting or there's a 10 million ways to submit a form, right?

[00:05:18] And you can try and track all of them or you can just track submit events and then let the browser handle everything. And actually, this is not even the best way to do forms, but I'm gonna show you this so that you can understand how React works with hooks.

[00:05:29] I'll talk about later what's the ideal and most lazy way to go about doing this. In any case, we're gonna make the ability to search against a pet API, right? So you can look for pets in Seattle, pets in Minneapolis, pets in Salt Lake City. You can search for dogs, for poodles and things of that nature.

[00:05:45] But we're gonna start with location. So we have a div, we have a form, we have a label, the labels for location. We're going to be tracking this. So we have this location variable up here, Seattle, Washington, and we're gonna make that the value of this input, right?

[00:06:04] So when we render this for the first time, it's gonna have Seattle, Washington prefilled there, right? And then the placeholder, if you delete everything, is gonna say locations that people can tell. That's what this form is for, okay? So go into app.js. You can go ahead and delete Pet here.

[00:06:25] I'm gonna say import SearchParams from SearchParams. And you can just replace all these pets. We'll reuse the pet component later. But for now, this is just gonna be SearchParams. You'll find that generally, your top level app component is just gonna be a collection of page components or very high level components.

[00:06:46] That's very typical. Again, whenever you're building an application, it's good to stop and say, what do I expect to happen before you just refresh and head over, right? I expect to render the SearchParams, which is gonna be this form here that's gonna have Seattle preform, then with a button underneath it.

[00:07:02] Make sure your dev server is running, mine is. And you can see here. Parcel's pretty smart about hot module refresh, HMR. So typically, when you say that it'll just automatically refresh page, but sometimes you do have to refresh the page. Couple things I wanna call out just about Parcel.

[00:07:24] One, you're still probably seeing, Some errors in here. That's totally fine. Basically, React is teaching you for me. I'm about to teach you what this error does, but the development mode of React will catch a lot of these problems before you even know you have them. And then one thing that you sometimes will see with Parcel, you'll see this warning that connection to the HMR server's lost.

[00:07:48] Just ignore that. When you refresh the page, it'll sever the connection, which you'll be like, no, something bad happened when in reality, it's like you just refreshed the page. It's fine, Parcel, don't freak out. Okay, so in other words, ignore the console for now. Okay, so now we have this page, we have this location thing in here.

[00:08:12] I want you to try and type in that input. Doesn't work, right? Nothing's happening. That's pretty hard to do. It's pretty hard to break an HTML input, right? But let's talk about why. Every time that I push a button on here, React catches that event and says something happened, time to rerender my entire application, right?

[00:08:44] So it's gonna catch, okay, user press the letter T, right? And then it kicks off a rerender cycle. Then you'd go and rerender this SearchParams cuz it knows that's where the event came from, right? It came from this input. And then it's going to rerender this again. Well, what's the value of location here?

[00:09:07] Seattle, WA, right? What changes that? Nothing, right? It's a constant, it's just always Seattle, Washington. If you don't change it, it doesn't change. So every time you do a rerender, it's doing exactly what you told it to do, surprise, surprise, right? So we have to make it, again, to borrow the computer science term, mutable, right?

[00:09:33] We have to make it changeable.