1
00:00:00,270 --> 00:00:01,720
Hello, guys, and welcome.

2
00:00:02,130 --> 00:00:06,990
For all that we have done with the introduction, let's get to the main part and let's start courting

3
00:00:06,990 --> 00:00:09,660
our application because this is the most exciting part.

4
00:00:10,380 --> 00:00:14,730
OK, so before getting started, if you are new to react, you can.

5
00:00:15,090 --> 00:00:21,140
You have to download and install NodeJS and beam on your computer so you can just Google how to install

6
00:00:21,150 --> 00:00:22,860
an audition and be on your computer.

7
00:00:22,860 --> 00:00:28,740
And that is a very, very simple and straightforward process, and installation is like it's similar

8
00:00:28,740 --> 00:00:30,990
to installing any of the software in the world.

9
00:00:31,320 --> 00:00:35,160
And next, you will need ID or coordinator.

10
00:00:35,170 --> 00:00:40,320
So I'm using this code for this particular project, so I would recommend you also to use that.

11
00:00:40,320 --> 00:00:42,420
And if you have it, that's very good.

12
00:00:42,420 --> 00:00:44,390
But if you don't, you can just download it.

13
00:00:44,400 --> 00:00:45,600
You can just google it.

14
00:00:45,600 --> 00:00:48,120
How to install and now Lord, we escort.

15
00:00:48,450 --> 00:00:51,030
And after doing all of that, you're good to go.

16
00:00:51,120 --> 00:00:54,900
So once you're done with everything, then you can just come to escort.

17
00:00:54,900 --> 00:01:01,350
And according to do is you need to just go to the Terminal tab here and you have to click on this new

18
00:01:01,350 --> 00:01:06,030
terminal and it will take some time to open.

19
00:01:06,030 --> 00:01:11,040
And I'm using Ubuntu Terminal here because I'm using the Mersal.

20
00:01:11,040 --> 00:01:16,890
You might be seeing command prompt on your screen, but that's totally fine because the commands which

21
00:01:16,890 --> 00:01:21,600
you are going to use are exactly the same, so no need to panic about that.

22
00:01:22,020 --> 00:01:29,820
So once you're here, you need to install the default React project by using the Command Create React

23
00:01:30,300 --> 00:01:30,660
app.

24
00:01:30,960 --> 00:01:32,890
And if you already know this, you are.

25
00:01:32,910 --> 00:01:37,860
If you are all like intermediate levels, you can just skip that part and you can just execute that

26
00:01:37,860 --> 00:01:39,480
command and move forward.

27
00:01:39,870 --> 00:01:50,330
OK, so what is true is that you need to have this command that is npm SPAC's V8 type one react hyphen

28
00:01:50,340 --> 00:01:56,310
app and space under the name of the application, whatever is a string and should not have spaces.

29
00:01:56,700 --> 00:02:03,120
And once you tap the command center and it will take around five to six minutes to install the React

30
00:02:03,120 --> 00:02:05,430
project, maybe it can even take 10 minutes.

31
00:02:05,430 --> 00:02:06,360
So don't panic.

32
00:02:06,600 --> 00:02:09,840
It totally depends on your PC and your internet speed.

33
00:02:10,230 --> 00:02:15,270
So once you're done with that directly, you'll be created by the name of the application, which is

34
00:02:15,270 --> 00:02:19,110
providing this command and one that actually hasn't created.

35
00:02:19,110 --> 00:02:26,280
You can just open that directly through via scored, and once you do that, you will like see something

36
00:02:26,280 --> 00:02:26,730
like this.

37
00:02:26,730 --> 00:02:31,920
Not exactly the same, but things will be similar to what you are seeing on the screen.

38
00:02:32,940 --> 00:02:35,550
OK, so there will be some forward.

39
00:02:35,700 --> 00:02:41,100
There will be some files and folders here, but there will be some extra files and folders which will

40
00:02:41,100 --> 00:02:42,210
be not be needing.

41
00:02:42,210 --> 00:02:47,530
So you need to just clean up that stuff and you need to just left out with these things.

42
00:02:47,550 --> 00:02:50,850
So first of all, there will be normal modules folder you don't need to check.

43
00:02:51,510 --> 00:02:52,500
You don't need to touch it.

44
00:02:52,500 --> 00:02:55,200
Then you'll be having a public folder.

45
00:02:55,440 --> 00:02:59,760
And so this there will be some things, so you don't need to touch it either.

46
00:03:00,060 --> 00:03:02,520
Then you'll be having a source folder inside this.

47
00:03:02,790 --> 00:03:04,890
Just keep whatever you see on the screen.

48
00:03:04,890 --> 00:03:11,820
The app drawer is in next door ideas and obnoxiousness and index or and this package log Dodgson and

49
00:03:11,820 --> 00:03:16,670
the package file here as the report vitals vital to test dogs.

50
00:03:16,680 --> 00:03:21,810
Everything else you need to delete because we are not building the application on the scale that we

51
00:03:21,810 --> 00:03:22,020
need.

52
00:03:22,230 --> 00:03:23,130
Testing for this?

53
00:03:23,400 --> 00:03:29,010
OK, so once you're done with this, then you can just start off coding.

54
00:03:29,370 --> 00:03:36,180
So once you're done with this, you can just go to the Abdel-Aziz and you have to make your app drawer.

55
00:03:36,180 --> 00:03:43,140
Diaz look like mine because there will be some extra lines of code, but we don't need it, actually.

56
00:03:43,440 --> 00:03:47,970
So that is why you have to make sure everybody has to look like this.

57
00:03:48,630 --> 00:03:56,490
And once you have your app drawer just like this, then you need to check if your application is installed

58
00:03:56,490 --> 00:03:57,360
properly or not.

59
00:03:57,720 --> 00:04:03,840
Before that, you need to go to the directory of your application inside this terminal, which is for

60
00:04:03,840 --> 00:04:06,160
me to inside the project and cafe.

61
00:04:06,630 --> 00:04:11,640
Then you need to type npm space start.

62
00:04:11,670 --> 00:04:18,180
So this will start a server on a particular port, on a local host, and you will be able to see all

63
00:04:18,180 --> 00:04:21,480
the changes which you make here on the browser.

64
00:04:22,080 --> 00:04:26,130
So this will take a few seconds for the very first time.

65
00:04:26,130 --> 00:04:31,350
And if you're doing it like often, so then it should not take more than five seconds.

66
00:04:32,790 --> 00:04:39,240
But I guess in order to settle what has been started, you can see here that compiled successfully and

67
00:04:39,240 --> 00:04:43,800
a server is running on the word three thousand so you can just go.

68
00:04:44,190 --> 00:04:49,590
Hulu closed on the fourteen thousand and you can check whatever the changes you make here will be reflected.

69
00:04:49,710 --> 00:04:54,450
For example, if I write something and you text, maybe hello world.

70
00:04:56,340 --> 00:05:00,590
This is the at the station.

71
00:05:01,290 --> 00:05:06,670
And when I say it for the third will restart and this is the best part, you know, whenever you see

72
00:05:06,750 --> 00:05:11,670
the any whenever you make any changes and you save it, the server restarts.

73
00:05:12,090 --> 00:05:14,200
You do need to refresh the page or you need.

74
00:05:14,370 --> 00:05:19,320
You don't need to restart the server to see your flight, to see your changes on the browser.

75
00:05:19,500 --> 00:05:21,010
It automatically does that.

76
00:05:21,030 --> 00:05:21,450
OK.

77
00:05:21,780 --> 00:05:24,990
So let us go to browser and you'll see.

78
00:05:25,170 --> 00:05:25,560
Hello.

79
00:05:25,890 --> 00:05:28,230
This is the application store.

80
00:05:30,970 --> 00:05:33,810
You can see on the screen this is what we Typekit.

81
00:05:34,270 --> 00:05:40,120
So now we can move further and we can just go ahead and start creating an application.

82
00:05:40,600 --> 00:05:44,350
So let us do the basic things.

83
00:05:44,350 --> 00:05:49,660
First of all, let us try to create the structure of the application.

84
00:05:50,080 --> 00:05:50,500
So.

85
00:05:51,980 --> 00:05:57,500
Inside the town, the first thing we will do is we'll create a section inside the main drag.

86
00:05:59,980 --> 00:06:02,050
So there will be a parenthesis.

87
00:06:03,360 --> 00:06:06,950
And the scientist that will be in back.

88
00:06:09,030 --> 00:06:13,020
So inside the main bag, there will be a section, so.

89
00:06:15,800 --> 00:06:17,720
S. And.

90
00:06:19,060 --> 00:06:23,660
And that will be a title inside this, followed by some other.

91
00:06:24,900 --> 00:06:32,400
Buttons and that buttons will be the categories that will do once we create the like the component items

92
00:06:32,400 --> 00:06:39,350
component, the menu component, and then we like that data as of now, we just we just checking out

93
00:06:39,360 --> 00:06:40,050
an application.

94
00:06:40,050 --> 00:06:45,450
So inside of the section, we'll have a date for the title because we want things to be separated out.

95
00:06:45,930 --> 00:06:47,160
So that'll be title.

96
00:06:48,360 --> 00:06:49,350
Not like this.

97
00:06:53,030 --> 00:06:53,580
Vital.

98
00:06:54,530 --> 00:06:57,770
And next, we'll have.

99
00:07:00,580 --> 00:07:06,910
Like, we can give the class name, but we'll do it when we are styling this thing, OK?

100
00:07:07,540 --> 00:07:13,330
So inside this do being a given H2 and is will right?

101
00:07:16,300 --> 00:07:16,780
Menu.

102
00:07:17,170 --> 00:07:17,550
Okay.

103
00:07:18,300 --> 00:07:19,720
So and we'll.

104
00:07:22,300 --> 00:07:27,130
Leave this as it is, and we can give it on the line if you want.

105
00:07:28,570 --> 00:07:34,870
Bought up in the like, when we're styling, we will give a style and the loan because that looks even

106
00:07:34,870 --> 00:07:35,260
better.

107
00:07:36,590 --> 00:07:39,800
So we'll style the line and then we'll provide that.

108
00:07:40,750 --> 00:07:41,240
Okay.

109
00:07:43,400 --> 00:07:47,600
Now, when I say it and I'm going to the browser.

110
00:07:48,870 --> 00:07:52,020
So you can see our menu has been printed out.

111
00:07:52,470 --> 00:08:00,420
Obviously, this does not look what we are expecting it to look, but it will start looking like that

112
00:08:00,600 --> 00:08:04,020
once we get the styling and once we arrange things in order.

113
00:08:04,590 --> 00:08:05,000
OK.

114
00:08:05,790 --> 00:08:06,330
So.

115
00:08:07,390 --> 00:08:09,040
Next, what will do is.

116
00:08:11,120 --> 00:08:13,190
We'll provide some styling to the.

117
00:08:14,270 --> 00:08:20,660
This section four that we need to give the class names for it, so the section will give a class name

118
00:08:20,660 --> 00:08:21,020
of.

119
00:08:22,570 --> 00:08:23,830
Class name.

120
00:08:25,120 --> 00:08:26,860
Of Menu U.S..

121
00:08:28,970 --> 00:08:32,180
Menu section, right?

122
00:08:32,900 --> 00:08:36,980
And for this dinner, we'll give the last name of.

123
00:08:39,070 --> 00:08:40,230
Last name off.

124
00:08:41,430 --> 00:08:41,670
It'll.

125
00:08:43,630 --> 00:08:44,290
And.

126
00:08:46,180 --> 00:08:53,590
Once we are given this title to it next, we have the age to inside this we have are heading.

127
00:08:54,640 --> 00:09:01,750
So let's go ahead and provide some styling to this classes, which are the men's section in the title

128
00:09:01,750 --> 00:09:02,170
section.

129
00:09:02,980 --> 00:09:05,730
For that, I've created this index starts to fail.

130
00:09:06,380 --> 00:09:08,380
So let me close this.

131
00:09:08,950 --> 00:09:15,810
OK, so what you seeing on the screen is the like the color values, which I have written in advance

132
00:09:15,810 --> 00:09:21,580
so that these are the colors which we are going to use in some of the classes, not everywhere, but

133
00:09:21,790 --> 00:09:27,940
some of the classes will be using disco colors and sometimes we'll be even using custom colors that

134
00:09:27,940 --> 00:09:28,660
the hex code and.

135
00:09:29,330 --> 00:09:35,200
But this basically prevents you from writing it scored.

136
00:09:35,200 --> 00:09:43,420
And also you can just directly like this name, and that color would be appear to apply to your class.

137
00:09:43,750 --> 00:09:44,110
OK.

138
00:09:44,590 --> 00:09:46,820
So this is I've written like that.

139
00:09:46,840 --> 00:09:47,630
I'm just copy paste.

140
00:09:47,630 --> 00:09:49,090
Turn on some the weight.

141
00:09:50,050 --> 00:09:50,370
OK.

142
00:09:50,860 --> 00:09:55,120
And from here, we will be writing our actual thesis.

143
00:09:55,660 --> 00:10:01,780
First of all, we will be writing some global courses and then we'll be providing access to the like,

144
00:10:02,980 --> 00:10:05,800
the specific elements and the components.

145
00:10:05,800 --> 00:10:09,100
And the glass name is basically which we have given to the.

146
00:10:11,140 --> 00:10:18,040
The elements and all who that will be doing in the next video will be providing CSIS and we'll be writing

147
00:10:18,040 --> 00:10:19,900
some would call in that or just fine.