1
00:00:00,120 --> 00:00:06,540
OK, so next, what we'll do is we'll style some of the components, like the about component is not

2
00:00:06,540 --> 00:00:12,550
styled right now too, and there is no such like long text also in that.

3
00:00:12,600 --> 00:00:14,130
So we'll style that first.

4
00:00:14,850 --> 00:00:16,260
And for that, we'll.

5
00:00:17,670 --> 00:00:26,010
Create a section inside the about, so like we don't need a there, we need a section and inside this

6
00:00:26,940 --> 00:00:29,550
return will create a section for.

7
00:00:31,430 --> 00:00:31,970
S..

8
00:00:32,880 --> 00:00:38,220
And it should provide us a tag, but it's not sort of, you know, problem.

9
00:00:39,470 --> 00:00:40,310
S..

10
00:00:44,760 --> 00:00:55,260
And and we have got the section and inside this, there will be an H1 tag and Inside Edition will write

11
00:00:55,500 --> 00:00:56,460
about us.

12
00:00:58,700 --> 00:01:07,280
About us and after the about us, I think we'll have a paragraph or the beat egg inside, this will

13
00:01:07,280 --> 00:01:15,170
paste to some dummy data, actually, and that will be containing some like any any text.

14
00:01:15,530 --> 00:01:20,120
So let me just copy it from the Lord and Ipsum website and let me just be to studio.

15
00:01:21,790 --> 00:01:30,250
So as you can see, I've done, militants are inside the bag and this is like a tax just to fill a space

16
00:01:30,640 --> 00:01:31,720
and nothing else.

17
00:01:33,010 --> 00:01:37,750
So let me just to save it and see if the server is up and running.

18
00:01:38,120 --> 00:01:39,550
You are up and running.

19
00:01:39,910 --> 00:01:43,120
And when I go to the browser and I refresh.

20
00:01:44,170 --> 00:01:46,240
Actually, I don't need to refresh, but I just did.

21
00:01:46,540 --> 00:01:52,780
And when I go to the about and you can see all the I like, whatever the text have written is showing

22
00:01:52,780 --> 00:01:55,720
up here and that is heading, which sees about us.

23
00:01:55,730 --> 00:01:57,180
And that is the text.

24
00:01:58,270 --> 00:02:02,350
It seems like whatever the facts which we have written, OK?

25
00:02:02,620 --> 00:02:05,590
But as of now, it's not looking properly.

26
00:02:05,770 --> 00:02:07,120
There's no styling at all.

27
00:02:07,330 --> 00:02:13,510
Let us provide some styling to this and go to the escort.

28
00:02:14,560 --> 00:02:20,090
And it will provide some styling, which basically will provide some classes to it.

29
00:02:20,260 --> 00:02:25,480
First of all, in the section, we'll provide the last name and the class name would be.

30
00:02:27,960 --> 00:02:29,910
Section of our section.

31
00:02:31,240 --> 00:02:31,720
Action.

32
00:02:32,740 --> 00:02:35,590
And inside that that will be in about section.

33
00:02:38,000 --> 00:02:45,080
About S. Next, we'll have each one, and this one is basically the heading of the entire component.

34
00:02:45,710 --> 00:02:46,700
So we'll give.

35
00:02:48,250 --> 00:02:50,590
Last name to it and the class name, would it be?

36
00:02:51,100 --> 00:02:52,690
Last name is equal to.

37
00:02:55,790 --> 00:02:56,450
Action.

38
00:02:57,740 --> 00:03:04,040
I told basically, because that was about and this the section title, and that's it.

39
00:03:04,520 --> 00:03:05,150
You save it.

40
00:03:06,410 --> 00:03:10,970
And after the saving, let us go to the browser and see how that looks like.

41
00:03:11,420 --> 00:03:15,140
So you can see that there's more clean and styled right now.

42
00:03:15,560 --> 00:03:21,740
You can see all of the styling that we applied, and this is all due to the glasses because those glasses

43
00:03:21,740 --> 00:03:26,120
are linked somewhere or the other in my see as a smile or.

44
00:03:27,330 --> 00:03:36,400
There it is, what we have done right now or next, what we'll do is we'll create a homepage like below

45
00:03:36,400 --> 00:03:40,320
the below the level bar.

46
00:03:40,330 --> 00:03:45,100
There must be something that something is actually the home page.

47
00:03:45,430 --> 00:03:49,060
So now we'll just go ahead and create a home.

48
00:03:49,750 --> 00:03:56,290
The home page will be created inside the pages, inside the pages and create another file that will

49
00:03:56,290 --> 00:03:56,930
be home.

50
00:04:00,380 --> 00:04:04,250
Warm, gorgeous, and there that will be.

51
00:04:06,570 --> 00:04:15,270
Or tired, this lymphocytes feel that FC and head will, right, basically that.

52
00:04:17,050 --> 00:04:24,220
This is home from fall night with was just save it.

53
00:04:25,580 --> 00:04:33,620
Let us provide this to our board chairs, and this was there a rabbi for our home.

54
00:04:35,670 --> 00:04:39,030
Who inside this, let me just uncommon uncommon in this.

55
00:04:39,490 --> 00:04:46,470
And here let me hold the foam whenever that will be boom.

56
00:04:48,790 --> 00:04:50,380
Let me imported from here.

57
00:04:52,290 --> 00:04:55,290
Import boom from.

58
00:04:57,870 --> 00:05:00,480
And there will be pages and slash that will be.

59
00:05:01,700 --> 00:05:10,370
And then when I save it, so I should see the home component and let me go to the home and you can see

60
00:05:10,760 --> 00:05:12,610
this is the home company.

61
00:05:13,020 --> 00:05:17,090
Now, when the component is being rendered, we can make any changes to it.

62
00:05:17,090 --> 00:05:19,560
We can add another components we can have.

63
00:05:19,580 --> 00:05:21,320
You can add the buttons to it.

64
00:05:22,280 --> 00:05:23,480
All we can do anything.

65
00:05:24,010 --> 00:05:26,010
Well, that is what we will do now.

66
00:05:26,450 --> 00:05:27,400
And off.

67
00:05:27,620 --> 00:05:30,230
But in the.

68
00:05:32,020 --> 00:05:40,270
Whom there will be some other contenders like the search field and then the list of all of the data

69
00:05:40,270 --> 00:05:43,080
which we've fed fed to the cocktail list or not.

70
00:05:43,490 --> 00:05:45,720
That will be inside the room door in tears.

71
00:05:45,720 --> 00:05:50,140
But as of now, we have not created them, so we'll leave the home as it is.

72
00:05:50,410 --> 00:05:55,030
And next to what we'll do is we'll move on to the context API.

73
00:05:55,450 --> 00:05:55,870
OK.

74
00:05:56,050 --> 00:05:56,980
So for that?

75
00:05:58,290 --> 00:06:05,820
Let us just create the context, and that context will be created inside the file.

76
00:06:06,150 --> 00:06:13,170
That is the context dogs, so that will be not inside any other of the folders that will be inside the

77
00:06:13,500 --> 00:06:14,640
source folder only.

78
00:06:14,640 --> 00:06:15,360
So that will be.

79
00:06:16,490 --> 00:06:20,030
Going back 30 years.

80
00:06:21,570 --> 00:06:28,470
So here, first of all, we'll import things, so we'll import the act.

81
00:06:31,060 --> 00:06:40,870
The act and will also import alert, I suppose, to Australian poetry out from the pack, and now we

82
00:06:40,870 --> 00:06:47,800
can also import some other things here, or we can just give a comma here and inside this curly braces

83
00:06:47,800 --> 00:06:50,800
we'll import like used to it.

84
00:06:51,370 --> 00:06:55,240
And next week and also important, they use context.

85
00:06:57,150 --> 00:07:01,830
So these two things are really, really important, we will also need to use effect.

86
00:07:02,850 --> 00:07:09,300
But yeah, we can import it, no problem with that, but we not need it initially.

87
00:07:09,330 --> 00:07:10,260
So use effect.

88
00:07:11,740 --> 00:07:13,000
The next will.

89
00:07:15,440 --> 00:07:21,880
We'll see to the API, like what is the API, which we are going to work on so that we.

90
00:07:23,600 --> 00:07:31,100
Feel like would be like a store and not constant, which we will name, as you are told.

91
00:07:31,490 --> 00:07:33,410
But before that, let us just.

92
00:07:34,700 --> 00:07:35,900
Create a function.

93
00:07:37,480 --> 00:07:39,890
Who will, first of all, create a function?

94
00:07:39,910 --> 00:07:49,010
Let me provide a semicolon here and here we'll create the function name has gone through why?

95
00:07:49,990 --> 00:08:01,120
And this will be having something as an argument and that will pass it just in a moment or this is an

96
00:08:01,210 --> 00:08:02,380
imperative function.

97
00:08:03,980 --> 00:08:06,390
Inside this, there will be some constants.

98
00:08:06,410 --> 00:08:14,630
For example, we want to say the loading in and loading to true or false whenever we are like requesting

99
00:08:14,630 --> 00:08:20,100
for the data from the API and when it takes a little longer to fetch that data.

100
00:08:20,480 --> 00:08:23,690
So that means that it is taking some time.

101
00:08:23,690 --> 00:08:31,280
And that time we need to show the users that pay data is being loading you like just wait for a second.

102
00:08:31,580 --> 00:08:35,420
So for that, we will use loading and set loading function.

103
00:08:36,690 --> 00:08:42,840
So here we'll create a function, not function, basically a hook are used to talk, but that will be

104
00:08:42,840 --> 00:08:48,150
named as contest and inside this, that will be a variable, that will be the loading.

105
00:08:48,570 --> 00:08:53,600
And that will be a function which will be known as set looping.

106
00:08:55,860 --> 00:09:05,010
And this will be called to use the state and you state and inside this, that will be of value.

107
00:09:05,340 --> 00:09:12,390
Now whatever their value, which I provide here to this particular look inside, this will state function.

108
00:09:12,810 --> 00:09:19,740
So that will be the initial venue, like whenever I load the page or whenever I visit the website for

109
00:09:20,340 --> 00:09:25,500
this particular variable will be containing the value which is present here.

110
00:09:25,830 --> 00:09:30,270
So like loading will be true for the beginning.

111
00:09:30,600 --> 00:09:32,130
Maybe we can just start to.

112
00:09:33,540 --> 00:09:35,400
So that is what we are doing here.

113
00:09:35,850 --> 00:09:40,980
And now let us see what we can do next.

114
00:09:41,490 --> 00:09:51,210
So we will also have a search bar, which will be like in field and inside that when we type something

115
00:09:51,210 --> 00:10:01,830
and pressing that or we don't even pretend that will purchase the like related cocktails from my EPA.

116
00:10:02,040 --> 00:10:04,380
So as of now, we have not touched the EPA.

117
00:10:04,660 --> 00:10:11,970
But next, the next the very next step, which we'll be doing is configuring our API.

118
00:10:11,970 --> 00:10:17,580
And also we will be going to the website, first of all and having a look at the documentation on how

119
00:10:17,580 --> 00:10:22,590
the API works and all for that will be doing in the next review.