1
00:00:00,060 --> 00:00:06,000
No, everyone and welcome, so now we are done with the introduction part, and now what we do is we

2
00:00:06,000 --> 00:00:07,950
need to start recording part.

3
00:00:08,730 --> 00:00:15,040
And for that, if you are new to react, you need to install an audience and beam on your system.

4
00:00:15,060 --> 00:00:17,790
And for that, you don't have it.

5
00:00:18,330 --> 00:00:21,210
You need to install it by going to the website.

6
00:00:21,210 --> 00:00:26,400
And if you have, you can just skip this part and wait till I jump on the next part.

7
00:00:27,150 --> 00:00:32,910
So if you don't have it, you can just come here on this particular you and then you can download the

8
00:00:32,910 --> 00:00:33,660
installer.

9
00:00:34,140 --> 00:00:41,700
Is this one, not the current one, because it may contain some bugs and that some time to be like recommended.

10
00:00:42,300 --> 00:00:45,970
But as of now, you can just download this one and you can just install.

11
00:00:45,970 --> 00:00:51,060
It's a normal installation process like any other installation in the world.

12
00:00:51,330 --> 00:00:54,210
OK, so once you're done next, you need a good editor.

13
00:00:54,210 --> 00:01:00,660
So I personally use VSCO and I would highly recommend you also to use it because of any developer friendly.

14
00:01:01,680 --> 00:01:08,370
But there's no compulsion you can use other predators do like sublime or item or any of those which

15
00:01:08,370 --> 00:01:08,910
you like.

16
00:01:09,000 --> 00:01:13,500
So that's not a problem, but in this project will be using VSCO.

17
00:01:13,560 --> 00:01:14,020
Okay.

18
00:01:14,850 --> 00:01:19,980
So after you are done with the installation, what you need to do is you need to go to the Visual Studio

19
00:01:19,980 --> 00:01:21,660
code like if you install it.

20
00:01:21,660 --> 00:01:27,270
If not, you can just download it, or you can just provide it on Google, like how to download via

21
00:01:27,270 --> 00:01:33,480
scored and just go to its website and you can just download that audio file and then you can just install

22
00:01:33,480 --> 00:01:33,630
it.

23
00:01:34,200 --> 00:01:37,830
So that is also a very straightforward process and nothing special in it.

24
00:01:38,190 --> 00:01:41,040
And once you're done with the installation, you can just open it.

25
00:01:41,580 --> 00:01:48,750
And then what you need to do is once you are in the video, don't worry about this all which is shown

26
00:01:48,750 --> 00:01:51,420
on your screen, that is a different thing.

27
00:01:51,570 --> 00:01:56,580
If you are new, if you are not just installed, then don't worry about this.

28
00:01:57,090 --> 00:02:02,550
So you need to just look at the desktop section and then you need to do what's called this terminal

29
00:02:02,550 --> 00:02:04,380
and then click on the new terminal.

30
00:02:06,140 --> 00:02:12,770
And then that will open up, I'm using the blue as a lubuntu, that's why my thumbnail looks different

31
00:02:12,770 --> 00:02:16,490
and you might be using command prompt, so there's no problem with that.

32
00:02:16,490 --> 00:02:17,960
All the commands would be same.

33
00:02:18,470 --> 00:02:21,020
And the next what you need to do is you need to.

34
00:02:22,650 --> 00:02:27,960
First check of the Norges and BMI installed on a computer or not, so for that unit to take this command

35
00:02:28,530 --> 00:02:35,730
and beam open hyphen version, so that will show you the version and version will be shown, will leave,

36
00:02:35,730 --> 00:02:41,470
it's installed or not, if not to launch the version, and it will show you that the command did not

37
00:02:41,470 --> 00:02:41,800
respond.

38
00:02:42,120 --> 00:02:45,180
OK, so you can see that the watch and that means you have successfully installed.

39
00:02:45,900 --> 00:02:53,760
Same thing we can do for would also load version and it will show a diversion.

40
00:02:53,970 --> 00:02:58,980
OK, so that means we are good to go and we have all of the things installed to let me just clear this.

41
00:02:59,550 --> 00:03:03,830
And now next, what we need to do is we need to create our default React project.

42
00:03:04,170 --> 00:03:05,710
Our default project.

43
00:03:06,580 --> 00:03:06,870
It's.

44
00:03:08,130 --> 00:03:14,880
Starting project or the initial project, which is given to us by the yet and then you can just start

45
00:03:14,880 --> 00:03:19,650
working on it from scratch and you can create your own components and all.

46
00:03:19,920 --> 00:03:26,460
So for that to get that particular thing, you need to to have this come on, that is and b x.

47
00:03:27,770 --> 00:03:29,430
And it.

48
00:03:31,110 --> 00:03:42,570
I fun, yeah, I fun, fun Spears and then the name of the app you're going to create for today will

49
00:03:42,570 --> 00:03:43,860
be creating Google Keep.

50
00:03:43,860 --> 00:03:46,580
So will Typekit Google it.

51
00:03:46,590 --> 00:03:49,620
But remember there should be not any spaces in between.

52
00:03:50,520 --> 00:03:53,300
It's just a spring, but there should be no spaces.

53
00:03:53,310 --> 00:03:53,640
Okay?

54
00:03:54,270 --> 00:03:56,180
You can provide hyphen or underscore this.

55
00:03:56,250 --> 00:03:58,590
That's okay, but there should be no spaces.

56
00:03:59,070 --> 00:04:03,600
Okay, so once you're done with this, uh, type in this command, you need to press, enter and.

57
00:04:05,260 --> 00:04:10,810
It will take you around five to six minutes or maybe even 10 minutes, depending on your processing

58
00:04:10,810 --> 00:04:13,930
power of your PC, so that's not a problem.

59
00:04:14,410 --> 00:04:16,900
You can just type this come on and hit enter.

60
00:04:16,900 --> 00:04:22,780
And after five to 10 minutes when it's installed, it will show you a message of happy hacking.

61
00:04:23,020 --> 00:04:27,340
I'm not doing it because I've already installed it, because it takes a little time that I already done

62
00:04:27,340 --> 00:04:27,850
it before.

63
00:04:28,380 --> 00:04:33,400
So, yeah, it will take you an hour, five to six minutes, and then it will show you a message of

64
00:04:33,400 --> 00:04:36,160
happy hacking and once it shows that message.

65
00:04:36,580 --> 00:04:38,230
But that means that.

66
00:04:40,060 --> 00:04:45,520
That thing that the and the reactor initial product has been installed on a computer, and now you are

67
00:04:45,910 --> 00:04:46,420
good to go.

68
00:04:46,900 --> 00:04:51,970
OK, so once that is done, you need to open that particular folder.

69
00:04:51,970 --> 00:04:56,380
One folder will be created with that you have provided for the app name.

70
00:04:56,800 --> 00:05:03,160
Once that is done, what you need to do is you need to just go to that folder and open that folder using

71
00:05:03,160 --> 00:05:05,760
the school in the village school basically open with this.

72
00:05:06,640 --> 00:05:14,110
So, so once you've done that and you adhere to what you will do is you will check for the folder structure.

73
00:05:14,410 --> 00:05:15,740
It should look like this.

74
00:05:15,740 --> 00:05:17,590
So let me explain in the folder structure.

75
00:05:18,140 --> 00:05:23,830
So these are two folders which will not be working on the only folder which will be working.

76
00:05:23,830 --> 00:05:27,310
99 percent of the time is stored folder there, such as the folder.

77
00:05:27,880 --> 00:05:34,510
So don't take the small modules or the public folder to let them let them be what they are.

78
00:05:34,900 --> 00:05:38,200
And once you come here, so you need to go to ABDEL-ATI.

79
00:05:38,290 --> 00:05:44,830
So this will be a root file and every component will be rendered inside whatever we need to show on

80
00:05:44,830 --> 00:05:45,280
the screen.

81
00:05:45,280 --> 00:05:48,730
So that will come here only and then and it will go to the browser.

82
00:05:49,480 --> 00:05:55,420
So what we'll do is there will be some extra code written here so that you need to clean up.

83
00:05:55,660 --> 00:06:00,670
And also, there will be some Excel files like report that vitals best years and something like that

84
00:06:00,670 --> 00:06:04,780
so that you need to delete and logo and we don't need them, actually.

85
00:06:05,290 --> 00:06:07,940
Project is not that big that will need testing or not.

86
00:06:08,410 --> 00:06:09,990
We're just doing a basic project, OK?

87
00:06:10,420 --> 00:06:11,200
We don't need that.

88
00:06:11,890 --> 00:06:16,660
We are not pushing the app into production to be used by like I on some.

89
00:06:17,380 --> 00:06:19,870
So then we don't need any editing and not.

90
00:06:21,520 --> 00:06:26,950
So once you are done with that clearly cleaning up all the folders, you need to just keep this folder

91
00:06:26,950 --> 00:06:31,330
which are displayed on your screen, not not any of the following, except this OK.

92
00:06:31,840 --> 00:06:38,920
And you can even keep index or TSA or started OK, but not other these files, all of these ones.

93
00:06:39,490 --> 00:06:44,650
And once you are here, what you need to do is you need to open our gorgeous and there will be some

94
00:06:44,920 --> 00:06:49,850
extra food written here, like importing report about vitals and all that.

95
00:06:49,870 --> 00:06:53,830
Also, you need to clean up and your ABC13 should look something like this.

96
00:06:55,070 --> 00:06:58,780
So then you are going to go to inside this.

97
00:06:58,780 --> 00:07:02,470
We will write something and we will check if our app is properly running or not.

98
00:07:02,590 --> 00:07:03,790
Let me just try it here.

99
00:07:05,770 --> 00:07:06,760
And your world.

100
00:07:10,000 --> 00:07:12,070
Save it, and yeah.

101
00:07:12,940 --> 00:07:20,530
Well, this thing automatically, like got in line, so that is because of the extension, which I'm

102
00:07:20,530 --> 00:07:21,820
using, that is a pretty good.

103
00:07:22,270 --> 00:07:25,660
So you can just install the extension and view and scored what it does.

104
00:07:25,660 --> 00:07:32,140
It beautifies your code on C EC whenever I'm writing some code and it's indentation is not correct or

105
00:07:32,440 --> 00:07:33,580
things are not in order.

106
00:07:33,850 --> 00:07:40,460
So whenever I save that file to on as soon as the save the file and the code reflectors itself and it

107
00:07:40,480 --> 00:07:43,600
like automatically arranges itself in order.

108
00:07:43,600 --> 00:07:49,420
So with the help of that particular extension, that is the British, let me show you the extension.

109
00:07:53,080 --> 00:07:53,620
Is.

110
00:07:55,320 --> 00:07:55,620
The.

111
00:07:58,040 --> 00:07:58,310
Yeah.

112
00:07:58,520 --> 00:07:59,030
This one.

113
00:08:00,320 --> 00:08:06,830
This is the extension which you need like you don't actually need, but it's good to have, it's good

114
00:08:06,830 --> 00:08:10,100
to have this, okay, so back.

115
00:08:11,060 --> 00:08:11,970
Back to the bar.

116
00:08:12,650 --> 00:08:12,820
Yeah.

117
00:08:13,550 --> 00:08:20,240
To we would have done this now how we will check like how it's going on in the browser and I'll go there

118
00:08:20,330 --> 00:08:20,780
for that.

119
00:08:20,780 --> 00:08:24,930
We need to go to the terminal and we need to go to the detective.

120
00:08:25,140 --> 00:08:32,000
Our project is located, so I Ikea's that it's inside the project and inside that then we will keep,

121
00:08:32,540 --> 00:08:38,360
then I need to go inside and then I need to have this particular command, which is npm.

122
00:08:40,230 --> 00:08:43,810
Dark, but that is the only commodity you knew to hype.

123
00:08:44,100 --> 00:08:47,090
And once you hit Typekit, that will start.

124
00:08:47,100 --> 00:08:49,890
Officer, what will host at a particular port?

125
00:08:50,190 --> 00:08:52,440
Probably three thousand and.

126
00:08:54,020 --> 00:09:00,320
Once the bank said it would have started and the port is running on, however, it is running on the

127
00:09:00,320 --> 00:09:05,180
port three thousand, then you can just go to the browser and open local doors for two thousand and

128
00:09:05,180 --> 00:09:07,580
then the changes will be reflected on your browser.

129
00:09:07,910 --> 00:09:10,220
So that is where to the server started.

130
00:09:15,570 --> 00:09:18,540
That gives you it usually takes like five to 10 seconds.

131
00:09:18,710 --> 00:09:22,050
But if you're doing it for the very first time, it can take a little longer.

132
00:09:24,240 --> 00:09:29,100
So as you can see, are Sarwari, this Typekit and you can see the message compiled successfully and

133
00:09:29,730 --> 00:09:37,560
that is this you are well, the point about us running is the local host and it's running on 40000 who

134
00:09:37,560 --> 00:09:42,350
let it go to the browser and check this rural problem.

135
00:09:42,360 --> 00:09:47,460
It might have been opened like by default on its own, so we don't need to open it.

136
00:09:47,460 --> 00:09:50,940
But if in case, if it doesn't, so you're going to just direct to this, you are.

137
00:09:52,130 --> 00:09:52,610
OK.

138
00:09:54,520 --> 00:10:00,640
And you can see localhost and whatever the tax which you've written inside there, David, that has

139
00:10:00,640 --> 00:10:04,180
been rendered here for now are.

140
00:10:05,720 --> 00:10:11,270
App is working perfectly, so this is basically and this was to check if our app is working properly

141
00:10:11,270 --> 00:10:17,660
or not, and by doing this, we got a confirmation that whatever we type and whatever we do, that reflects

142
00:10:17,660 --> 00:10:19,520
on the browser on the three thousand.

143
00:10:19,910 --> 00:10:21,910
So that is what we wanted, actually.

144
00:10:22,580 --> 00:10:31,130
And now we can just move forward and get another folders and all the components which will be rendering.

145
00:10:31,370 --> 00:10:38,750
So will be they will be requiring and everybody will very first should be reading and have, but we

146
00:10:38,750 --> 00:10:40,250
can also call it a header.

147
00:10:40,670 --> 00:10:45,860
So the very first thing which will do is will you create the head of or will create a mailbox?

148
00:10:47,170 --> 00:10:51,770
Programming is called never, but you can also call it ahead of.

149
00:10:53,920 --> 00:11:02,140
So that said, Max will do will create never or denied them, will agree, will give some content to

150
00:11:02,140 --> 00:11:05,950
it and will give some styling also to it or it.

151
00:11:07,140 --> 00:11:07,550
Actually.