1
00:00:00,640 --> 00:00:03,590
We've spent the last two videos talking about the app that we're going to build.

2
00:00:03,600 --> 00:00:05,180
So I think that's enough talking for now.

3
00:00:05,190 --> 00:00:06,270
Let's dive into it.

4
00:00:06,270 --> 00:00:08,330
Let's start putting this application together.

5
00:00:08,470 --> 00:00:14,520
So as you recall I started up my server inside of our new pics project directory and I started up my

6
00:00:14,520 --> 00:00:16,750
code editor inside there as well.

7
00:00:16,950 --> 00:00:22,050
And I can very easily open up my browser go to local history thousand and I should see a new re-act

8
00:00:22,050 --> 00:00:24,490
application appear on the screen.

9
00:00:24,490 --> 00:00:28,180
So now inside my code editor I'm going to open up that SIRC directory.

10
00:00:28,260 --> 00:00:31,370
As usual we've got all those default files inside there.

11
00:00:31,440 --> 00:00:32,850
So I going to highlight all those.

12
00:00:32,880 --> 00:00:36,390
And I'm going to delete them entirely.

13
00:00:36,620 --> 00:00:42,710
And then inside my SIRC folder I'm going to make a index dot J as file as usual.

14
00:00:42,710 --> 00:00:47,150
And then at the top we'll put together same boilerplate that we put together inside the index G-S file

15
00:00:47,180 --> 00:00:56,050
all throughout this course say import re-act from re-act import re-act Dom from react Dom and then usually

16
00:00:56,050 --> 00:00:58,800
inside of here we would create an app component.

17
00:00:58,810 --> 00:01:02,340
But this time around we're going to do things a little bit differently.

18
00:01:02,500 --> 00:01:07,180
You see as I mentioned in the last video we're going to end up with a couple of different components

19
00:01:07,210 --> 00:01:08,580
inside this application.

20
00:01:08,860 --> 00:01:14,590
And for these different components we're going to end up having to make one or two different CSSA files

21
00:01:14,680 --> 00:01:15,650
as well.

22
00:01:15,670 --> 00:01:21,090
So in total we're going to end up with a decent number of files inside this as Cercy directory.

23
00:01:21,130 --> 00:01:25,990
So rather than just throwing all these different files directly into the SIRC directory we're going

24
00:01:25,990 --> 00:01:32,500
to try to impose a little bit more structure in this project to that end inside my SLAC folder.

25
00:01:32,500 --> 00:01:37,540
I'm going to make a new folder called components and we're going to end up creating all of the different

26
00:01:37,540 --> 00:01:42,920
components that we create inside of that folder and said instead of just the RC directory.

27
00:01:43,300 --> 00:01:46,750
Now this includes the app component as well.

28
00:01:46,750 --> 00:01:52,360
So rather than defining the app component inside of our index such as file we will make a separate file

29
00:01:52,390 --> 00:01:55,150
inside the components directory called Apter Yes.

30
00:01:55,330 --> 00:01:57,850
And that will create our app component.

31
00:01:57,850 --> 00:02:03,550
This is a very common pattern even though we've been putting our app component directly in the index

32
00:02:03,550 --> 00:02:08,450
touchiest file you're going to see that later on in this course when we start talking about topics like

33
00:02:08,450 --> 00:02:09,790
redux and whatnot.

34
00:02:09,920 --> 00:02:15,950
We're going to end up having a lot of setup code inside of the index such as file besides just the app

35
00:02:15,950 --> 00:02:17,290
that we had before.

36
00:02:17,300 --> 00:02:22,370
So rather than putting a ton of set up code inside of the index such as file and defining a component

37
00:02:22,640 --> 00:02:27,470
we can kind of break things up a little bit a little bit to make it more understandable by putting the

38
00:02:27,470 --> 00:02:31,950
app component into its own separate file in the components directory.

39
00:02:32,000 --> 00:02:37,560
So with all that in mind inside this new components folder I'm going to make a file called outtalk genius.

40
00:02:37,640 --> 00:02:42,530
And then inside there we'll very quickly put together some scaffolding for this component import it

41
00:02:42,530 --> 00:02:45,480
back into index such a s and then show it on the screen.

42
00:02:46,280 --> 00:02:53,690
So inside this file I'll do a import react and react and then I'll make a functional component

43
00:02:56,630 --> 00:03:07,430
that will return a div with text app and I'll do an export default app like so and then back inside

44
00:03:07,430 --> 00:03:08,780
of the X such as file.

45
00:03:08,780 --> 00:03:10,640
I can now import that new component.

46
00:03:10,670 --> 00:03:12,860
So I'll say import app from.

47
00:03:12,860 --> 00:03:17,960
Now remember before with every import statement we did for a file that we wrote we just said dot slash

48
00:03:18,020 --> 00:03:19,160
and then the file name.

49
00:03:19,220 --> 00:03:24,000
But this time around to get to that app file we would say in the current directory.

50
00:03:24,020 --> 00:03:30,280
So still dot slash look in the components folder and then get the output file.

51
00:03:30,290 --> 00:03:37,520
So I would say dot slash component's app like so.

52
00:03:37,520 --> 00:03:41,390
So then after that now that we've got the reference to the app component we can attempt to show it on

53
00:03:41,390 --> 00:03:50,060
the screen with a react Dom render app and then as usual will pass a reference to our div with ID root

54
00:03:50,300 --> 00:03:51,990
that is shown inside that index.

55
00:03:52,050 --> 00:03:56,360
H mail file says the second argument.

56
00:03:56,360 --> 00:04:02,350
I'll say Documentum query selector count root and I get to put that on a second line.

57
00:04:02,600 --> 00:04:04,260
Just so you can see it very easily.

58
00:04:10,770 --> 00:04:11,070
All right.

59
00:04:11,100 --> 00:04:12,040
Now I'm going to save this file.

60
00:04:12,060 --> 00:04:14,290
When I do this line of code it is going to jump.

61
00:04:15,030 --> 00:04:20,580
And now we can flip back over to our application and I should see those little tiny text up here on

62
00:04:20,580 --> 00:04:23,410
the left hand side that says app.

63
00:04:23,510 --> 00:04:23,710
OK.

64
00:04:23,730 --> 00:04:24,610
So it looks good.

65
00:04:24,780 --> 00:04:26,370
Let's take a quick pause right here.

66
00:04:26,370 --> 00:04:29,150
We'll continue the next section with just a little bit more setup.