1
00:00:00,270 --> 00:00:06,300
OK, so now we'll create our context and global context, so.

2
00:00:07,500 --> 00:00:13,230
Most of all will create a folder in the SHC for those who will create a sub folder, which will be named

3
00:00:13,230 --> 00:00:16,560
as context or context.

4
00:00:16,790 --> 00:00:23,980
And inside the context will create a file that will be blue, but.

5
00:00:25,440 --> 00:00:26,650
Dead or.

6
00:00:27,750 --> 00:00:28,890
Global strategy.

7
00:00:30,000 --> 00:00:36,470
So inside this wheel's right in the context like the global provided, I don't know.

8
00:00:37,480 --> 00:00:45,180
So here, first of all, I'll import react and some foreign things, so I'll import react.

9
00:00:45,180 --> 00:00:50,010
And apart from react, I'll import what most of all are import create context.

10
00:00:51,390 --> 00:00:59,370
Here next month, next, we'll import the use reducers, so we'll be using this also, or you will use

11
00:00:59,370 --> 00:01:02,430
your holiday with this user from.

12
00:01:02,850 --> 00:01:05,010
And William Faulkner Sangria.

13
00:01:06,120 --> 00:01:07,020
All right.

14
00:01:07,560 --> 00:01:11,400
So next, first of all, will create our initial state.

15
00:01:11,670 --> 00:01:12,300
So.

16
00:01:15,080 --> 00:01:17,450
In NI, she'll stay.

17
00:01:21,570 --> 00:01:28,650
OK, next, we'll provide a constant and it will name as initial.

18
00:01:33,050 --> 00:01:34,130
Sounds fair enough.

19
00:01:34,970 --> 00:01:36,350
But this will be an.

20
00:01:38,490 --> 00:01:48,210
I'm check so inside this will provide some data, so let me grab some dummy data here, so let me out

21
00:01:48,270 --> 00:01:50,160
from your.

22
00:01:55,260 --> 00:01:56,730
So this will be the dummy data.

23
00:01:58,920 --> 00:02:03,780
But in future, we'll be using dynamic data that will be like.

24
00:02:05,420 --> 00:02:06,350
That will be real.

25
00:02:06,770 --> 00:02:08,190
And that will be changing.

26
00:02:08,210 --> 00:02:13,940
So this is just our dynamic data, so we just make it an a.

27
00:02:15,200 --> 00:02:17,300
That doesn't give me any.

28
00:02:18,440 --> 00:02:20,970
Warnings and insurance did.

29
00:02:22,590 --> 00:02:25,380
This is how it will look like.

30
00:02:26,200 --> 00:02:31,840
OK, so next, we'll create a context, so.

31
00:02:33,270 --> 00:02:37,280
We'll provide a comment here, so that will be created.

32
00:02:38,590 --> 00:02:39,150
The capital.

33
00:02:42,570 --> 00:02:44,310
What happened to my typing?

34
00:02:46,160 --> 00:02:49,000
Context, but inside this will create.

35
00:02:50,700 --> 00:03:00,210
A constant anvil exported as well in the same line, so we'll export and will create a constant constant

36
00:03:00,210 --> 00:03:02,010
will be global.

37
00:03:04,470 --> 00:03:05,400
For context.

38
00:03:05,430 --> 00:03:05,880
All right.

39
00:03:06,640 --> 00:03:09,030
But this will be the first.

40
00:03:10,660 --> 00:03:16,690
Create context and inside this that would be a function, so we'll be passing this initial state, this

41
00:03:16,870 --> 00:03:19,990
dummy data in the fields state cool.

42
00:03:21,030 --> 00:03:27,660
So next, what we'll do is we'll create a provider component like which will provide the data.

43
00:03:28,170 --> 00:03:34,590
So for that, we'll collect me just kinda like the heading provider.

44
00:03:35,750 --> 00:03:37,610
Component.

45
00:03:39,080 --> 00:03:45,650
So how do we export another concern that will be the global provider who will right support?

46
00:03:47,490 --> 00:03:48,230
Concert.

47
00:03:50,890 --> 00:03:51,580
Global.

48
00:03:53,100 --> 00:03:55,760
Not context, but global provider.

49
00:03:57,110 --> 00:04:05,900
So here what we'll do is we'll provide this will expect to function basically or inside, this will

50
00:04:05,900 --> 00:04:06,920
provide the children.

51
00:04:10,680 --> 00:04:14,370
And this is we're passing inside this function.

52
00:04:15,990 --> 00:04:22,920
And there's a far better function still inside this, we provide another constant and this will be for

53
00:04:22,920 --> 00:04:25,680
healing the state and all so.

54
00:04:27,120 --> 00:04:28,500
That can be spared.

55
00:04:28,890 --> 00:04:35,340
And this would be dispatch anyone if you are friendly with relaxed or you will be you might be understanding

56
00:04:35,340 --> 00:04:36,410
what I'm doing right now.

57
00:04:36,420 --> 00:04:39,390
And if you don't know, don't worry, I'll explain everything.

58
00:04:39,400 --> 00:04:40,660
So here's the news.

59
00:04:41,280 --> 00:04:42,630
It was reducer.

60
00:04:45,120 --> 00:04:53,820
And inside this will pass on initial state for now as of now, will pass this pass by in the coming

61
00:04:53,820 --> 00:04:55,710
time will pass like more things.

62
00:04:56,180 --> 00:05:01,950
Okay, so now this is over, so now we'll return some of the things.

63
00:05:02,610 --> 00:05:05,340
So what will return inside this is that.

64
00:05:07,120 --> 00:05:07,870
It, Don.

65
00:05:10,340 --> 00:05:17,660
And it will expect a parenthesis inside this will return to the global context and provide I don't know

66
00:05:17,660 --> 00:05:20,840
everything else, so that can be global.

67
00:05:23,350 --> 00:05:24,970
And next start.

68
00:05:26,660 --> 00:05:34,630
Provider, as we can see, if it's giving the traditions will provide a value for this value will be.

69
00:05:36,520 --> 00:05:45,120
It would benches and then we'll be having like right now, we don't have any like data or anything to

70
00:05:45,120 --> 00:05:49,890
pass inside this, so we can just leave it blank for as of now.

71
00:05:50,460 --> 00:05:58,290
So we'll get the value from getting some value, but the value for now in just close it and it will

72
00:05:58,290 --> 00:06:00,200
give us a closing tag inside.

73
00:06:00,210 --> 00:06:02,670
This will provide the shooter.

74
00:06:03,570 --> 00:06:04,620
Sounds fair enough.

75
00:06:05,580 --> 00:06:08,190
So this is what are.

76
00:06:09,680 --> 00:06:15,480
By global context is looking like as of now, but we will make life more changes now.

77
00:06:15,500 --> 00:06:17,360
This is not a complete, it's just a beginning.

78
00:06:17,360 --> 00:06:23,200
So what we did is that first of all, we imported create context and the use it or do so from now.

79
00:06:23,210 --> 00:06:25,730
What is the use of importing this that?

80
00:06:26,780 --> 00:06:28,940
But this is the initial state.

81
00:06:28,950 --> 00:06:34,490
So this is the idea that their tax tax excuse the label and the amount and.

82
00:06:36,170 --> 00:06:36,970
Let me just.

83
00:06:39,690 --> 00:06:42,270
In just two limit.

84
00:06:44,920 --> 00:06:48,440
If you guys were wondering how I did that, you can just press control.

85
00:06:48,460 --> 00:06:54,430
I am not control shipped out and then you can just press it wherever you want, so it can feel like

86
00:06:54,430 --> 00:06:56,590
you can rename multiple items at once.

87
00:06:57,220 --> 00:07:02,830
OK, so next we created a context for this is the context using the discrete context.

88
00:07:03,190 --> 00:07:08,260
So we created a context with this and we passed this data.

89
00:07:08,290 --> 00:07:08,680
All right.

90
00:07:08,770 --> 00:07:13,150
So this data's parsing that will be globally accessible and we exported it.

91
00:07:13,390 --> 00:07:17,740
Next, we created a provider through which will provide the data.

92
00:07:18,170 --> 00:07:21,100
So this is the provider and this also will be exported.

93
00:07:22,060 --> 00:07:23,540
So this will be a global provider.

94
00:07:23,560 --> 00:07:24,160
This is the name.

95
00:07:24,490 --> 00:07:26,590
And this is actually a function.

96
00:07:26,590 --> 00:07:28,240
This expects a function to inside.

97
00:07:28,240 --> 00:07:35,590
This will be used by the children as an argument and returning value is just straight and dispatch,

98
00:07:35,920 --> 00:07:39,820
and it will expect to use it or do so will now create to do it.

99
00:07:39,820 --> 00:07:45,310
Also in the next coming few seconds will be creating a new set also.

100
00:07:45,700 --> 00:07:49,390
But this is what about the use of the global state.

101
00:07:49,990 --> 00:07:55,600
So things might not be so clear right now, but as we start, as we go on building this application,

102
00:07:55,600 --> 00:07:57,280
things will like you will.

103
00:07:57,910 --> 00:07:59,980
The dots will be connecting eventually.

104
00:08:00,370 --> 00:08:07,930
OK, so next we'll be creating a producer inside the use context and inside the context folder will

105
00:08:07,930 --> 00:08:13,840
be creating producer Doc, Yes, producer or Dargis.

106
00:08:15,510 --> 00:08:18,600
So here what we will do is, first of all, will.

107
00:08:20,220 --> 00:08:23,310
Export like street and action, so we'll.

108
00:08:25,300 --> 00:08:27,880
Export and air.

109
00:08:29,630 --> 00:08:36,740
Speed and like default and default, default, export default, it's a default export.

110
00:08:37,460 --> 00:08:44,090
So inside this will be, I think this and staged an action.

111
00:08:46,400 --> 00:08:54,320
So basically, this is a function of the default function, and inside this, there will be a switch

112
00:08:54,410 --> 00:09:02,060
statement or no, I tell you like in the few seconds, watch what this switch will do.

113
00:09:04,030 --> 00:09:06,730
Inside this action type.

114
00:09:08,860 --> 00:09:09,200
And.

115
00:09:11,750 --> 00:09:14,390
Or that deep inside this will be.

116
00:09:15,350 --> 00:09:20,480
Now, as of now, we are just returning our default or A..

117
00:09:21,300 --> 00:09:24,020
And Libya says we are disregarding a need for.

118
00:09:25,520 --> 00:09:27,890
And that would be a state.

119
00:09:29,810 --> 00:09:31,010
We just see.

120
00:09:32,540 --> 00:09:33,080
And.

121
00:09:34,980 --> 00:09:37,320
Next, we'll go to our Abdon Jazz.

122
00:09:39,710 --> 00:09:47,870
So now we'll go to our apologies and here will call our global provider and then we'll wrap up what

123
00:09:48,500 --> 00:09:51,310
are the components inside the global provider so.

124
00:09:53,540 --> 00:09:54,110
From.

125
00:09:57,830 --> 00:09:58,370
Text.

126
00:10:00,300 --> 00:10:00,840
And.

127
00:10:03,000 --> 00:10:03,780
Global State.

128
00:10:07,620 --> 00:10:08,040
Yes.

129
00:10:08,580 --> 00:10:14,730
And now we'll wrap components inside the global provider for it will look something like this.

130
00:10:18,000 --> 00:10:20,910
No, but go, why not?

131
00:10:23,160 --> 00:10:29,280
Uh, yeah, it gave me a clothing bag, but it's lagging.

132
00:10:29,350 --> 00:10:30,710
Maybe I'm recording, that's why.

133
00:10:32,050 --> 00:10:36,670
So now I'm thinking this at the end, and now I see.

134
00:10:37,450 --> 00:10:40,360
So now let me see if my throat is still running or not.

135
00:10:40,420 --> 00:10:46,510
And let me go back to my browser and see if there is any change.

136
00:10:46,510 --> 00:10:48,220
As of now, there is no change.

137
00:10:48,850 --> 00:10:50,020
Things are going pretty well.

138
00:10:50,400 --> 00:10:54,620
So, OK, so what is this not running me?

139
00:10:56,190 --> 00:10:58,080
So and start.

140
00:10:59,840 --> 00:11:02,630
And it will spin up the server.

141
00:11:04,640 --> 00:11:08,150
Let me close this hard border and balance.

142
00:11:10,350 --> 00:11:14,970
Income expert and producer, I don't need it anymore.

143
00:11:15,870 --> 00:11:22,860
And the styling and all will do it like I'm already styling the component and I've already got the cso's

144
00:11:22,860 --> 00:11:25,020
for it and that's what I'm using right now.

145
00:11:25,530 --> 00:11:35,850
So don't worry about the CCIs will not be writing scissors from scratch here, and we'll review everything

146
00:11:36,210 --> 00:11:37,050
in the CSS.

147
00:11:38,010 --> 00:11:42,450
So as you can see, there is no change with anything as of now.

148
00:11:42,960 --> 00:11:48,990
If I just scored the console and if I just go to the.

149
00:11:50,740 --> 00:11:54,280
Developer tools for bomb here.

150
00:11:56,190 --> 00:11:57,870
If I go to components.

151
00:12:02,420 --> 00:12:05,510
You can see the court of law, but like global provider.

152
00:12:06,140 --> 00:12:13,030
And you can see that is inside the global provider, that is that there are children's, the children's

153
00:12:13,040 --> 00:12:20,150
are harder out of balance and expense and all that and reduce is also there, which is undefined right

154
00:12:20,150 --> 00:12:20,510
now.

155
00:12:20,660 --> 00:12:25,280
We all know that and that's all the harder.

156
00:12:25,280 --> 00:12:29,240
This is the balance of income expense and this is the list.

157
00:12:29,960 --> 00:12:36,290
So that is what I would also recommend you to install this extension in your browser, which is the

158
00:12:36,300 --> 00:12:39,140
React DevTools or React developer tools.

159
00:12:39,890 --> 00:12:42,800
Generally, it is available for Chrome and Firefox.

160
00:12:42,860 --> 00:12:49,910
Right now I'm using Firefox, so if you're using Chrome Firefox, you can just install this extension,

161
00:12:49,910 --> 00:12:56,360
which is Chrome three React DevTools, which is really, really awesome if you are a React developer

162
00:12:56,360 --> 00:13:00,710
or if you are learning, react, so it explains you in a very good way.

163
00:13:01,700 --> 00:13:03,350
OK, so we've got everything now.

164
00:13:03,740 --> 00:13:13,010
So next, we'll be moving to our history transaction history component and we'll add some things to

165
00:13:13,010 --> 00:13:13,190
it.

166
00:13:13,610 --> 00:13:14,300
So.

167
00:13:15,500 --> 00:13:16,850
They're search for this now.

168
00:13:16,880 --> 00:13:22,460
Next, we'll be adding the history or the transaction history component, and we are like adding a little

169
00:13:22,460 --> 00:13:23,480
functionality to it.