1
00:00:00,830 --> 00:00:06,570
In the last section we generated our new application I'm now going to change into that new project directory

2
00:00:06,750 --> 00:00:12,900
of videos and then I'm going to get my code editor inside there and I write.

3
00:00:12,910 --> 00:00:13,330
Here we go.

4
00:00:13,330 --> 00:00:19,150
So we got our newly generated project and I see my RC folder with all of the automatically generated

5
00:00:19,150 --> 00:00:20,520
files inside there.

6
00:00:20,590 --> 00:00:23,670
Now a quick note before we started working on this project at all.

7
00:00:23,740 --> 00:00:28,510
We've essentially already gone through a lot of the topics that you're going to need to know to understand

8
00:00:28,600 --> 00:00:30,360
what we're doing inside the sap.

9
00:00:30,670 --> 00:00:33,600
We went over all that in the last application we put together.

10
00:00:33,850 --> 00:00:38,710
So as we are going through this application we're going to generally move much more quickly than we

11
00:00:38,710 --> 00:00:41,120
did in the past in putting the same together.

12
00:00:41,230 --> 00:00:46,990
If you feel like I'm going to quickly at any point in time you can always go back to the last application

13
00:00:47,170 --> 00:00:52,090
and check out some videos inside there that will give you a lot more fine grained explanation about

14
00:00:52,090 --> 00:00:57,550
what's going on around topics like say state or event handlers or all that good stuff.

15
00:00:57,550 --> 00:01:01,150
Now that's not to say that I'm going to write code as fast as I possibly can.

16
00:01:01,180 --> 00:01:05,530
I just mean to say that we're going to go a little more quickly than we have in the past.

17
00:01:05,530 --> 00:01:05,770
All right.

18
00:01:05,780 --> 00:01:06,720
So let's get to it.

19
00:01:06,910 --> 00:01:13,080
Inside my Cercy folder I'm going to take all of those automatically generated files and delete them

20
00:01:17,370 --> 00:01:24,630
and then inside the SIRC folder I'm going to make a new file called the index file and at the top we'll

21
00:01:24,630 --> 00:01:31,860
do our usual imports inside of a index such as files so I'll get my import re-act from react.

22
00:01:32,010 --> 00:01:35,250
I'll get my re-act dom or react Tom.

23
00:01:35,430 --> 00:01:39,570
And although we have not yet created an app component we will very shortly.

24
00:01:39,690 --> 00:01:43,680
So I'm going to get a inforced statement here for the company as well.

25
00:01:43,890 --> 00:01:48,570
And notice that we're going to take the same convention as we did previously in making a separate folder

26
00:01:48,570 --> 00:01:51,800
inside of SIRC to hold all of our different components.

27
00:01:52,940 --> 00:02:03,240
And then after that I'll do my reac dom dom render a place my app component and my document queries

28
00:02:03,280 --> 00:02:09,710
selector and I get to look for some elements with an idea of route like so.

29
00:02:09,720 --> 00:02:16,880
All right so now we can flip back to the Cercy directory and make a new folder that we will call components

30
00:02:17,530 --> 00:02:21,840
and inside there we'll make our app that genius file like so

31
00:02:24,770 --> 00:02:26,840
Zao just as we did on the last application.

32
00:02:26,850 --> 00:02:31,440
We're going to make the app a class based component because it's going to hold all of the different

33
00:02:31,440 --> 00:02:37,680
states for our application including the list of videos that we're fetching and maybe something like

34
00:02:37,890 --> 00:02:40,040
you know which video we're currently showing on the screen.

35
00:02:40,050 --> 00:02:42,810
But we'll figure that out over time.

36
00:02:42,810 --> 00:02:50,550
So inside the aperture as file I will import re-act from react and I'll create my app class and I'll

37
00:02:50,550 --> 00:02:58,140
say that extends react Dom component like so then inside there it will define our render method or return

38
00:02:58,170 --> 00:03:07,620
a div with text app and then at the bottom I'll do my expert default app like so.

39
00:03:07,750 --> 00:03:11,710
All right so now I think we've got everything we need to get something on the screen between these two

40
00:03:11,710 --> 00:03:12,510
files.

41
00:03:12,730 --> 00:03:15,020
So I'll now flip back over to my browser.

42
00:03:15,380 --> 00:03:19,600
I'm going to refresh the page and it looks like I forgot a little step here.

43
00:03:19,610 --> 00:03:25,330
I did not start up the Riak project itself so I got to make sure that in sodomite videos project directory

44
00:03:25,360 --> 00:03:29,450
I run NPM start like so.

45
00:03:29,480 --> 00:03:29,710
All right.

46
00:03:29,720 --> 00:03:30,820
That's much better.

47
00:03:31,030 --> 00:03:34,740
So I get foot back on my browser and then after a second or so.

48
00:03:34,950 --> 00:03:36,620
Oh looks like I got a little typo in there.

49
00:03:36,620 --> 00:03:40,070
I put a semi colon at the end of that line right there.

50
00:03:40,250 --> 00:03:42,720
So I'll fix that up.

51
00:03:42,790 --> 00:03:44,330
And now we're good to go I see.

52
00:03:44,500 --> 00:03:47,320
At the very top left of the screen.

53
00:03:47,340 --> 00:03:47,640
All right.

54
00:03:47,640 --> 00:03:49,230
So let's keep going.

55
00:03:49,230 --> 00:03:53,400
We're going to first start working on the search bar of our application because we had worked on the

56
00:03:53,400 --> 00:03:57,950
search bar previously and I think we got a pretty good idea of how it's put together.

57
00:03:57,990 --> 00:04:03,350
Now this search bar this time around is going to be completely identical to what we did previously.

58
00:04:03,510 --> 00:04:07,920
We might have a differently named proper two or something like that but for the most part it's going

59
00:04:07,920 --> 00:04:10,200
to be a near identical component.

60
00:04:10,290 --> 00:04:13,900
So we could copy paste all of our code over from the last application.

61
00:04:14,010 --> 00:04:19,560
But personally I like to avoid doing copy paste because when you're first learning about react you can

62
00:04:19,560 --> 00:04:24,540
start to develop a little bit of muscle memory by just writing out all the GSX and all that for the

63
00:04:24,540 --> 00:04:26,240
plot to create a new component.

64
00:04:26,430 --> 00:04:31,340
So you can copy paste but we're going to get to the process of writing this out from scratch.

65
00:04:31,740 --> 00:04:31,940
All right.

66
00:04:31,950 --> 00:04:40,710
So inside my component's directory I'm going to make a new file called search bar J.S. and then inside

67
00:04:40,710 --> 00:04:49,410
there we will import re-act from re-act or create a new class called search bar that's going to be extending

68
00:04:49,680 --> 00:04:52,330
re-act component.

69
00:04:52,420 --> 00:04:57,850
Now a little common typo to make here is to accidentally leave the S off of extents and make sure you

70
00:04:57,850 --> 00:04:59,260
get that s on there.

71
00:05:00,210 --> 00:05:00,440
Then.

72
00:05:00,440 --> 00:05:09,990
Inside here will place our render method and I will return a div with simply search bar inside of it

73
00:05:10,470 --> 00:05:16,570
and then at the bottom I will export default search bar.

74
00:05:16,570 --> 00:05:18,870
Now finally I'm going to flip back over to my app component.

75
00:05:18,870 --> 00:05:20,240
So now inside of an app.

76
00:05:20,380 --> 00:05:21,220
Yes.

77
00:05:21,490 --> 00:05:31,220
At the top I will import search bar from search bar and then inside my render method I'm going to refactor

78
00:05:31,220 --> 00:05:33,410
this thing to give myself a little bit of space

79
00:05:36,250 --> 00:05:41,350
and then inside there I'll show my search bar like so now.

80
00:05:41,350 --> 00:05:44,830
Quick reminder don't forget to get the semi-colon off the end of that line.

81
00:05:44,830 --> 00:05:50,780
If you had it previously All right cells save this we will flip back over and I'm going to expect to

82
00:05:50,780 --> 00:05:51,950
see a search bar on screen.

83
00:05:51,950 --> 00:05:52,600
Very good.

84
00:05:52,820 --> 00:05:54,820
All right so that's the easy set up to get through.

85
00:05:54,830 --> 00:05:59,720
So when we come back the next section we're gonna start doing a little bit more setup boilerplate inside

86
00:05:59,720 --> 00:06:04,970
the search bar component and make sure that we show some text input that the user can type into.

87
00:06:04,970 --> 00:06:09,980
We also need to make sure that we pull in the semantic UI CSSA file that we've been using throughout

88
00:06:09,980 --> 00:06:13,300
this course just to make sure that our app looks at least somewhat reasonable.

89
00:06:13,310 --> 00:06:16,190
All right so quick possible start taking care of all that in the next video.