1
00:00:00,940 --> 00:00:06,060
In the section we're going to continue doing a little bit of root level set up on our project inside

2
00:00:06,070 --> 00:00:07,200
my Capones directory.

3
00:00:07,210 --> 00:00:10,820
I'm going to make a new file called the search bar.

4
00:00:11,030 --> 00:00:17,320
Yes file and as you might guess the goal of this thing is going to be to show our search bar which is

5
00:00:17,320 --> 00:00:21,350
going to be essentially just that text input at the very top of our application.

6
00:00:21,370 --> 00:00:26,230
This is going to end up being a somewhat simplistic component at least in terms of the GSX that it's

7
00:00:26,230 --> 00:00:27,240
going to show.

8
00:00:27,640 --> 00:00:34,300
So inside of search party yes I'll do my typical import re-act from react and then I'm going to make

9
00:00:34,300 --> 00:00:36,340
a class based component.

10
00:00:36,610 --> 00:00:40,580
I know that I need to make a class based component in this case because I have to use state.

11
00:00:40,600 --> 00:00:45,680
At some point to handled the user input where the user actually typing into the search bar.

12
00:00:45,940 --> 00:00:50,290
And that might sound like a big leap of faith but I'll show you very quickly how we're going to handle

13
00:00:50,290 --> 00:00:51,110
user input.

14
00:00:51,130 --> 00:00:55,610
And as you'll see in general it's going to require us to make use of component level States.

15
00:00:55,690 --> 00:01:00,930
So I'm going to say class search bar extends re-act component

16
00:01:04,040 --> 00:01:09,450
and then inside if you're going to define my render function or put in a return keyword.

17
00:01:09,860 --> 00:01:14,860
And for now all do return search bar.

18
00:01:15,000 --> 00:01:23,250
And then of course at the bottom we'll do an export default search bar and then finally I want to show

19
00:01:23,250 --> 00:01:30,030
this inside of the app component song and flip back over to my app J.S. file.

20
00:01:30,110 --> 00:01:33,620
I'm going to import the search bar at the top.

21
00:01:39,440 --> 00:01:45,500
And then rather than showing a div with the app text inside there I'm going to show search bar like

22
00:01:45,660 --> 00:01:52,570
so and then when I save it is going to automatically reformats reformat the GSX inside of here.

23
00:01:52,580 --> 00:01:57,550
Remember all this is done is turn it into a block of GSX surrounded by parentheses like so.

24
00:01:58,440 --> 00:02:01,330
OK so I'm not going to flip back over to my browser one time.

25
00:02:01,370 --> 00:02:03,050
Just make sure that everything is now working.

26
00:02:03,050 --> 00:02:04,740
Yup I see the text search bar.

27
00:02:04,800 --> 00:02:06,010
That's definitely good.

28
00:02:06,260 --> 00:02:10,010
So I'm not going to go back over to the search bar.

29
00:02:10,010 --> 00:02:12,940
We know that we don't want the text search bar inside of here.

30
00:02:12,980 --> 00:02:18,260
If we go and look at that up really quickly all this thing is really showing to us is a text input.

31
00:02:18,380 --> 00:02:21,530
Maybe we will eventually put a label on it and a button next to it.

32
00:02:21,620 --> 00:02:27,000
But right now we know that we really just need a text input and not much else.

33
00:02:27,020 --> 00:02:35,710
So back inside of the search bar I went to replace the text inside there with a little bit of GSX so

34
00:02:35,730 --> 00:02:39,470
I'm going to have the div and because I know this is going to be a multi-line statement I'm going to

35
00:02:39,470 --> 00:02:41,930
wrap the div with a set of parentheses.

36
00:02:42,050 --> 00:02:48,680
And as usual don't forget don't leave that little semi-colon at the end of the div.

37
00:02:48,760 --> 00:02:50,260
It's now inside of here.

38
00:02:50,720 --> 00:02:57,030
I'm going to place a form that's going to contain my text input.

39
00:02:57,580 --> 00:03:04,710
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

40
00:03:04,710 --> 00:03:07,540
sure that we now get a text and put to appear on the screen.

41
00:03:07,660 --> 00:03:08,800
Yep sure do.

42
00:03:09,210 --> 00:03:13,170
I remember I run my browser really zoomed in just so you can see what's happening on my screen very

43
00:03:13,170 --> 00:03:13,920
easily.

44
00:03:13,920 --> 00:03:17,280
So chances are you see something a little bit more like that right there.

45
00:03:17,280 --> 00:03:21,640
You should at least see the very faint outline of a text input.

46
00:03:21,650 --> 00:03:21,920
All right.

47
00:03:21,920 --> 00:03:22,930
This looks good.

48
00:03:22,970 --> 00:03:27,050
Now the text input by itself definitely is kind of ugly.

49
00:03:27,080 --> 00:03:32,840
Before we dive into handling all this event stuff I want to very quickly do just a touch of styling

50
00:03:32,870 --> 00:03:36,260
on this thing to make sure that it looks a little bit better than it does right now.

51
00:03:36,260 --> 00:03:41,030
So in the next section we're going to hook up semantic UI we'll add in a couple of class names just

52
00:03:41,030 --> 00:03:45,050
to make sure that our search bar looks pretty reasonable and then we'll start to worry about adding

53
00:03:45,050 --> 00:03:49,850
in some event recognition and handling user input in all that kind of good stuff.

54
00:03:49,850 --> 00:03:52,670
So a quick pause and a little bit of styling in the next video.