All language subtitles for 029 Search Box Component_en

Now that we have our search component, we might actually want to be able to use this component multiple

times because if we look at the code for our input, all it is, is just an input that doesn't need

any local state, even though it seems like we're calling set state in our input.

It's really just a function that we're passing from the context of our app component into the on change

handler of our input.

But this means that we can probably move this into its own component because maybe we want to have a

reusable search component.

Well, how would we do this?

Well, let's just make a new component.

Called search box.

And we'll create the usual file search box dot component Dutch ASX now, some of you might have noticed

why is it that some of our files have Duchesse in some have J.S..

Well, you remember how I mentioned earlier that create, react and hides away some of the configuration

for Web pack and babble?

Well, what babble does is it helps transpire down any of the modern JavaScript, including James style

files that we write into older versions of JavaScript in the public folder when we finally run our build

script inside of our scripts file.

Now in this transform.

If we look at our docs file for Afghans, we actually see that it says JavaScript babble down here.

So even though we're writing Jass code here, right, because we're rendering HTML in our JavaScript

babble knows that it should probably run this regardless through a transform, even though it's not

a sex file type.

We'll explore this much later in the course when we actually write our own Web page embattle configurations.

But right now, just know that whether or not you write Jass or RSX in the context of create react that

you can write in both file types.

But we want to write docs in ours because we want to be explicit.

We want to know that if we're going to write sex while this file type is Jass X, we're also going to

create our search box dot styles, dot CSF.

And I've included the stats for you, and you can find it in your resources.

So you just want to copy that file and paste it in.

And then you want to import it into our search box component, so let's first import react from react.

And then let's import in our stylesheet.

Now we're going to use another functional component.

Now, let's go a little deeper about functional components.

So functional components.

Unlike class components such as our Apgar's component.

They don't have access to state because they don't have access to constructor, which is a class method

on our component that we import from react, that we extend our classroom.

They also don't have access to life-cycle methods.

They don't have internal state and life-cycle methods because we don't always need to use life-cycle

methods or internal state, sometimes all we want to do is render some HTML and that's what a functional

component really is.

Unlike a class component, a functional component is just a component that gets some props and returns

some HTML.

And we'll figure out as we build our apps and see more challenges when to use each, but for now, the

main thing to remember is that if you don't think you need internal state nor access to lifecycle methods,

then just use a functional component because it's easier to read.

It's actually easier to test, as we'll see later in the course.

And it's in some ways smaller and easier to reason about.

So we'll just copy over the input that we want inside of our search box component.

We'll apply a class name of search to it, because that's where our search box styles are applying those

styles to.

We'll keep this type because we know that it's going to be search and then as far as placeholder goes,

we might want this to be dynamic because maybe another place that wants to use search box doesn't want

the placeholder to say search monsters.

Let's say they want to search people or anything else.

We want place to be a prop that gets passed in.

And as we learn with our structure, we can d structure that prop off of the props object because all

the props come in as one big objects, so let's d structure it off and then pass it into our placeholder

and then on change can be another prop that gets passed in which is a function under the name of handle

change and we'll just structure that one off as well.

And then we will replace the value inside of our change right here.

Now let's export our search box out.

And then inside of our abcess, we can import it in and start using it, so let's import in our search

box.

From component's.

Search box.

Search box component.

Now, in order to replace our input, we are just going to copy over.

Some of those properties now we know that type is already on our search box component, so we don't

need this.

We do need the placeholder because we want to be a prop that we pass in.

And then instead of handle on change, we're going to say handle change and then we'll pass in this

function.

And now let's get rid of our input.

And if we go back to our application, we'll see, there's our search box.

And we've still got our functionality, but now we've got a reusable component that we can use in multiple

places.

And this is what's great about react is this component driven style of writing code.

Our search box is just a presentational component that pretty much styles an input and then it takes

any functionality that it might need in its handle change property.

But now we have this reusable search box component.

And this is great because we can minimize the amount of repeat code that we have, we don't have to

write an input and then style it inside of a local file because we can separate it into its own component.

This will become much more apparent as we start building larger and larger applications where more of

the code gets reused.

Right now, the benefits might not be so obvious, but it's definitely the style that we want to code

in.

And this is one of the huge advantages of react is writing these smaller and smaller reusable components.

OK, now let's continue.