Complete Intro to React, v5 Creating a Search Component

Transcript from the "Creating a Search Component" Lesson

[00:00:00]
>> Brian Holt: Hooks is a really new feature to React. It's probably something that if you're on the Twitterspheres that you've heard of, right? And this got introduced maybe about, November is when they announced it. And it's been rolling out. And so now it's generally available as of React 16.8.

[00:00:15] So the first thing I'm gonna tell you right now is, that's totally optional. You do not have to use Hooks right now. But I am going to teach them to you first, because I think they're an easier way to think about writing React components. And then we're also going to the other syntax as well which is class syntax, cuz you need to know both of them, okay?

[00:00:39]
>> Brian Holt: For those of you that are watching the video, if you're watching this just to learn Hooks, there is a section here called Hooks in Depth. It's probably a good sport to jump in, right? Because that section is totally isolated from the other ones and it goes over all of the hooks.

[00:00:53]
>> Speaker 2: That will be in the Intermediate React course.
>> Brian Holt: Yes, that will be in the Intermediate React course. I think it is the first section of the Intermediate React course.
>> Brian Holt: Okay, but you could also start from here as well. So, let's talk about what hooks do for us.

[00:01:16]
>> Brian Holt: So let's go back to our code, let's make a new component here. And we're gonna call it SearchParams.js. It's gonna be inside the source directory as well.
>> Brian Holt: And here we're going to import React from 'react'. Say const SearchParams is gonna be equal to an arrow function.

[00:01:45]
>> Brian Holt: I'm gonna give it some location.
>> Brian Holt: So this is gonna be something like Seattle, WA.
>> Brian Holt: Make sure that this is an American location. The API that we're gonna be using is limited to the US. And actually I've limited the API to just Seattle and San Fransisco right now.

[00:02:04] So maybe choose one of those.
>> Brian Holt: And I'll explain why here in a second. So make a div here
>> Brian Holt: And so one thing I haven't explained to you so far that is pretty important is I wanna give this a class name, right? So typically, I'll just say class equals search-params, like this.

[00:02:34] But notice it's gonna say, I don't know what class is. There's problem with using class. And the issue is that class is a reserved word in JavaScript. So if I say something like class Pet or something like that. Class here has a meaning in JavaScript, right? Just like I can't say, const class = blah, is because this is a reserved word, right?

[00:03:02] Unexpected keyword means it's a word that you cannot use as a variable name, right? Same thing, I can't have this called const, I can't have this called let, right? Class is another one of those. So how do we get around that with JSX? Well, we use the name of the JavaScript API, which is a className.

[00:03:20] They didn't invent this, but this was not a limitation that React invented. And actually, it's the name of the DOM API as well, so it's consistent with what the DOM calls it. So that's why this is className instead of just class, right? I understand that people find that annoying, but it is what it is.

[00:03:39]
>> Brian Holt: Okay, so inside of that we're gonna put a form. Inside of that we're gonna have a label and same thing here with for, right? For is another reserve word, as in for loop, right? So htmlFor.
>> Brian Holt: And this is for the location.
>> Brian Holt: Inside of that, I want to give it location with an input

[00:04:11]
>> Brian Holt: Id = "location". Location =, and then we're gonna put curly braces here because we want this location here to be put there. Sorry, and this isn't gonna be location, this is gonna be value. Value = {location}.
>> Brian Holt: And placeholder = "Location".
>> Brian Holt: And underneath that we're gonna have outside of that, inside of the Form button, Submit, like that.

[00:04:55]
>> Brian Holt: Okay, lesson down here, export default.
>> Brian Holt: SearchParams.
>> Brian Holt: Last line there.
>> Brian Holt: So we've made this new component, that's gonna be a little like search box. So we can search for various different facets of pets, right, against the Pet Finder API. And it has a div with a form inside of it.

[00:05:23] And we have a input with a label for it. Some of you might find this like a little strange way to nest it. This is one way that you can do labels that you put the input inside of the label. There's other ways of doing it as well.

[00:05:37] But in the end, it's just good for accessibility. So that if someone clicks on the location that it highlights the correct input, right? That's ultimately what we're going here for. And it's gonna have a value of Seattle, Washington, right? So let's go ahead and go render that out to app.js.

[00:05:57] So instead of app.js,
>> Brian Holt: Make sure you get this right. Yep, we can delete all this stuff that we commented out.
>> Brian Holt: And here, we're not gonna import from Pet anymore. We cannot use Pet right now. We'll say, import SearchParams from ./SearchParams.
>> Brian Holt: We're going to delete all these pets, and just put SearchParams like that.

[00:06:35]
>> Brian Holt: Okay, open SearchParams one more time, in case you missed something.
>> Brian Holt: So now I need to make sure that my server is running. Mine is still running, but make sure yours is running. And then make sure you open localhost 1234 here. Something I kind of danced around but didn't explicitly mention was that.

[00:06:57] You can't do that file open thing that I was showing you before, that no longer works. You have to be loading this off of Parcel's server, right? Which is why you have to open it off of the localhost: 1234.
>> Brian Holt: So we're gonna open that again, which I have up here.

[00:07:15] And you can see, I have a location here, with Seattle, Washington, with the Submit button there, right?