1
00:00:00,500 --> 00:00:06,680
OK, so now what I've done is I've got the CCIs in this and next door to the CSIS file and now what

2
00:00:06,680 --> 00:00:12,230
we'll be doing is we'll be writing every line of code in this next or two cases.

3
00:00:12,710 --> 00:00:18,490
Of course, I'll be explaining everything from time to time whenever we come across something that is

4
00:00:18,500 --> 00:00:20,480
legit or with this particular file.

5
00:00:21,470 --> 00:00:24,080
OK, so now we are done with the navar.

6
00:00:24,260 --> 00:00:32,730
Next, we'll move on to our context, a global context or one that we need to create a file inside our

7
00:00:32,730 --> 00:00:34,550
entire sea or the source folder.

8
00:00:35,300 --> 00:00:44,300
The file will be renamed as Context Nautilus to this file will be responsive, responsible for holding

9
00:00:44,300 --> 00:00:47,270
the global context of the entire application, right?

10
00:00:47,660 --> 00:00:54,560
Like from here, the the flow of data and exchange of things, and basically to communicate it will

11
00:00:54,560 --> 00:00:57,830
help to communicate one component to the other.

12
00:00:58,280 --> 00:01:03,110
So that is like basic functionality of a global context.

13
00:01:03,860 --> 00:01:09,000
So we've got these things in order, so we will get the.

14
00:01:10,220 --> 00:01:17,710
The basic boilerplate code with that extension, which I showed you, so that will be a f c.

15
00:01:20,380 --> 00:01:22,960
And OK, so this is the snippet.

16
00:01:24,700 --> 00:01:25,870
The basic chord.

17
00:01:26,890 --> 00:01:30,880
And now what we'll do is we'll import import some of the.

18
00:01:31,900 --> 00:01:38,020
Pings from React, the first thing which will import to the to hook.

19
00:01:39,290 --> 00:01:43,070
You state and second will import the EU's context.

20
00:01:43,520 --> 00:01:43,850
OK.

21
00:01:45,050 --> 00:01:47,390
And next, we'll be.

22
00:01:48,580 --> 00:01:53,710
We'll be working on using producer as well and the use effect hook as well.

23
00:01:54,250 --> 00:01:58,810
But as of now, let me just work with you straight and news context.

24
00:01:59,380 --> 00:02:06,250
Of course, we'll be doing the reducer part and we'll learn how to use the user to do, said Hogan.

25
00:02:06,250 --> 00:02:12,490
How to replace you stayed with the organization, which is the use of their new The Hook.

26
00:02:13,120 --> 00:02:15,970
So now that we've imported all of this?

27
00:02:18,790 --> 00:02:21,490
Let us move further.

28
00:02:22,630 --> 00:02:31,240
And now what we'll do is we'll create a file that will contain all of our dummy data.

29
00:02:31,510 --> 00:02:40,180
So because before getting things from the EPA, what I'm going to do is I'm going to teach you how to

30
00:02:40,230 --> 00:02:43,810
fetch data from like local local data.

31
00:02:44,770 --> 00:02:51,570
So for that, we need a dummy data and that will stored in another file and we'll name it, data Dark

32
00:02:51,570 --> 00:02:52,150
Ages.

33
00:02:52,960 --> 00:02:55,090
So this file will contain.

34
00:02:56,220 --> 00:03:06,120
All the damage done, so, OK, so this is our data and this will be using as of now in our application.

35
00:03:06,980 --> 00:03:10,890
So this contains an I.D. and a title.

36
00:03:11,290 --> 00:03:17,060
This is the title of the product and this is the price and the price of the product.

37
00:03:17,070 --> 00:03:25,500
And it's a pneumatic integer value and an image so that the images are stored in this media and in this

38
00:03:25,500 --> 00:03:27,360
product product folder.

39
00:03:28,260 --> 00:03:29,170
And this is the amount.

40
00:03:29,190 --> 00:03:30,900
So this is also an integer value.

41
00:03:31,040 --> 00:03:36,000
So basically, this title is the only value to the string and added to everything in digital value.

42
00:03:36,000 --> 00:03:37,950
And this image is a file.

43
00:03:38,850 --> 00:03:44,640
OK, so now let us make use of this data in our global context.

44
00:03:45,760 --> 00:03:51,730
So what we'll do is, first of all, we'll import the data, so we'll import.

45
00:03:57,480 --> 00:03:59,790
Maybe cart items because.

46
00:04:03,020 --> 00:04:08,630
You can name it like God items, because there is only one default export, so like we can give any

47
00:04:08,630 --> 00:04:08,900
name.

48
00:04:10,100 --> 00:04:18,500
So we'll be naming it as guard items from eight to.

49
00:04:20,340 --> 00:04:20,820
Cool enough.

50
00:04:21,520 --> 00:04:29,160
OK, next, what we'll do is we'll create a context now, and this will be a global context.

51
00:04:29,790 --> 00:04:32,640
So we'll name it as our context.

52
00:04:34,810 --> 00:04:44,440
Context and how you can also write like the yak dot, create context, or you can just write, create

53
00:04:44,440 --> 00:04:47,950
context, be heard and text.

54
00:04:49,090 --> 00:04:56,740
This will work because maybe we have to like it like we have been imported from the Act.

55
00:04:57,220 --> 00:04:59,740
If you want to write, just create context.

56
00:05:00,190 --> 00:05:08,200
And if it's just one line of code, and if you're just using it for just one time, then you can if

57
00:05:08,200 --> 00:05:08,560
you want to.

58
00:05:08,560 --> 00:05:13,870
Basically, if you want to avoid importing, what are you going to do is you can just try to dot create

59
00:05:13,870 --> 00:05:17,770
content so you you don't need to imported from react.

60
00:05:18,070 --> 00:05:23,320
Yeah, or either of the thing which you think is convenient for you.

61
00:05:23,350 --> 00:05:26,650
You can do that, which is like, easy for you to understand.

62
00:05:27,780 --> 00:05:33,540
OK, next, we have we want to make an app provider, so.

63
00:05:34,550 --> 00:05:36,410
We need the providers of concert.

64
00:05:41,470 --> 00:05:43,540
Pro fired up.

65
00:05:45,300 --> 00:05:46,020
And.

66
00:05:47,500 --> 00:05:52,030
This will be a function basically and will expect a prop.

67
00:05:52,780 --> 00:05:56,380
So the props will be named as children.

68
00:05:57,770 --> 00:06:06,170
And we create a federal function here and inside this federal function, what we do is.

69
00:06:08,610 --> 00:06:09,180
We.

70
00:06:10,460 --> 00:06:16,160
Basically, this is this function like this was given to us from this from that extension, right?

71
00:06:17,450 --> 00:06:22,100
Boilerplate code, but we are naming it as app provider.

72
00:06:23,350 --> 00:06:23,830
Or.

73
00:06:25,850 --> 00:06:32,200
All we can create another function also, so it totally depends on us, like naming is not the problem.

74
00:06:33,110 --> 00:06:39,590
So next inside the app provider, what we'll do is we'll create a state.

75
00:06:41,440 --> 00:06:48,730
OK, so that will be named as God, and the function would be dimness third card.

76
00:06:50,400 --> 00:06:52,020
Next, U.S.

77
00:06:52,160 --> 00:06:52,620
State.

78
00:06:53,740 --> 00:06:57,670
And will provide initial value for this.

79
00:06:58,360 --> 00:07:00,700
OK, so that will be carte items.

80
00:07:02,350 --> 00:07:03,360
But items?

81
00:07:04,300 --> 00:07:04,680
OK.

82
00:07:07,190 --> 00:07:12,830
Next, what we'll do is we'll provide a written statement for this function.

83
00:07:13,860 --> 00:07:15,990
So after the U.S.

84
00:07:16,110 --> 00:07:19,680
After we are done with creating the new state.

85
00:07:20,960 --> 00:07:28,190
Will return, and what will return is the app provide a context for providers.

86
00:07:31,060 --> 00:07:32,110
Fintech start.

87
00:07:33,380 --> 00:07:43,550
Provided there are many different ways you can do this, and now we want to pass a value inside this

88
00:07:43,550 --> 00:07:45,350
particular component.

89
00:07:45,620 --> 00:07:49,010
So the value will be and.

90
00:07:50,210 --> 00:07:50,900
Object.

91
00:07:53,370 --> 00:07:54,270
It can be called.

92
00:07:55,930 --> 00:07:57,340
As of now, just got.

93
00:08:00,780 --> 00:08:01,380
And.

94
00:08:02,600 --> 00:08:11,620
This will close here and this expect are closing back basically for up.

95
00:08:12,710 --> 00:08:13,700
Contacts.

96
00:08:15,610 --> 00:08:16,520
This is closer to.

97
00:08:19,960 --> 00:08:22,300
And that is some air.

98
00:08:25,710 --> 00:08:29,330
And maybe this is you don't need this coal mining.

99
00:08:36,600 --> 00:08:39,420
Inside this provider, will.

100
00:08:40,670 --> 00:08:42,020
Pass prop.

101
00:08:43,040 --> 00:08:47,870
It was the children, not the cart items, the children.

102
00:08:51,010 --> 00:08:51,400
OK.

103
00:08:52,690 --> 00:08:53,110
So.

104
00:08:54,320 --> 00:08:56,420
There is some problem here.

105
00:09:00,170 --> 00:09:07,880
So what we did is that we mistakenly provided the curly braces after that are done, so there should

106
00:09:07,880 --> 00:09:09,290
be the parentheses.

107
00:09:10,520 --> 00:09:18,170
And then it would be a little better to inside this, we want to pass the children, not the cart items,

108
00:09:18,170 --> 00:09:18,830
basically.

109
00:09:19,730 --> 00:09:27,650
So that would be the children which is being passed inside this app provider function right here and

110
00:09:28,190 --> 00:09:28,430
here.

111
00:09:28,430 --> 00:09:30,890
Also, we need to provide the dart provider.

112
00:09:33,950 --> 00:09:36,110
Right now, it's complete.

113
00:09:37,130 --> 00:09:42,250
OK, next, what we want to do is we want to create a global context, OK?

114
00:09:42,920 --> 00:09:46,220
So for that, we need to create another function.

115
00:09:47,030 --> 00:09:47,690
So.

116
00:09:48,810 --> 00:09:53,250
Let me delete this boilerplate code, which we got from that extension.

117
00:09:53,730 --> 00:10:00,030
So we'll now we'll create a function that will be let us export it online only.

118
00:10:00,510 --> 00:10:03,430
So that will be used global context.

119
00:10:03,480 --> 00:10:04,920
So this is the basic convention.

120
00:10:04,920 --> 00:10:12,750
This is how you create a custom things, but you can obviously you can name anything you want.

121
00:10:13,920 --> 00:10:18,480
But this is easy to understand why while debugging this plays an important role.

122
00:10:19,320 --> 00:10:26,010
And when you share your code with someone, these naming conventions play a great role in making that

123
00:10:26,010 --> 00:10:28,410
person or not standing your code or.

124
00:10:30,130 --> 00:10:31,980
To be honest, people say or do you you?

125
00:10:32,170 --> 00:10:39,490
You have to like you can use the handle naming conventions, which are common in the community that

126
00:10:39,520 --> 00:10:47,230
helps it in like sharing your code and the person who is reading your code understands it in a better

127
00:10:47,230 --> 00:10:47,500
way.

128
00:10:48,430 --> 00:10:56,400
OK, now we want to export all all that to function to you, create or to export.

129
00:10:56,410 --> 00:11:04,690
And if there are more than one export and component, we write it inside the curly braces.

130
00:11:04,710 --> 00:11:06,310
Same goes with the importing.

131
00:11:06,310 --> 00:11:13,000
Also, if they're importing something and there are multiple exports that from where we're importing

132
00:11:13,000 --> 00:11:15,550
so that then also you need to do the same.

133
00:11:17,300 --> 00:11:21,960
The that will be the app providers and the.

134
00:11:25,870 --> 00:11:28,510
That said, and did we miss something out?

135
00:11:30,530 --> 00:11:32,600
As of now, nothing.

136
00:11:36,300 --> 00:11:38,160
That's it for the context.

137
00:11:41,510 --> 00:11:43,220
OK, so that's it for the context.

138
00:11:44,150 --> 00:11:47,900
Next, we'll be working on.

139
00:11:49,350 --> 00:11:50,400
Some other things.