1
00:00:00,330 --> 00:00:06,870
OK, so here we are in the we scored and we got the npm set out, we got the Nordic set up and we also

2
00:00:06,870 --> 00:00:09,210
got the Visual Studio code set up.

3
00:00:09,480 --> 00:00:14,520
And if you don't have that installed, you have to go to this just Google, and you can just type how

4
00:00:14,520 --> 00:00:16,970
to install npm and not just on your computer.

5
00:00:16,980 --> 00:00:21,510
Basically, you need to just go to the Nordeste or our website, and from there you need to download

6
00:00:21,510 --> 00:00:27,530
installer and that installer and download the installer and then install our installer, jet and beam

7
00:00:27,540 --> 00:00:28,170
on your computer.

8
00:00:28,170 --> 00:00:33,390
After that, you know, you need to just download the escort set up and install it on your computer.

9
00:00:33,660 --> 00:00:39,180
The installation process is similar to any software installation process in the world the straightforward,

10
00:00:39,930 --> 00:00:40,980
self-explanatory.

11
00:00:41,220 --> 00:00:48,690
And after that, you need to head towards the Visual Studio code and then what you need to do is just

12
00:00:48,690 --> 00:00:50,310
go to this terminal tab right here.

13
00:00:50,320 --> 00:00:53,280
Don't worry about what you are seeing on the screen right now.

14
00:00:53,550 --> 00:00:55,680
Now you might be seeing a completely different thing.

15
00:00:55,690 --> 00:00:56,730
No worries with that.

16
00:00:57,030 --> 00:01:02,160
So what you need to do is you need to do just go to this term, creditability and click on new terminal

17
00:01:02,970 --> 00:01:04,560
and it will open a terminal.

18
00:01:05,010 --> 00:01:10,650
Now what you need to do is you need to first check if you've got the npm and an order just in order

19
00:01:10,870 --> 00:01:13,170
to, so you need to check the wording.

20
00:01:13,170 --> 00:01:17,160
So there will be a command, which is the new npm and version.

21
00:01:17,520 --> 00:01:20,010
So this will display the version of npm.

22
00:01:20,160 --> 00:01:23,220
And if it's installed, then only it will display other devices to launch.

23
00:01:23,220 --> 00:01:27,390
So that is purely an indication that npm is installed on my computer.

24
00:01:27,630 --> 00:01:33,280
Next, we're going to look at the Node.js so node hyphen if convergent and divergent spelling is wrong.

25
00:01:33,300 --> 00:01:34,470
So let me type it again.

26
00:01:35,160 --> 00:01:40,730
So this is how sorry hyphen hyphen.

27
00:01:41,460 --> 00:01:45,990
And you can see Node is installed on my computer, so that's all we were looking for.

28
00:01:46,030 --> 00:01:50,880
Now, don't worry if your terminal looks different than me because I'm using WCL and this is an open

29
00:01:50,910 --> 00:01:56,850
terminal, probably chances are high that you might be using command prompt because that comes in.

30
00:01:56,850 --> 00:02:00,120
Maybe the if you're using this code on Windows.

31
00:02:00,120 --> 00:02:01,860
So that will command prompt, obviously.

32
00:02:02,070 --> 00:02:06,550
But I've installed WCL and this is open to terminal, so no worries with that.

33
00:02:06,570 --> 00:02:09,090
Don't panic, the commands will be exactly the same.

34
00:02:09,090 --> 00:02:10,830
There's no difference at all.

35
00:02:11,700 --> 00:02:15,990
OK, so moving on next, let us install our React project.

36
00:02:16,560 --> 00:02:17,960
Now what is the React project?

37
00:02:17,970 --> 00:02:23,840
The aqueduct is less like starting God given to us by React, so you need to just install it.

38
00:02:23,850 --> 00:02:27,510
That will be node modules and other stuff which will help us.

39
00:02:27,780 --> 00:02:34,710
Starting off with the project before, like without that, you cannot start off, so you need a scratch

40
00:02:34,980 --> 00:02:42,370
scratching like part, as on the project, is that our one project, so you need that installed?

41
00:02:42,420 --> 00:02:48,300
So for that, you need to tag this one simple command that is the end X create.

42
00:02:49,270 --> 00:02:52,780
I fun the hyphen app and space.

43
00:02:53,020 --> 00:02:57,700
And then the name of the application, which you want to give, so in this case will give Pomodoro.

44
00:02:57,940 --> 00:03:03,700
But you want to give another name, you are totally free to give any other name you want.

45
00:03:03,880 --> 00:03:06,120
But remember, there should not be any space in the name.

46
00:03:06,130 --> 00:03:08,930
It's purely a string, but there's no spaces.

47
00:03:08,950 --> 00:03:09,310
OK.

48
00:03:11,110 --> 00:03:14,290
So that is what to let us give our names.

49
00:03:14,290 --> 00:03:15,730
So that is the more.

50
00:03:17,090 --> 00:03:23,030
Doro so this is the name of the application now, what it will do, it'll create a directory with this

51
00:03:23,030 --> 00:03:23,450
name.

52
00:03:23,720 --> 00:03:28,280
And inside the directory, our project will decide and the project's name will also be same.

53
00:03:28,520 --> 00:03:34,430
So after typing this out, you need to just press, enter and then you need to wait for another five

54
00:03:34,430 --> 00:03:39,890
to six minutes, or maybe two minutes or even 10 minutes to completely random thing totally depends

55
00:03:39,890 --> 00:03:43,730
on the processing power of your PC and the internet speed of your connection.

56
00:03:44,090 --> 00:03:46,380
So that is what you need to do.

57
00:03:46,400 --> 00:03:46,970
Don't panic.

58
00:03:46,970 --> 00:03:48,640
It takes a little longer.

59
00:03:48,650 --> 00:03:56,510
It will take a little longer and just assume it will take 10 30 and then you need to just open.

60
00:03:56,510 --> 00:03:58,760
That followed it up with device code.

61
00:03:58,760 --> 00:04:03,350
So I'm not doing the installation because I've already done that because it takes a little time, so

62
00:04:03,350 --> 00:04:04,130
I've already done it.

63
00:04:04,430 --> 00:04:09,890
So after doing the installation, what you need to do is open up that folder using voice code or the

64
00:04:09,890 --> 00:04:10,970
Visual Studio code.

65
00:04:11,330 --> 00:04:17,660
Now, once you open that folder with the Visual Studio code, things will look something like this.

66
00:04:18,590 --> 00:04:23,780
So let me explain in the folder structure, so folder structure is something like this on the left.

67
00:04:24,260 --> 00:04:28,930
Now the very first folder, don't bother looking at data, it's just created by the IS.

68
00:04:29,210 --> 00:04:30,290
We have not created it.

69
00:04:30,650 --> 00:04:32,590
Next, we have the node modules folder.

70
00:04:32,600 --> 00:04:33,500
Don't do that.

71
00:04:33,680 --> 00:04:37,990
This folder, this is nothing to do with our customization.

72
00:04:38,000 --> 00:04:40,340
This is given to us by the Act.

73
00:04:40,340 --> 00:04:41,600
So don't take this folder.

74
00:04:41,600 --> 00:04:42,710
Don't believe this folder.

75
00:04:42,710 --> 00:04:44,870
Don't understand this folder at all.

76
00:04:45,290 --> 00:04:51,920
Next, we have the public folder in which we have other things like any other images we want to display

77
00:04:51,920 --> 00:04:54,590
publicly any other anything.

78
00:04:54,590 --> 00:04:56,060
We want it to be public.

79
00:04:56,270 --> 00:05:02,300
So here basically there is only one file which is useful that is the indexed HTML, and this is the

80
00:05:02,300 --> 00:05:07,940
file which will be responsible for entering your application in the browser.

81
00:05:08,300 --> 00:05:10,820
So this is the title you can give any title you want.

82
00:05:11,180 --> 00:05:18,050
So let me just give you gave give the title of Mondo ROM Beaumont or OK?

83
00:05:19,370 --> 00:05:21,140
So this is the title we gave.

84
00:05:21,140 --> 00:05:25,850
No, this will be the ideal way to be shown in this thread is what all the browser at the top.

85
00:05:26,330 --> 00:05:28,220
So this is what it is useful for.

86
00:05:28,220 --> 00:05:28,820
Nothing else.

87
00:05:28,820 --> 00:05:29,750
You can disclose it.

88
00:05:30,020 --> 00:05:32,050
Next, you can just close this public folder.

89
00:05:32,060 --> 00:05:33,260
You don't need to touch it now.

90
00:05:33,590 --> 00:05:38,360
Now comes the folder of use, which is the source folder or the A60 folder.

91
00:05:38,690 --> 00:05:44,990
Now, 99 percent of the time you'll be working on this folder only will be changing, adding files to

92
00:05:44,990 --> 00:05:46,550
this folder only.

93
00:05:46,560 --> 00:05:50,090
So remember, this is the most useful folder inside of this.

94
00:05:50,090 --> 00:05:51,680
There will be some other files.

95
00:05:52,790 --> 00:05:59,840
And folders like report were vital stats, dogs and some other logos, and so we don't need them.

96
00:06:00,020 --> 00:06:02,120
So just go ahead and delete them.

97
00:06:02,120 --> 00:06:05,240
But remember, don't delete this file excerpt these files.

98
00:06:05,240 --> 00:06:06,980
What I want is that just delete them.

99
00:06:06,980 --> 00:06:08,960
No problem that you need to look.

100
00:06:09,110 --> 00:06:12,080
You need to make your folder structure look like mine.

101
00:06:12,470 --> 00:06:17,400
So after you're done with the cleaning up of the files and folders, what you need to do is you need

102
00:06:17,450 --> 00:06:19,310
to open ABPS dogs.

103
00:06:19,550 --> 00:06:25,360
And once you open the app drawer, just there will be some other extra line of code through which you

104
00:06:25,370 --> 00:06:29,780
don't need any more like important report vitals and below.

105
00:06:29,780 --> 00:06:31,370
Also, exports will be there.

106
00:06:31,580 --> 00:06:36,350
So just clean that up and keep it as simple as it is.

107
00:06:36,750 --> 00:06:43,250
So it should be like this just an import, just an export, and just a return function that only three

108
00:06:43,250 --> 00:06:45,110
things should be there and nothing else should be there.

109
00:06:45,380 --> 00:06:51,470
So go ahead and make your outdoor jazz look like this, and then we'll continue with the next one.

110
00:06:52,360 --> 00:06:56,230
So I hope you have done the cleaning part and all of the code.

111
00:06:56,440 --> 00:07:02,410
So once you're done, let me just tell you about the start of this hour and how to see the changes which

112
00:07:02,410 --> 00:07:04,570
you make inside the ID on the browser.

113
00:07:04,960 --> 00:07:09,550
Before that, you need to spin up the server now how you will spin up the live server.

114
00:07:10,000 --> 00:07:14,320
So in its D.M.C, it says we simply use an extension called live server.

115
00:07:14,320 --> 00:07:16,210
But here this is not the case.

116
00:07:16,600 --> 00:07:19,270
We will spin up the server using a command.

117
00:07:19,300 --> 00:07:24,700
So first of all, just go to the folder or the directory that our project is deciding to navigate to

118
00:07:24,700 --> 00:07:25,320
that folder.

119
00:07:25,330 --> 00:07:32,830
So in my case, that is Project and Pomodoro and then hit and done, and you can see what are the contents

120
00:07:32,830 --> 00:07:34,930
inside by the alias commander, the list command.

121
00:07:35,380 --> 00:07:40,240
You can see the files and folders are exactly the same, which are present here.

122
00:07:40,600 --> 00:07:45,760
So now what you need to do after coming to this particular folder, what you will do is you will just

123
00:07:45,760 --> 00:07:46,300
type this.

124
00:07:46,300 --> 00:07:46,780
Come on.

125
00:07:48,200 --> 00:07:51,380
But does the npm space start?

126
00:07:51,590 --> 00:07:56,870
And after Typekit, what's going on, what you need to do is just hit enter and it will take few seconds

127
00:07:56,870 --> 00:07:58,670
if you're doing it for the very first time.

128
00:07:58,910 --> 00:08:02,540
Otherwise, it really just just take two or three seconds or more than that.

129
00:08:02,810 --> 00:08:10,460
So after that is done, there will be you want to give it to us, which will show us on where.

130
00:08:12,500 --> 00:08:13,970
Of this project is running.

131
00:08:14,120 --> 00:08:16,370
So you can see US Airways to start it off now.

132
00:08:16,520 --> 00:08:18,440
Let me tell you where it will be running.

133
00:08:18,620 --> 00:08:23,330
So our luck product will be running on a particular port and the local host.

134
00:08:23,660 --> 00:08:31,010
Now the board, basically, which is generally given by these yet as a default, is the three port three

135
00:08:31,010 --> 00:08:31,410
thousand.

136
00:08:31,430 --> 00:08:38,920
You can see it is shown to us inside the terminal that a local local holds to 3000 and on the network.

137
00:08:38,930 --> 00:08:44,210
So this is just our local authorities and port number is three thousand.

138
00:08:44,390 --> 00:08:50,150
Now what you can do is you can just copy this whole you out of all, you can just go to your browser

139
00:08:50,150 --> 00:08:52,900
and open up local news on three thousand.

140
00:08:53,120 --> 00:08:56,690
And you will be able to see changes on your screen.

141
00:08:56,690 --> 00:08:58,850
So let me just show you how you can do that.

142
00:08:59,450 --> 00:09:08,150
So let me come here to the browser and it till now, it might have opened up the server, so you can

143
00:09:08,150 --> 00:09:12,980
see that already has been started here and we can see the changes on the screen.

144
00:09:12,980 --> 00:09:16,760
You can see the title has changed to Commodore arbitraging in the next four days HTML.

145
00:09:17,090 --> 00:09:24,590
And currently the page is fully empty VI because we have not added anything to its let me just add something

146
00:09:24,590 --> 00:09:31,780
and show it to you so that we get confirmed that an app is running successfully, so we will write for

147
00:09:31,910 --> 00:09:32,990
more, though it'll.

148
00:09:34,210 --> 00:09:35,860
Application.

149
00:09:37,600 --> 00:09:38,290
By.

150
00:09:41,020 --> 00:09:43,240
The gist, so let me say it.

151
00:09:44,170 --> 00:09:44,830
And.

152
00:09:46,190 --> 00:09:52,490
Now, if I go to the browser, I should see the changes on the browser, so I'm here on the browser

153
00:09:52,490 --> 00:09:53,210
and boom.

154
00:09:53,390 --> 00:09:59,840
As you can see from replication the three ideas it is running successfully on the browser, and that

155
00:10:00,020 --> 00:10:07,400
simply means that our project is working fine and we have successfully installed this and successfully

156
00:10:07,400 --> 00:10:09,710
installed npm and what.

157
00:10:10,280 --> 00:10:14,900
Everything is running and the changes are being reflected on the browser.

158
00:10:15,170 --> 00:10:19,340
So there is a clear indication that that things are going pretty well so far.

159
00:10:19,700 --> 00:10:25,340
Now what we'll do is we'll create a separate, separate components like this will create this glow component

160
00:10:25,340 --> 00:10:30,650
department component and the header component and all of that will be doing in the next coming videos.

161
00:10:31,010 --> 00:10:36,350
So we'll also be installing a package which is used for this.

162
00:10:36,590 --> 00:10:39,980
So don't worry, things will go on smoothly.

163
00:10:39,980 --> 00:10:41,750
We'll learn step by step everything.

164
00:10:42,030 --> 00:10:49,310
So see you in the next video where we will be doing all of this remaining stuff, like installing that

165
00:10:49,670 --> 00:10:56,180
react countdown timer packet and creating the event text API and all of that thing.

166
00:10:56,450 --> 00:10:59,480
All of those things will be done in the next review.