1
00:00:00,290 --> 00:00:00,710
All right, guys.

2
00:00:00,710 --> 00:00:02,690
So we're going to get started on our project.

3
00:00:02,690 --> 00:00:06,110
And there's a few ways to spin up a React application.

4
00:00:06,110 --> 00:00:12,560
And what we're going to do is just stick to the tried and true Create React app because it's been around

5
00:00:12,560 --> 00:00:14,300
for a long time.

6
00:00:14,300 --> 00:00:17,270
It has a lot of documentation, a lot of support and so on.

7
00:00:17,270 --> 00:00:21,170
But there are other ways to create a new boilerplate.

8
00:00:21,170 --> 00:00:25,910
React application is another one which I've actually been using a lot lately.

9
00:00:25,910 --> 00:00:31,610
I actually just did a crash course on my YouTube channel on V, but it is faster.

10
00:00:31,610 --> 00:00:37,190
It does have some, you know, some advantages, but it hasn't been around as long as Create React app.

11
00:00:37,190 --> 00:00:39,110
So I'm just going to stick with the safe option.

12
00:00:39,110 --> 00:00:44,090
And this is probably what most of you know if you already know react, which I'm guessing you at least

13
00:00:44,090 --> 00:00:45,290
know the basics.

14
00:00:45,500 --> 00:00:51,440
All right, so let's jump into terminal here and just navigate to wherever you want to create this project.

15
00:00:51,440 --> 00:00:53,840
And we're going to create a new folder.

16
00:00:53,840 --> 00:00:59,510
You can either do it through your operating system or you can do make dir mkdir and I'm going to call

17
00:00:59,510 --> 00:01:05,940
this pro shop and I'm just going to add V two because it's version two just so people don't get confused

18
00:01:05,940 --> 00:01:09,180
with the older version because this is a complete revamp.

19
00:01:09,180 --> 00:01:15,390
And then I'm going to CD into Pro Shop V two and I just want to show you the folder structure that we're

20
00:01:15,390 --> 00:01:18,360
going to have so you have an idea moving forward.

21
00:01:18,360 --> 00:01:23,100
So we just created the pro shop folder and in that we're going to have three other folders.

22
00:01:23,100 --> 00:01:24,750
One is going to be front end.

23
00:01:24,780 --> 00:01:27,450
That's where our React application will go.

24
00:01:27,480 --> 00:01:28,680
That's where we're going to start.

25
00:01:28,680 --> 00:01:34,410
So our entire user interface, all of the front end dependencies like Redux, React, Bootstrap and

26
00:01:34,410 --> 00:01:41,190
all that stuff, Axios So it'll have its own node modules folder and its own Package.json Okay.

27
00:01:41,250 --> 00:01:46,650
For the front end, then we have our back end folder, which is going to be all of our server side code,

28
00:01:46,650 --> 00:01:53,790
including our models, anything to do with Mongoose, express, our controllers, our routes, all that

29
00:01:53,790 --> 00:01:55,740
is going to go in the back end folder.

30
00:01:55,740 --> 00:02:02,340
And then we have an uploads folder for image uploads because products are going to be able to have images.

31
00:02:02,580 --> 00:02:03,000
All right.

32
00:02:03,000 --> 00:02:09,509
So in the route, so in the pro shop folder, we'll have a node modules and that will be all of our

33
00:02:09,509 --> 00:02:10,949
server dependencies.

34
00:02:10,949 --> 00:02:13,320
So Express Mongoose, et cetera.

35
00:02:13,350 --> 00:02:19,590
The back end folder will have all of the code that has to do with Express and Mongoose, but node modules

36
00:02:19,590 --> 00:02:26,280
will actually be where those packages live and then Package.json will be our server server side.

37
00:02:26,280 --> 00:02:32,970
Package.json And then we'll have a dot env for environment variables, things like the MongoDB Uri.

38
00:02:33,240 --> 00:02:35,850
When we use Json web tokens, we'll need a secret.

39
00:02:35,850 --> 00:02:37,320
We'll put that in there as well.

40
00:02:37,320 --> 00:02:40,920
This will not get pushed to your main repository.

41
00:02:40,920 --> 00:02:43,950
You actually want to put that in your gitignore file.

42
00:02:44,070 --> 00:02:44,460
Okay.

43
00:02:44,460 --> 00:02:46,410
And then dot git and dot git ignore.

44
00:02:46,410 --> 00:02:48,780
Just have to do with version control.

45
00:02:49,230 --> 00:02:49,650
All right.

46
00:02:49,650 --> 00:02:56,490
So now that you have an idea of the overall structure of the project, let's create our front end folder

47
00:02:56,490 --> 00:02:58,590
because that's what we're going to be working in first.

48
00:02:58,590 --> 00:03:01,530
And we can actually use Create React app.

49
00:03:01,530 --> 00:03:05,020
Actually, we need to do Npx x, let's say Npx x.

50
00:03:05,070 --> 00:03:12,030
Make sure you have NodeJS installed and then create React app and we're going to call this folder front

51
00:03:12,030 --> 00:03:12,750
end.

52
00:03:13,050 --> 00:03:13,230
Okay.

53
00:03:13,320 --> 00:03:17,850
So that'll put all of the react stuff, including the node modules.

54
00:03:17,850 --> 00:03:21,480
All that stuff is going to go in the front end folder.

55
00:03:21,900 --> 00:03:22,260
Okay.

56
00:03:22,260 --> 00:03:27,360
So now that we have React set up in our front end folder, I'm going to open up vs code in the root,

57
00:03:27,390 --> 00:03:33,360
not in front end but in the root or whatever text editor you're using and just make sure you can actually

58
00:03:33,360 --> 00:03:34,980
see the front end folder.

59
00:03:35,280 --> 00:03:39,990
All right, now I'll go ahead and run the server, so I'm going to do that for my VS code terminal.

60
00:03:39,990 --> 00:03:46,200
Now the server, the React dev server obviously is in the front end folder, so let's CD into front

61
00:03:46,200 --> 00:03:49,710
end and then from there I'll run npm start.

62
00:03:51,030 --> 00:03:54,510
And that will open on localhost 3000.

63
00:03:54,660 --> 00:03:58,980
So now what we're going to do is just a little bit of clean up, get rid of some of the boilerplate

64
00:03:58,980 --> 00:03:59,310
here.

65
00:03:59,310 --> 00:04:07,080
So let's delete the logo, file the APT test, the app, CSS, those, those three files I'm just going

66
00:04:07,080 --> 00:04:09,000
to completely wipe away.

67
00:04:09,000 --> 00:04:13,230
It's going to break because in our app, in our app.

68
00:04:13,230 --> 00:04:15,780
JS it's bringing in two things that aren't there.

69
00:04:15,780 --> 00:04:23,160
So what I'm going to do is actually just clear everything out and then run our a FC with my Es7 React

70
00:04:23,160 --> 00:04:28,230
Redux snippets extension, and it's just going to create an Arrow function component.

71
00:04:28,440 --> 00:04:28,740
Okay.

72
00:04:28,740 --> 00:04:31,320
And we want it to be called app for this.

73
00:04:31,320 --> 00:04:39,150
Let's change it to we'll do an H1 and change that to welcome to pro shop.

74
00:04:40,410 --> 00:04:43,890
And if we save that, we should now see our application.

75
00:04:43,890 --> 00:04:50,550
And I'm also going to go into public index.html and just change the title because that's basically the

76
00:04:50,550 --> 00:04:51,650
global title.

77
00:04:51,660 --> 00:04:57,690
So let's say welcome to Pro Shop or whatever you want to put is fine.

78
00:04:59,140 --> 00:05:01,450
Okay, so now that should change the title.

79
00:05:01,600 --> 00:05:09,890
So next thing that I want to do is, is get set up for Git because you should be using Git version control.

80
00:05:09,910 --> 00:05:17,080
So when we create an app with create React app, it creates a git, ignore a git ignore file, which

81
00:05:17,080 --> 00:05:22,480
is where you put things that you don't want to push to the main repo like node modules and your build

82
00:05:22,480 --> 00:05:23,680
folder and so on.

83
00:05:23,680 --> 00:05:28,900
And it also creates a git repository in a git folder which you can't see here.

84
00:05:28,900 --> 00:05:35,530
But if we stop the server and we do an LS dash A so we're listing all of our files, including hidden

85
00:05:35,530 --> 00:05:38,350
ones, you'll see there is a git folder.

86
00:05:38,350 --> 00:05:43,870
So what I want you to do is remove that with dash rf dot git.

87
00:05:44,200 --> 00:05:44,410
Okay.

88
00:05:44,440 --> 00:05:50,830
So that will completely get rid of that git repository and then we're going to take the dot git ignore

89
00:05:50,830 --> 00:05:53,110
and we're going to move that to the root.

90
00:05:53,770 --> 00:05:54,100
Okay.

91
00:05:54,100 --> 00:05:59,110
And the reason I'm doing this is because our git repository is going to be in the root, because we

92
00:05:59,110 --> 00:06:06,760
will also have, you know, a back end folder and uploads folder and some other stuff in the root directory.

93
00:06:06,760 --> 00:06:08,260
So that's our project.

94
00:06:08,260 --> 00:06:11,350
And what I want you to do is in the git ignore.

95
00:06:11,350 --> 00:06:18,070
For one, I just like to remove the slash here on node modules just to make sure that it gets all the

96
00:06:18,070 --> 00:06:22,750
node modules folders, whether it's in the root or in the front end or anywhere else.

97
00:06:22,750 --> 00:06:27,220
And then down here we have different dot env files we can have.

98
00:06:27,250 --> 00:06:30,250
The one we're going to create is going to be just dot env.

99
00:06:30,430 --> 00:06:33,430
So let's add that as well and then save.

100
00:06:33,820 --> 00:06:34,150
Okay.

101
00:06:34,150 --> 00:06:39,490
So now what you should do is initialize a git repository in the root.

102
00:06:39,520 --> 00:06:46,000
Now I'm in the front end in this terminal, so let's open up another terminal and now we're in the root

103
00:06:46,000 --> 00:06:46,840
in this one.

104
00:06:46,840 --> 00:06:52,240
So if we run git init that'll then initialize a git repository.

105
00:06:52,240 --> 00:06:57,590
So if I do ls dash a in the root you'll see we have a dot git folder.

106
00:06:58,260 --> 00:06:58,680
All right.

107
00:06:58,710 --> 00:07:02,610
Now you should use something like GitHub.

108
00:07:02,610 --> 00:07:03,840
It doesn't have to be GitHub.

109
00:07:03,840 --> 00:07:12,900
It can be Bitbucket or GitLab, but GitHub is definitely the most popular, so I already have a repository

110
00:07:12,900 --> 00:07:14,760
with the final code right here.

111
00:07:14,760 --> 00:07:19,680
I do have some touch touch ups to do, but that's basically the course code.

112
00:07:19,680 --> 00:07:26,040
But just for for explaining this, I'm going to create a new repository.

113
00:07:26,160 --> 00:07:26,380
Okay.

114
00:07:26,460 --> 00:07:30,420
So let's go to new repository and I'll just call this pro shop.

115
00:07:30,690 --> 00:07:36,780
We'll just say pro shop dash demo, and I'm just going to make this private.

116
00:07:37,690 --> 00:07:43,480
If you want yours public, which you probably do, then just choose public and then let's create that

117
00:07:43,480 --> 00:07:44,290
repo.

118
00:07:44,810 --> 00:07:50,560
All right, then we want to add this remote repository as our remote repo.

119
00:07:50,560 --> 00:07:53,440
So let's go ahead and copy that line there.

120
00:07:53,650 --> 00:07:54,790
And then.

121
00:07:55,350 --> 00:07:58,980
Let's first, before we paste that in, let's make a commit.

122
00:07:58,980 --> 00:08:01,290
So we'll say git add all.

123
00:08:02,100 --> 00:08:02,430
Okay.

124
00:08:02,430 --> 00:08:09,840
And then we can say git commit, dash m and then a comment will say initial commit.

125
00:08:10,170 --> 00:08:10,580
Okay.

126
00:08:10,590 --> 00:08:13,890
Now what I'm going to do is paste in that git remote.

127
00:08:14,710 --> 00:08:16,570
Okay, that git remote command.

128
00:08:16,870 --> 00:08:21,790
And then you'll see here we can also just we want this to be in the main branch.

129
00:08:21,790 --> 00:08:28,630
So we'll paste that in and then finally we can push to that remote repository.

130
00:08:30,710 --> 00:08:35,090
So if I come back here and reload now I have my git repo.

131
00:08:35,120 --> 00:08:40,010
Now you can just as well use the integrated git within vs code.

132
00:08:40,010 --> 00:08:41,570
So if I make a change.

133
00:08:41,570 --> 00:08:46,760
So for instance, if I change this to a paragraph, you guys don't have to do this.

134
00:08:46,760 --> 00:08:52,190
But if I, if I make that change, you'll see that this icon now has a one because I've made that change

135
00:08:52,190 --> 00:08:54,260
and I can see the change right here.

136
00:08:54,260 --> 00:08:59,510
If I click on it, it'll show me what has been changed from the last time that I made a commit.

137
00:08:59,510 --> 00:09:05,000
So if you do that, let's say you want to push to GitHub, you can either come down here and say Git

138
00:09:05,000 --> 00:09:10,940
add all and git commit or you can simply put a message up here.

139
00:09:10,940 --> 00:09:14,120
So let's say I'll just say test.

140
00:09:14,120 --> 00:09:16,640
I'm not going to keep this repository anyway.

141
00:09:16,640 --> 00:09:21,200
And then if I click commit and then click the refresh.

142
00:09:22,490 --> 00:09:29,780
Now, if we come over here and reload, you can see that I just made this commit called test.

143
00:09:30,420 --> 00:09:36,060
So, I mean, it's easier to use this to use the integrated tool, but I know not everybody is using

144
00:09:36,090 --> 00:09:37,080
vs code.

145
00:09:37,530 --> 00:09:37,830
All right.

146
00:09:37,830 --> 00:09:41,400
I'm just going to put that back to an H one.

147
00:09:41,700 --> 00:09:46,650
And you can see now I have a one here because I've made another change to that file.

148
00:09:46,920 --> 00:09:49,830
So that's all I want to do in this particular video.

149
00:09:49,830 --> 00:09:56,370
Now that we're set up and we're you know, we have our app running in the next video, I want to set

150
00:09:56,370 --> 00:10:00,810
up React Bootstrap, which is what we're going to use for our UI.

151
00:10:01,140 --> 00:10:06,810
Basically, we can have we have bootstrap components available as React components and we're going to

152
00:10:06,810 --> 00:10:08,990
create the header and footer as well.

153
00:10:09,000 --> 00:10:09,330
All right.

154
00:10:09,330 --> 00:10:10,800
So I'll see you in the next video.