1
00:00:00,400 --> 00:00:00,730
Hello.

2
00:00:00,910 --> 00:00:04,060
So now that we have done with the introduction of the project, let's start building it.

3
00:00:04,420 --> 00:00:08,260
But first of all, if you're new to the act, you need to have Node.js installed on your computer.

4
00:00:08,500 --> 00:00:14,260
And if you don't have that, you need to go to this website, which is not just the official website

5
00:00:14,260 --> 00:00:15,490
of the Nordics.

6
00:00:15,850 --> 00:00:21,040
So after coming to this website, you need to download the installer for Node.js, which is this right?

7
00:00:21,250 --> 00:00:26,470
Recommend recommended for most users to download this installer, and after downloading, you need to

8
00:00:26,470 --> 00:00:28,360
install Node.js on your computer.

9
00:00:28,690 --> 00:00:34,720
So once you install Nautilus and will also be automatically installed on your computer and you are going

10
00:00:34,720 --> 00:00:35,080
to go.

11
00:00:35,430 --> 00:00:37,720
But before that, you need to have a coordinator.

12
00:00:37,990 --> 00:00:42,070
So if you already have, you can skip this part and if you don't, you need to.

13
00:00:42,600 --> 00:00:47,380
You need to go to this website, which is displayed on your screen.

14
00:00:47,560 --> 00:00:53,710
So this is the coordinator which I personally use and I will recommend you to use, but it totally depends

15
00:00:53,710 --> 00:00:53,990
on you.

16
00:00:54,010 --> 00:00:56,860
You can use any contractor which you want.

17
00:00:57,430 --> 00:01:02,350
Maybe it can be a some sublime or whim or any other contractor which you have in mind.

18
00:01:02,660 --> 00:01:03,940
There's no restriction to that.

19
00:01:04,270 --> 00:01:07,160
So I personally use this and I'll be using this in this project.

20
00:01:07,160 --> 00:01:10,510
So that's why it will be more convenient for me to convey what I'm trying to say.

21
00:01:11,140 --> 00:01:16,600
So if you're done with installing, we escort and Node.js and PM, then you need to open.

22
00:01:16,600 --> 00:01:17,170
We scored.

23
00:01:17,260 --> 00:01:18,700
So let me just go to the IDE.

24
00:01:21,140 --> 00:01:28,040
OK, so once you open the coordinators or if you if you're opening it for the very first time, it will

25
00:01:28,040 --> 00:01:29,120
look something different.

26
00:01:29,660 --> 00:01:31,700
So after opening, we're going to go.

27
00:01:31,730 --> 00:01:37,340
What you need to do is that you need to go to this tab right over to the Terminal tab and to click on

28
00:01:37,340 --> 00:01:42,380
this new terminal and then the terminal will be open.

29
00:01:42,920 --> 00:01:48,780
So it chances are high that it will look different for you because I'm using WSI.

30
00:01:48,990 --> 00:01:54,740
This is open to terminal, and probably you might be using command prompt.

31
00:01:54,750 --> 00:01:57,790
And for you, that would be a command window, right?

32
00:01:57,860 --> 00:02:01,130
Are not open to terminal, but you don't need to panic.

33
00:02:01,490 --> 00:02:05,720
The commands which we'll be using will be almost like almost same.

34
00:02:06,050 --> 00:02:07,760
And there's no problem with that.

35
00:02:07,970 --> 00:02:13,580
OK, so once you are in the terminal, what you do is that you need to install the React product before

36
00:02:13,640 --> 00:02:18,110
working on a project, before you start working on a project or before billing it, you know, to have

37
00:02:18,130 --> 00:02:22,190
our default project installed bioreactors.

38
00:02:22,520 --> 00:02:28,310
So what you need to do is, first of all, you need to check that npm and Norges are installed or not

39
00:02:28,310 --> 00:02:28,830
in the computer.

40
00:02:28,850 --> 00:02:33,770
For that, you need to tap this command that is npm Ivan Ivan Watson.

41
00:02:33,920 --> 00:02:38,210
So it will show you the version of the software which is installed.

42
00:02:38,360 --> 00:02:44,840
And if it doesn't, that means that a particular package is not installed properly and to go back and

43
00:02:44,840 --> 00:02:47,180
follow over outside and then you do reinstall it.

44
00:02:47,480 --> 00:02:53,960
OK, and you can do the same FutureGen Norwegian also, and it will show you the watch and same thing

45
00:02:53,960 --> 00:02:55,940
happens if it doesn't show you how to install it.

46
00:02:56,030 --> 00:03:00,770
OK, so now that we have installed both of the things, so what you need to do is you need to install

47
00:03:00,770 --> 00:03:06,110
the React project before that in and this command, which is npm space.

48
00:03:07,460 --> 00:03:16,670
Create a fun yet hyphen app and space, and then to provide the name of the application which you are

49
00:03:16,670 --> 00:03:18,110
designing to like, create.

50
00:03:18,470 --> 00:03:25,070
So in my case, we will do my bag because we are creating the bag or the card or we're going to do whatever

51
00:03:25,070 --> 00:03:25,550
you can say.

52
00:03:25,820 --> 00:03:27,140
So this is purely a string.

53
00:03:27,140 --> 00:03:28,660
You can give any name to it.

54
00:03:28,670 --> 00:03:29,750
There's no compulsion.

55
00:03:30,080 --> 00:03:34,460
But remember, you can't provide spaces to the name of the project.

56
00:03:34,850 --> 00:03:38,280
And once you have decided the name, you can just press enter.

57
00:03:38,300 --> 00:03:40,910
I've already installed the product, so that's why I'm not doing it.

58
00:03:41,240 --> 00:03:47,810
So once you have, I've just come on in to just press enter and it will take around five to six minutes

59
00:03:48,020 --> 00:03:48,640
to install it.

60
00:03:48,710 --> 00:03:49,310
Don't panic.

61
00:03:49,640 --> 00:03:51,520
It can even take more than that.

62
00:03:51,530 --> 00:03:54,440
It totally depend on the processing power of your PC.

63
00:03:54,770 --> 00:03:57,780
For me, it usually takes five to six minutes for you.

64
00:03:57,800 --> 00:04:03,230
It can take two minutes, one minute or even 10 minutes so that that is a random thing, OK?

65
00:04:03,530 --> 00:04:09,770
So once you have completed the installation, it will show you a message called Happy hacking one to

66
00:04:09,770 --> 00:04:10,580
see happy hacking.

67
00:04:10,580 --> 00:04:13,400
That means that the project has been successfully installed.

68
00:04:13,790 --> 00:04:20,240
And after that, you need to, and it will create a folder with that particular name which you provided

69
00:04:20,240 --> 00:04:23,630
during that and create React app in that command.

70
00:04:23,900 --> 00:04:28,790
Whatever name you provided for the application, that particular name from that particular name, one

71
00:04:28,970 --> 00:04:30,050
folder will be created.

72
00:04:30,260 --> 00:04:33,440
So in that folder, all of the project files will be pleasant.

73
00:04:33,770 --> 00:04:39,410
So that folder you need to open with the video scored, and once you open that folder with the accord,

74
00:04:39,590 --> 00:04:41,400
it will look something like this.

75
00:04:41,420 --> 00:04:46,160
I'm not saying it will look exactly like this because I will tell you why, but it will look something

76
00:04:46,160 --> 00:04:46,580
like this.

77
00:04:46,940 --> 00:04:49,160
So there will be some extra files on that.

78
00:04:49,250 --> 00:04:55,190
And those are some non-essential files because we will not be needing that and there will be some test

79
00:04:55,190 --> 00:04:55,850
files and all.

80
00:04:56,170 --> 00:05:01,010
So we are not building so like big project and a scalable project that we need to do testing and all

81
00:05:01,280 --> 00:05:04,910
we are doing on basic project to learn things so we don't need those files, actually.

82
00:05:05,270 --> 00:05:08,660
So let me just go to the folder structure of the project.

83
00:05:09,110 --> 00:05:11,270
First of all, we have the node modules folder.

84
00:05:11,270 --> 00:05:13,780
So this folder, you don't even have to touch it.

85
00:05:13,790 --> 00:05:14,690
Don't open it.

86
00:05:14,690 --> 00:05:15,260
Don't touch it.

87
00:05:15,590 --> 00:05:16,490
It's just present.

88
00:05:16,760 --> 00:05:18,670
And next, we have the public folder.

89
00:05:18,680 --> 00:05:25,400
So in that we have the index estimate, that is the only thing which is like, important to rest.

90
00:05:25,400 --> 00:05:26,660
All other things are useless.

91
00:05:26,660 --> 00:05:28,490
You can even deleted but indexed.

92
00:05:28,490 --> 00:05:30,200
Or still, don't you die deleted.

93
00:05:30,560 --> 00:05:34,160
But next, we have the source folder or the SSD for it.

94
00:05:34,280 --> 00:05:35,870
This is the folder we'll be working.

95
00:05:35,870 --> 00:05:40,970
Most of the time, I would say 99 percent of the time we'd be working in this folder only.

96
00:05:41,210 --> 00:05:46,400
So inside this folder, that would be multiple files, but you need to keep all the files which are

97
00:05:46,400 --> 00:05:50,210
being displayed on the screen and which I'm giving you, which I am going to tell you to keep.

98
00:05:51,350 --> 00:05:58,760
So there will be multiple files like a report by the poor web vitals dogs to report test ideas that

99
00:05:58,760 --> 00:06:05,450
all you need to delete and just keep the abductees in next year's index or to assess obnoxiousness and

100
00:06:05,990 --> 00:06:06,830
package files.

101
00:06:07,100 --> 00:06:11,630
Other than that, you need to just don't worry about this folder this I've created manually.

102
00:06:11,630 --> 00:06:16,070
This is the media folder in which all the images and logos will be present to this I have created manually.

103
00:06:16,580 --> 00:06:17,540
Don't worry about this.

104
00:06:17,540 --> 00:06:22,130
You will also, I will also teach you how to create this and how to place images in that.

105
00:06:22,640 --> 00:06:28,130
So ignoring this folder, everything the rest of the things which you see on the screen need to be same.

106
00:06:28,310 --> 00:06:32,750
And once they are same, then you need to go to this file, which is Abdul Geo's file.

107
00:06:33,080 --> 00:06:39,020
But once you navigate to this file, so there will also be some extra code written here, like your

108
00:06:39,020 --> 00:06:42,170
app drawer just may not look seem like, which I have.

109
00:06:42,440 --> 00:06:44,720
So there will be some toggle that you need to clean up.

110
00:06:45,000 --> 00:06:51,140
So after cleaning up that code, you are and you have to make your Dargis look like this.

111
00:06:51,410 --> 00:06:53,930
But once you make your app drawer, just look like this.

112
00:06:54,110 --> 00:06:55,130
Then you are ready to go.

113
00:06:55,400 --> 00:06:57,860
But once you are here now, we can begin.

114
00:06:58,250 --> 00:07:04,850
So now we have successfully installed a real project, and this is not like before in project like from

115
00:07:04,850 --> 00:07:06,140
here you can start building.

116
00:07:06,440 --> 00:07:09,800
This is the basic requirements to a project and this should be present.

117
00:07:09,800 --> 00:07:14,330
And like, if this is not done, you cannot go ahead.

118
00:07:14,450 --> 00:07:14,780
OK.

119
00:07:15,230 --> 00:07:20,180
But once you are here, let's let's just go ahead and test our application if it's working properly

120
00:07:20,180 --> 00:07:22,550
or not before testing the application.

121
00:07:22,610 --> 00:07:24,350
Let me just try something this do.

122
00:07:24,770 --> 00:07:25,290
Maybe.

123
00:07:26,300 --> 00:07:26,900
Hello, world.

124
00:07:27,320 --> 00:07:30,710
And then you can test two application or on a server.

125
00:07:31,010 --> 00:07:37,190
So for that, you type a comment that does npm space that no, first of all, you need to go to that

126
00:07:37,190 --> 00:07:41,030
particular directory where the application is present or the product is present.

127
00:07:41,570 --> 00:07:47,760
For me, it is a project and my about navigate to that particular directory.

128
00:07:47,990 --> 00:07:54,470
And then you need to tag this command, which is npm space dart and then, you know, to just hit enter.

129
00:07:54,860 --> 00:07:58,670
So it will take a couple of seconds to start off a server on a browser.

130
00:07:58,880 --> 00:08:04,490
So what it will do is that it will run a server on a particular port, on a local host and all of the

131
00:08:04,490 --> 00:08:06,610
changes which you make here that don't.

132
00:08:06,760 --> 00:08:14,080
This will be reflected on that particular unit, so it will take a few seconds to load and then it will

133
00:08:14,080 --> 00:08:19,360
provide us a real and probably look, we have some better.

134
00:08:20,420 --> 00:08:26,240
OK, so there were some issues, but after a few seconds, your server will start on a particular port

135
00:08:26,240 --> 00:08:27,380
and it will show you that you are.

136
00:08:27,900 --> 00:08:31,910
How do you concede that is like the subways running on for three thousand?

137
00:08:32,150 --> 00:08:32,910
So what you need to do?

138
00:08:32,930 --> 00:08:36,790
You can just go to the browser and check or whatever you have diarrhea.

139
00:08:36,800 --> 00:08:43,880
And like, for example, if I appear, hello, I already did, but it was working, so I deleted it.

140
00:08:44,240 --> 00:08:49,460
And now what you do is you need to go to the browser and you can just check.

141
00:08:51,140 --> 00:08:53,150
Wait, a second, let me go to the browser.

142
00:08:55,720 --> 00:08:56,260
And.

143
00:08:58,120 --> 00:09:03,970
You can see here, but whatever we rode in this particular day of that particular day in the abductees

144
00:09:04,390 --> 00:09:10,740
that is being rendered here, it means our project is successfully installed and our product is like

145
00:09:10,780 --> 00:09:11,650
working properly.

146
00:09:12,010 --> 00:09:16,390
So this was just to test our application, that is, they just properly installed or not.

147
00:09:16,660 --> 00:09:22,930
Once you once this thing is working now, you can just go ahead and build a project and you can add

148
00:09:22,930 --> 00:09:24,100
more components to it.

149
00:09:24,700 --> 00:09:26,380
So that will do in the next video.