1
00:00:00,600 --> 00:00:04,350
In the last section we started talking about some of the different concerns that we're going to have

2
00:00:04,380 --> 00:00:07,260
as we build our application on the front and side.

3
00:00:07,290 --> 00:00:09,570
So in this section we're going to start setting up react.

4
00:00:09,570 --> 00:00:12,230
We're going to set up re-act router we're going to set up redux.

5
00:00:12,240 --> 00:00:17,130
Now this whole process is going to take just a little bit of time to go through because while I am going

6
00:00:17,130 --> 00:00:22,290
to assume that you might be somewhat familiar with Redux I will assume that you have not set it up from

7
00:00:22,290 --> 00:00:23,320
scratch before.

8
00:00:23,520 --> 00:00:28,230
So as we start to set it up I'm going to talk about a couple of different libraries that we're using

9
00:00:28,260 --> 00:00:33,480
and why we're using each of them and exactly how redux works with react as we go through this.

10
00:00:33,480 --> 00:00:38,400
So again we're going to do a little bit of the basics but in general I'm hoping that you've got a reasonable

11
00:00:38,400 --> 00:00:39,840
idea of what's going on.

12
00:00:40,020 --> 00:00:43,970
So let's get to it inside of my project directory.

13
00:00:44,130 --> 00:00:45,880
I'm going to find my client folder.

14
00:00:46,170 --> 00:00:52,020
I'm going to find my SIRC folder inside of there where we can find a bunch of existing files that were

15
00:00:52,020 --> 00:00:56,210
generated automatically when we made our application with create react up.

16
00:00:56,250 --> 00:01:02,100
Now in this course I don't want to use any boilerplate whatsoever no boilerplate zero or at least no

17
00:01:02,100 --> 00:01:06,060
boilerplate on the Riak side you know of course we still want all the web packs set up and stuff like

18
00:01:06,060 --> 00:01:07,960
that from create re-act out.

19
00:01:08,190 --> 00:01:12,300
But I don't want to use any of these existing files inside the SIRC directory.

20
00:01:12,570 --> 00:01:19,700
So I'm going to delete all of these existing files except for the register service worker J.S. file.

21
00:01:19,710 --> 00:01:24,890
I'm going to keep that one around for now but everything else inside of your get lost is going to delete

22
00:01:24,880 --> 00:01:25,290
all of them

23
00:01:28,530 --> 00:01:30,180
and move to trash.

24
00:01:30,180 --> 00:01:30,920
There we go.

25
00:01:31,310 --> 00:01:31,570
OK.

26
00:01:31,590 --> 00:01:36,720
So now I'm just left with registers service worker inside of the sarcy directory.

27
00:01:37,170 --> 00:01:38,490
So let's get started.

28
00:01:38,490 --> 00:01:42,380
Let's talk about the first file that we're going to making inside of our application.

29
00:01:42,450 --> 00:01:46,070
We're going to have essentially two root files.

30
00:01:46,110 --> 00:01:50,570
Well one real root file but then another one that's very closely related to it.

31
00:01:50,580 --> 00:01:57,570
Right underneath it the very root of our application on the client side is going to be and a file called

32
00:01:57,650 --> 00:01:58,440
index Dot.

33
00:01:58,530 --> 00:02:05,190
Yes this file is going to contain the initial boot up logic for the re-act side and redux side of our

34
00:02:05,190 --> 00:02:06,410
application.

35
00:02:06,870 --> 00:02:13,590
We can think of this indexed file as putting together all of the very initial data layer considerations

36
00:02:13,650 --> 00:02:19,780
of our application which for example case in point is going to be the redux side of things.

37
00:02:19,860 --> 00:02:25,770
So indexed us is really going to be all about redux inside of your I'll basically just say redux.

38
00:02:25,770 --> 00:02:27,960
That's what it's doing for us.

39
00:02:29,330 --> 00:02:37,040
Directly underneath the index file we will make a single component called app jaywalks the update just

40
00:02:37,070 --> 00:02:42,970
file is going to be essentially concerned with the rendering layer or the re-act layer of our application.

41
00:02:43,070 --> 00:02:48,530
Now inside of this APTA jazz file when I'm really essentially talking about is figuring out what set

42
00:02:48,530 --> 00:02:50,180
of components to show on the screen.

43
00:02:50,180 --> 00:02:55,750
And so this is going to be the primary location for setting up all of our re-act router related logic

44
00:02:56,540 --> 00:03:03,470
so we can essentially imagine indexed not just for redux stuff outtalk stuff for redux stuff.

45
00:03:03,470 --> 00:03:09,080
Now the very simple reason for taking this type of approach is that we're going to have a pretty good

46
00:03:09,140 --> 00:03:13,720
amount of configuration around both redux and react rather inside the application.

47
00:03:13,880 --> 00:03:19,850
And if we try to stuff all that logic into a single file it's just going to get really confusing really

48
00:03:19,850 --> 00:03:20,640
quickly.

49
00:03:20,660 --> 00:03:23,780
So that's why we're going to break it out into two separate files.

50
00:03:24,760 --> 00:03:29,740
Now if we kind of take this approach right here and think of it in the context of our overall application

51
00:03:30,160 --> 00:03:32,430
you essentially end up with something like this.

52
00:03:32,440 --> 00:03:38,890
So at the very top we have our index not just file that's going to show an app component and then the

53
00:03:38,890 --> 00:03:43,330
app component is going to show a bunch of other components inside of that.

54
00:03:43,330 --> 00:03:48,120
So the app is going to show things like our head or component that we just spoke about two seconds ago.

55
00:03:48,160 --> 00:03:50,660
Remember that's our header right here.

56
00:03:50,660 --> 00:03:55,630
The header the component will also show the landing screen it'll show the dashboard and survey new or

57
00:03:55,630 --> 00:03:57,790
survey form you know all that kind of stuff.

58
00:03:57,790 --> 00:04:04,500
So again the component is really the root of the essentially react side or routing side of our application.

59
00:04:05,000 --> 00:04:05,320
OK.

60
00:04:05,350 --> 00:04:06,100
So let's get to it.

61
00:04:06,100 --> 00:04:07,460
Let's start doing the setup.

62
00:04:07,480 --> 00:04:11,410
The first thing we're going to do is flip on over to our terminal and we're going to start to install

63
00:04:11,410 --> 00:04:16,990
a couple of different dependencies so I can flip on over to my terminal.

64
00:04:17,260 --> 00:04:20,830
I'm going to kill my server completely at this point.

65
00:04:20,830 --> 00:04:25,060
You might see an error message that says hey we can do something with it next time.

66
00:04:25,150 --> 00:04:25,510
Yes.

67
00:04:25,510 --> 00:04:30,370
That is of course because we just deleted that file inside of our client directory so we can't even

68
00:04:30,370 --> 00:04:35,860
really run our server anymore right now because we don't have that very root file inside of the client

69
00:04:35,860 --> 00:04:37,780
side of our application.

70
00:04:37,810 --> 00:04:41,220
So I've killed my server and now this is extremely important.

71
00:04:41,230 --> 00:04:45,460
And again this is something I'm going to tell you constantly throughout this course.

72
00:04:45,460 --> 00:04:49,960
Remember that we have to package some files at this point.

73
00:04:49,960 --> 00:04:55,180
We have one file for all of our server dependencies and one file for all the client dependencies.

74
00:04:55,360 --> 00:05:01,960
So when we start installing stuff around the client side of our application like re-act router and redux

75
00:05:02,020 --> 00:05:08,290
and all this other stuff we really have to make sure that we are inside of the client directory of our

76
00:05:08,600 --> 00:05:09,500
project.

77
00:05:09,550 --> 00:05:15,550
So I'm going to change into the client directory before I run any NPM install commands.

78
00:05:15,550 --> 00:05:20,800
If I run NPM install while inside of the server directory that's going to install dependencies to the

79
00:05:20,800 --> 00:05:22,450
server side of our project.

80
00:05:22,500 --> 00:05:26,740
And so right now the server side clearly doesn't really care about reactor Reebok's or anything like

81
00:05:26,740 --> 00:05:27,520
that.

82
00:05:27,940 --> 00:05:28,370
OK.

83
00:05:28,380 --> 00:05:33,810
So inside the client We're going to do a new install dash dash save and we're going to pull in a couple

84
00:05:33,850 --> 00:05:35,310
different dependencies.

85
00:05:35,560 --> 00:05:37,270
We're going to get redux.

86
00:05:37,270 --> 00:05:47,080
We're going to get re-act dash redux and we're going to get re-act dash router dash Dom like so get

87
00:05:47,260 --> 00:05:52,270
so that's going to take a minute or two to install all these things while that's running we'll flip

88
00:05:52,300 --> 00:05:58,360
back over to our code editor going to find my SIRC directory where we just deleted everything from I'm

89
00:05:58,360 --> 00:06:02,320
going to make a new file inside there and call it index dot.

90
00:06:02,380 --> 00:06:05,390
J.S. OK.

91
00:06:05,510 --> 00:06:11,630
So this is going to be the primary location for starting up essentially the redux side of things inside

92
00:06:11,630 --> 00:06:13,010
of our application.

93
00:06:13,010 --> 00:06:18,300
Now we are going to also render our root components from inside this file because this is like the start

94
00:06:18,300 --> 00:06:23,720
of location but we're not going to put a lot of like say re-act configuration in here.

95
00:06:23,720 --> 00:06:28,400
We're just going to use this file to render our very root component to the DOM.

96
00:06:28,430 --> 00:06:33,020
So let's start by putting together a little bit of boiler plate right now and then we'll come back and

97
00:06:33,020 --> 00:06:35,770
finish it up in the next section at the top.

98
00:06:35,880 --> 00:06:46,200
We will import re-act from re-act from my laptop really slows down when I start to record and install

99
00:06:46,200 --> 00:06:51,740
modules and like do stuff at the same time so sometimes it slows down a little bit.

100
00:06:51,810 --> 00:06:59,820
Anyways we import reac from re-act import reac dong from reac dash dong and then down here at the bottom

101
00:07:00,810 --> 00:07:04,980
will place our re-act Dom render a call.

102
00:07:04,980 --> 00:07:10,890
Remember Rock dom takes two arguments the first argument is our root component and then the second is

103
00:07:10,890 --> 00:07:13,010
where we are attempting to render that component to.

104
00:07:13,020 --> 00:07:18,330
Inside of our Dom now our root component is going to be the app component.

105
00:07:18,340 --> 00:07:23,670
Remember the app component which has essentially all the routing logic of our application.

106
00:07:23,670 --> 00:07:26,650
So I think that maybe right now this will be a good place to take a break.

107
00:07:26,700 --> 00:07:28,190
We'll come back in the next section.

108
00:07:28,230 --> 00:07:33,450
We'll set up that route component and then we'll make sure that we can kind of get our application running

109
00:07:33,480 --> 00:07:35,400
and still show it inside the browser.

110
00:07:35,760 --> 00:07:37,020
So safe things right here.

111
00:07:37,020 --> 00:07:39,430
We'll take a quick break and come back in the next section.