1
00:00:00,930 --> 00:00:05,600
In this video we're going to do a quick little bit of setup inside of our newly generated project.

2
00:00:05,600 --> 00:00:09,830
And then after that we'll go ahead and start installing a couple of Penzeys in talking about navigation

3
00:00:09,830 --> 00:00:12,010
inside of re-act applications.

4
00:00:12,070 --> 00:00:17,660
So I'm inside my stream's directory inside if I have the newly generated client project directory and

5
00:00:17,660 --> 00:00:19,430
that's my re-act project right there.

6
00:00:19,730 --> 00:00:24,980
So I'm going to change into that folder and then I'll do the typical NPM start to start my development

7
00:00:24,980 --> 00:00:26,640
server.

8
00:00:26,660 --> 00:00:26,950
All right.

9
00:00:26,960 --> 00:00:29,640
So in just a second or two I should see my application appear.

10
00:00:29,900 --> 00:00:30,810
Well that's loading up.

11
00:00:30,830 --> 00:00:34,770
I'm going to also start my code editor inside the client directory as well.

12
00:00:34,850 --> 00:00:38,080
So I already started my editor up just to save a little bit of time.

13
00:00:38,120 --> 00:00:43,640
You can see I've got my SIRC directory and as usual there's all the pre-generated pre-generated files

14
00:00:43,640 --> 00:00:44,590
inside of it.

15
00:00:44,790 --> 00:00:49,310
So I going take all those files and I'm going to throw them all away and we'll go through the process

16
00:00:49,310 --> 00:00:54,470
of setting up just a tiny bit of boilerplate never not going to go through any of the redux boilerplate.

17
00:00:54,470 --> 00:00:59,120
Right now we're just going to render out a re-act application and then once we get the react out by

18
00:00:59,120 --> 00:01:04,190
itself we'll start focusing on adding in some navigation in understanding how navigation works with

19
00:01:04,280 --> 00:01:07,970
re-act after we get this kind of navigation stuff under wraps.

20
00:01:08,060 --> 00:01:11,110
Then we'll start to come back and out in redux on top of that.

21
00:01:11,390 --> 00:01:17,960
So inside my S.R. directory I'm going to make a new file called index site Jesus at the top I will import

22
00:01:17,990 --> 00:01:29,670
re-act from re-act and I will get reaction from re-act Dom and I'll get my app component from the components

23
00:01:30,000 --> 00:01:35,100
app file and I'll do my usual react on Dot render.

24
00:01:35,320 --> 00:01:41,750
I'm going to show an instance of my app component and I'm going to provide a selector of a document

25
00:01:41,860 --> 00:01:47,720
query selector with pounde root like so.

26
00:01:47,730 --> 00:01:49,440
All right so I'll save this.

27
00:01:49,590 --> 00:01:54,160
Then inside my SLAC directory I'm going to make a new folder called components.

28
00:01:54,300 --> 00:02:00,690
And as you might guess inside there we'll make a new file called outfought J.S. and cited this new file.

29
00:02:00,760 --> 00:02:10,790
I'll put in import react don't react and then I'll make a functional component where I will return a

30
00:02:10,790 --> 00:02:17,660
simple little div with the text app inside of it and then at the bottom I'll do an export default app

31
00:02:17,810 --> 00:02:19,660
like so.

32
00:02:19,700 --> 00:02:23,120
All right so nothing crazy here we've gone through this process many times so far.

33
00:02:23,180 --> 00:02:25,010
I can make sure both files are saved.

34
00:02:25,010 --> 00:02:27,610
I'm going to make sure that my development server started up correctly.

35
00:02:27,620 --> 00:02:32,300
It looks like it did well flip on over to my browser where I should see the text app appear on the screen

36
00:02:32,390 --> 00:02:33,240
right there.

37
00:02:33,380 --> 00:02:35,250
OK guess that's a good place to get started.

38
00:02:35,270 --> 00:02:37,630
I'll take a quick pause when we come back the next section.

39
00:02:37,640 --> 00:02:42,950
We're going to start doing a deep dive into how we're going to handle navigation inside of the application

40
00:02:42,950 --> 00:02:43,580
that we're building.

41
00:02:43,610 --> 00:02:45,640
So quick pause and I'll see you in just a minute.