In the section we're going to continue doing a little bit of root level set up on our project inside
my Capones directory.
I'm going to make a new file called the search bar.
Yes file and as you might guess the goal of this thing is going to be to show our search bar which is
going to be essentially just that text input at the very top of our application.
This is going to end up being a somewhat simplistic component at least in terms of the GSX that it's
going to show.
So inside of search party yes I'll do my typical import re-act from react and then I'm going to make
a class based component.
I know that I need to make a class based component in this case because I have to use state.
At some point to handled the user input where the user actually typing into the search bar.
And that might sound like a big leap of faith but I'll show you very quickly how we're going to handle
user input.
And as you'll see in general it's going to require us to make use of component level States.
So I'm going to say class search bar extends re-act component
and then inside if you're going to define my render function or put in a return keyword.
And for now all do return search bar.
And then of course at the bottom we'll do an export default search bar and then finally I want to show
this inside of the app component song and flip back over to my app J.S. file.
I'm going to import the search bar at the top.
And then rather than showing a div with the app text inside there I'm going to show search bar like
so and then when I save it is going to automatically reformats reformat the GSX inside of here.
Remember all this is done is turn it into a block of GSX surrounded by parentheses like so.
OK so I'm not going to flip back over to my browser one time.
Just make sure that everything is now working.
Yup I see the text search bar.
That's definitely good.
So I'm not going to go back over to the search bar.
We know that we don't want the text search bar inside of here.
If we go and look at that up really quickly all this thing is really showing to us is a text input.
Maybe we will eventually put a label on it and a button next to it.
But right now we know that we really just need a text input and not much else.
So back inside of the search bar I went to replace the text inside there with a little bit of GSX so
I'm going to have the div and because I know this is going to be a multi-line statement I'm going to
wrap the div with a set of parentheses.
And as usual don't forget don't leave that little semi-colon at the end of the div.
It's now inside of here.
I'm going to place a form that's going to contain my text input.
I'll mark the input as being type text like so OK so I'm going to save this now and I'm going to make
sure that we now get a text and put to appear on the screen.
Yep sure do.
I remember I run my browser really zoomed in just so you can see what's happening on my screen very
easily.
So chances are you see something a little bit more like that right there.
You should at least see the very faint outline of a text input.
All right.
This looks good.
Now the text input by itself definitely is kind of ugly.
Before we dive into handling all this event stuff I want to very quickly do just a touch of styling
on this thing to make sure that it looks a little bit better than it does right now.
So in the next section we're going to hook up semantic UI we'll add in a couple of class names just
to make sure that our search bar looks pretty reasonable and then we'll start to worry about adding
in some event recognition and handling user input in all that kind of good stuff.
So a quick pause and a little bit of styling in the next video.