1
00:00:00,300 --> 00:00:05,460
OK, so hello, everyone, and right now we are in our coordinator, that is the Visual Studio code.

2
00:00:06,060 --> 00:00:11,850
So if you don't have it, you can download it from like being just so on Google, how to download it.

3
00:00:12,330 --> 00:00:16,740
And you can also use any other coordinator of your choice.

4
00:00:16,770 --> 00:00:22,920
There is no comparison, but for this project, whatever you are going to use, we have scored OK and

5
00:00:22,920 --> 00:00:26,670
also a new to react unit install npm and not just on the computer.

6
00:00:26,940 --> 00:00:28,470
And you can just google it.

7
00:00:28,470 --> 00:00:32,280
How to do that, and that is a really simple and straightforward process.

8
00:00:33,270 --> 00:00:39,350
So once you're done with setting up everything, you need to come to your code editor and open this

9
00:00:39,510 --> 00:00:41,670
terminal from the new Terminal tab here.

10
00:00:42,210 --> 00:00:53,820
And then it'll just run this command that is npm MP X or the MP X, create hypochondriac iPhone app

11
00:00:53,820 --> 00:00:55,770
and space and then the name of your project.

12
00:00:56,160 --> 00:00:59,780
So this will take around five to six minutes and your application will be created.

13
00:00:59,790 --> 00:01:02,220
I've already done that, so I will not do that again.

14
00:01:03,940 --> 00:01:09,550
And once it is done, then you then directly order off will literally be created by that name.

15
00:01:09,880 --> 00:01:14,980
And you can simply go ahead and open that folder with visual studio code.

16
00:01:14,980 --> 00:01:19,180
And once you do that, then once you do that, things will look similar to this.

17
00:01:19,510 --> 00:01:22,630
And there will be some folders and files here.

18
00:01:22,990 --> 00:01:29,890
So you need to delete the files, which are not useful for us right now at the moment, like the report,

19
00:01:29,890 --> 00:01:36,840
vibrators and all other files, because we are not pulling up a project which we are going to like,

20
00:01:36,880 --> 00:01:40,600
put into production so we don't need testing as of now.

21
00:01:40,840 --> 00:01:45,790
So just delete the files, just give whatever is displayed on your screen like the mail folder will

22
00:01:45,790 --> 00:01:46,180
be.

23
00:01:46,570 --> 00:01:49,050
No, that is form from my previous project.

24
00:01:49,120 --> 00:01:50,050
Or just ignore this.

25
00:01:50,420 --> 00:01:51,760
There will be no more.

26
00:01:52,030 --> 00:01:52,660
Don't touch it.

27
00:01:52,660 --> 00:01:53,910
Then that would be there.

28
00:01:54,340 --> 00:01:54,910
Don't touch it.

29
00:01:54,910 --> 00:01:56,440
Don't deleted public folder.

30
00:01:56,440 --> 00:01:57,490
A.R.T. folder.

31
00:01:58,690 --> 00:02:04,210
And then side by side, if we know there will be some files and you can create folders inside, so 90

32
00:02:04,210 --> 00:02:09,330
percent of the time or already when I say 99 percent of the time, we'll be working on this article

33
00:02:09,370 --> 00:02:11,890
only, which is the source folder.

34
00:02:12,460 --> 00:02:19,950
And that is that is what we'll be containing all important files and folders for.

35
00:02:20,140 --> 00:02:25,480
And once you've done with cleaning up and everything, you can just come to the site see and you can

36
00:02:25,480 --> 00:02:28,770
just open this Abdo just file and this is the main file.

37
00:02:28,780 --> 00:02:31,750
Or you can see the root file or the subadult file.

38
00:02:31,750 --> 00:02:34,410
Because the raw file is the index suggests this.

39
00:02:34,420 --> 00:02:39,250
You can do the subgroup file and this will be containing all of our renders like whatever you want to

40
00:02:39,250 --> 00:02:41,260
go like right there on the screen.

41
00:02:41,560 --> 00:02:45,610
So you need to put that in their bodies and that will be rendered on your screen.

42
00:02:46,090 --> 00:02:50,890
So that is it all about this after this, and there will be some more.

43
00:02:50,890 --> 00:02:58,620
Golden cited the need to clean it up a little bit and then to make it look like this, remove all extra

44
00:02:58,630 --> 00:03:01,570
like code and then just make it look like this.

45
00:03:01,870 --> 00:03:04,690
And then things would be easy for us.

46
00:03:05,970 --> 00:03:12,330
So once you're here, that means finally, we have set up the DeFi project and know you're good to go.

47
00:03:12,810 --> 00:03:19,290
So once you're here, you can just go to the terminal and navigate to the directory or the folder that

48
00:03:19,290 --> 00:03:21,990
you have created this project.

49
00:03:22,530 --> 00:03:25,770
Basically, one folder will be created from that name on list.

50
00:03:25,770 --> 00:03:27,510
You don't need to create any of the folder.

51
00:03:28,000 --> 00:03:29,550
You need to go that folder.

52
00:03:29,560 --> 00:03:32,460
For me, it's inside the projects folder and that is a.

53
00:03:35,490 --> 00:03:39,600
Inside the project, I have a cocktail.

54
00:03:41,700 --> 00:03:49,170
And from here, I will have this commodities and beam stock in order to come on will do is that it will

55
00:03:49,980 --> 00:03:56,760
start the server on on a particular port on localhost and then will be able to see it running on the

56
00:03:56,760 --> 00:04:00,390
browser and we'll be able to see the changes, what we make here.

57
00:04:00,870 --> 00:04:09,680
So it does what this does and we don't need to like, restart the server every time we make a change.

58
00:04:09,690 --> 00:04:13,170
Whenever we if we make a change and receive our thing.

59
00:04:13,380 --> 00:04:18,060
So then the server automatically restarts and it automatically fetches the.

60
00:04:20,850 --> 00:04:23,520
During this, let me just save it and.

61
00:04:24,970 --> 00:04:31,090
What is that this will start off the server and the server is running on the spot?

62
00:04:31,540 --> 00:04:37,010
So let me just provide something here inside this Devon their boards and let me check if that change

63
00:04:37,030 --> 00:04:38,560
is being reflected there or not.

64
00:04:38,660 --> 00:04:43,900
So I will fight the law or to law world.

65
00:04:45,160 --> 00:04:46,360
This is.

66
00:04:49,570 --> 00:04:52,810
The application and when I save it.

67
00:04:55,000 --> 00:04:57,210
I'm sorry for my throat because.

68
00:04:58,850 --> 00:05:04,460
I'm having a little cold and cough, so that's why my voice is not my voice, this little messed up,

69
00:05:05,300 --> 00:05:08,000
OK, so I've saved this and let me go to the browser.

70
00:05:12,190 --> 00:05:13,270
This was our project.

71
00:05:13,330 --> 00:05:15,310
Matt, let me start off the this server.

72
00:05:16,320 --> 00:05:22,410
And you can see Helloworld, this is a React application and whatever change made that has been that

73
00:05:22,410 --> 00:05:25,230
has been done successfully rendered on the screen.

74
00:05:25,630 --> 00:05:27,540
So that is what we wanted to do actually.

75
00:05:27,540 --> 00:05:33,480
And our next work we need to do is to install a package that is called the cloud or dome.

76
00:05:33,840 --> 00:05:39,060
So real, crowded on basically helps us in navigating from one place to another, like whenever we could

77
00:05:39,060 --> 00:05:40,110
hear different components.

78
00:05:40,110 --> 00:05:47,940
Like, for example, one component is a home component next about us, and then we have the profile

79
00:05:47,940 --> 00:05:50,190
section menu section like whatever.

80
00:05:50,520 --> 00:05:53,670
So retro rhythm helps us in doing that.

81
00:05:54,120 --> 00:05:55,370
So that is what we want to do.

82
00:05:55,380 --> 00:05:57,780
So like, let's install that.

83
00:05:57,880 --> 00:06:08,650
So I will stop the server and I will install it by and PM install than the Typhon router hyphen.

84
00:06:09,750 --> 00:06:12,110
So this is the command which you will type.

85
00:06:12,120 --> 00:06:14,790
So I have already installed it, so I will not do it again.

86
00:06:15,180 --> 00:06:17,910
So what for you are just typewritten assured.

87
00:06:18,270 --> 00:06:19,740
So that is what we will do.

88
00:06:20,730 --> 00:06:24,690
And then the vehicle will be installed and all the work will be done.

89
00:06:25,650 --> 00:06:26,010
Okay.

90
00:06:26,010 --> 00:06:29,330
So next to what we'll do is we'll create our.

91
00:06:30,530 --> 00:06:36,320
First of all, Bill Clinton, everybody calls and we go to our application and we see the first thing,

92
00:06:36,320 --> 00:06:43,270
which is that is the mayor of Boston said that there will be a branding name or the title of that episode

93
00:06:43,280 --> 00:06:49,970
next will have a home button and about button, who will create step by step, component by component.

94
00:06:50,450 --> 00:06:54,200
So the first component which you will create is will be the nav bar.

95
00:06:54,710 --> 00:07:00,740
Next, we'll create this about page, because home page is this only bill that will look at the last.

96
00:07:01,340 --> 00:07:05,870
Well, first of all, will create this branding and all inside the nerve bar, then about page and then

97
00:07:06,230 --> 00:07:07,670
the rest of the world will be done.

98
00:07:08,090 --> 00:07:08,660
So.

99
00:07:09,790 --> 00:07:13,750
Let's go out to our I.D. and let's start working.

100
00:07:14,410 --> 00:07:22,240
And so now what will become again, what will be created inside the folder and we need to create a folder

101
00:07:22,780 --> 00:07:31,660
so the folder name would be components and not files, audio files, but once folders.

102
00:07:31,660 --> 00:07:37,000
So that would be comfortable and components and.

103
00:07:38,420 --> 00:07:44,810
Inside the component, what we do is we'll create a file with that file would be.

104
00:07:47,270 --> 00:07:48,680
No bar Dodgers.

105
00:07:49,060 --> 00:07:50,570
So I'm.

106
00:07:52,230 --> 00:07:52,730
Saudi.

107
00:07:55,020 --> 00:07:57,860
This and create this now wide audience.

108
00:07:59,510 --> 00:08:07,040
And thought to see us and hear what will do will create we'll import our boilerplate code, what is

109
00:08:07,040 --> 00:08:08,090
a boilerplate code?

110
00:08:08,450 --> 00:08:15,750
The boilerplate code is basically some like the start of the code, and that is similar to fall off

111
00:08:15,780 --> 00:08:17,260
for all of the components.

112
00:08:17,260 --> 00:08:22,760
So that will grab one that will get out from four that we need an extension, actually.

113
00:08:23,690 --> 00:08:28,850
And let me tell you what is the extension technique, what extensions are and let me show you.

114
00:08:29,310 --> 00:08:34,610
So this is the extension which we need S70 actually, your next graphic will be native snippets.

115
00:08:35,000 --> 00:08:39,110
And this is a really, really useful extension of what it does.

116
00:08:39,200 --> 00:08:48,110
It gives us some boilerplate code snippets, basically for various like components and all.

117
00:08:50,170 --> 00:08:55,900
Too often stall after you have installed that application of what you do is real, you will just restart

118
00:08:55,900 --> 00:08:59,200
your ID and you just type this on FCC.

119
00:08:59,480 --> 00:09:05,320
But he said he read, I'm typing dope here at AFC.

120
00:09:06,460 --> 00:09:13,030
And once you tap this, you will get like like this kind of list and then you can just go ahead and

121
00:09:13,630 --> 00:09:17,320
click on that and you will get the boilerplate boilerplate code.

122
00:09:17,650 --> 00:09:19,740
But for me, for some reason, it doesn't work.

123
00:09:19,750 --> 00:09:21,550
Maybe I'm using WSM that way.

124
00:09:21,910 --> 00:09:30,130
But what I do is I put a control shift be and this certain, and then I press privacy and that it gives

125
00:09:30,130 --> 00:09:37,000
me this beautiful snippet, which is the start of it or the beginning goal of the.

126
00:09:38,000 --> 00:09:48,320
Of the component or any component to air, first of all, will do most of all like will create inside

127
00:09:48,320 --> 00:09:54,170
the written will ride the G6 or the G6, G6, the mixture of JavaScript and Steam.

128
00:09:54,170 --> 00:09:58,940
And so here we'll write some of the things which you want to display on the on the browser.

129
00:09:59,360 --> 00:10:08,360
But we'll give nav and the class name off and last name would be stories and nav.

130
00:10:12,160 --> 00:10:13,370
And the last name would be.

131
00:10:15,460 --> 00:10:17,350
And the last name would be NAV Bar.

132
00:10:19,100 --> 00:10:19,560
Have.

133
00:10:21,530 --> 00:10:26,210
And inside the snack bar, there will be some devs.

134
00:10:28,050 --> 00:10:28,920
It's the math.

135
00:10:29,980 --> 00:10:32,380
The everybody will have a different.

136
00:10:34,100 --> 00:10:39,230
We can just directly give a class and the class name would be never send.

137
00:10:41,700 --> 00:10:42,450
The spirit of.

138
00:10:43,310 --> 00:10:49,750
They have center, and then we'll be having link to different different roles.

139
00:10:50,190 --> 00:10:53,540
Right now, we have just one component that we now have.

140
00:10:54,200 --> 00:10:54,550
OK.

141
00:10:55,010 --> 00:10:57,920
So for that, we will need to create another component.

142
00:10:57,920 --> 00:11:00,800
But first of all, let me just import the link.

143
00:11:02,440 --> 00:11:03,130
The import.

144
00:11:05,190 --> 00:11:08,670
Import and link.

145
00:11:10,780 --> 00:11:11,320
From.

146
00:11:12,670 --> 00:11:13,120
Body.

147
00:11:14,360 --> 00:11:15,680
That is oops.

148
00:11:17,030 --> 00:11:17,660
He asked.

149
00:11:18,600 --> 00:11:27,280
Rotor dome and fire have imported it inside the clearances because it does not have a deep water export

150
00:11:27,280 --> 00:11:30,250
or this is the link on the default export for it.

151
00:11:30,760 --> 00:11:34,030
There are multiple exports and the link is one of them.

152
00:11:34,900 --> 00:11:35,650
I have.

153
00:11:37,210 --> 00:11:43,990
I've basically just imported this inside the collaborators, and that is why I'm not important, like

154
00:11:44,170 --> 00:11:46,410
just writing by one world.

155
00:11:46,850 --> 00:11:55,450
OK, so that is what about this link is all about this link will help us redirect to different components

156
00:11:55,450 --> 00:11:59,240
and different pages, so that will do in the next video.

157
00:11:59,260 --> 00:12:00,100
The rest of the code.