1
00:00:00,480 --> 00:00:04,650
OK, so here we are in our culture, which is the Visual Studio code.

2
00:00:05,100 --> 00:00:11,100
So first of all, if you don't have, we escort our business to record so you can just download it because

3
00:00:11,100 --> 00:00:16,020
I prefer visual studio code and it is the best which I feel and so any developer friendly.

4
00:00:16,440 --> 00:00:19,830
So if you prefer any other like sublime or item, you can use that.

5
00:00:19,830 --> 00:00:20,910
Also, there's no issue with that.

6
00:00:20,940 --> 00:00:22,230
It completely depends on you.

7
00:00:22,890 --> 00:00:29,280
OK, and if you are new to react, please install and beam and nobody else on your computer because

8
00:00:29,280 --> 00:00:33,640
without npm and or just you can't work on react with your computer.

9
00:00:33,660 --> 00:00:34,510
So what can you do?

10
00:00:35,220 --> 00:00:41,370
Just go to nerdiest dot org and just download Node.js and then install it with installer, and it will

11
00:00:41,370 --> 00:00:42,330
install an audience.

12
00:00:42,840 --> 00:00:48,390
And once you're done with everything, once you have installed Node.js and npm and once you installed

13
00:00:49,470 --> 00:00:50,520
this escort.

14
00:00:50,930 --> 00:00:56,250
So you have to, then you could just to open the escort and you have been discovered with this tab here.

15
00:00:56,280 --> 00:00:58,900
Don't worry about what your look, what you're seeing here.

16
00:00:58,950 --> 00:00:59,790
Don't worry about this.

17
00:00:59,790 --> 00:01:00,780
I'll explain everything.

18
00:01:01,470 --> 00:01:05,390
So if you download everything, then you need to just open the escort and you need to just go to this

19
00:01:05,400 --> 00:01:05,910
terminal.

20
00:01:06,970 --> 00:01:15,010
And New Terminal will open a new terminal here, and then you need to type a command, which is and

21
00:01:15,010 --> 00:01:17,570
B X is created.

22
00:01:18,340 --> 00:01:24,670
I found the iPhone app and space the name of your application, whatever you desire.

23
00:01:24,670 --> 00:01:30,940
In this case we have, we have the name as expense tracker expense and.

24
00:01:32,420 --> 00:01:33,020
But I could.

25
00:01:34,280 --> 00:01:36,990
So this is the name which we have right now for our project.

26
00:01:37,010 --> 00:01:38,540
You can give any name what you like.

27
00:01:38,870 --> 00:01:39,920
It is suitable for you.

28
00:01:40,370 --> 00:01:46,880
Okay, so once you tap this, you can just press, enter and tap an initial React app.

29
00:01:46,880 --> 00:01:51,050
Default one will be created and all of the boilerplate code will be given to you.

30
00:01:51,470 --> 00:01:54,440
So I already have executed this command, so I will not do it.

31
00:01:54,780 --> 00:02:01,130
So remember, if you execute this command, it generally takes like five to six minutes or even 10 minutes.

32
00:02:01,130 --> 00:02:04,480
So it completely depends on your processing power of the PC.

33
00:02:04,490 --> 00:02:06,980
So don't worry if it takes a little long time.

34
00:02:07,400 --> 00:02:09,990
So it generally takes like five to six minutes.

35
00:02:09,990 --> 00:02:10,670
So don't worry.

36
00:02:11,210 --> 00:02:17,180
So often it is done just open that it will create dramatically a folder with the name which you have

37
00:02:17,180 --> 00:02:21,440
provided during the installation and during that in that command, whatever name you are provided for

38
00:02:21,440 --> 00:02:26,390
the app, with that name, there will be a folder so open that folder of individuals to record.

39
00:02:26,660 --> 00:02:29,450
So when you open something that will look something like this.

40
00:02:30,410 --> 00:02:33,560
So here you will be having some extra files.

41
00:02:33,560 --> 00:02:38,630
You need to just delete those files and you can just keep whatever you are seeing through the normal

42
00:02:38,780 --> 00:02:42,880
folder, the public folder and in the source folder, you need to keep these files.

43
00:02:42,900 --> 00:02:49,710
I've got CIUSSS app gorgeous in index or cases and next years, and these three or four of them are

44
00:02:49,710 --> 00:02:53,300
also unique to keep other than this report by vitals.

45
00:02:53,300 --> 00:02:56,030
And that will be test dog, something like that.

46
00:02:56,030 --> 00:03:01,550
Just do that because we don't need it because our project is not that skill, so we not need that.

47
00:03:02,000 --> 00:03:02,360
Okay.

48
00:03:02,540 --> 00:03:07,040
So once you have done finished cleaning up and everything, just go to Abdel G.S. and open it.

49
00:03:07,500 --> 00:03:13,100
There will also be some extra code written which you don't need to just clean up and just make this

50
00:03:13,100 --> 00:03:13,730
look like this.

51
00:03:13,730 --> 00:03:17,280
Make your app drawer just look like this, and then we are ready to go.

52
00:03:17,300 --> 00:03:22,190
Once you're done with this, you can just go ahead, go to the terminal and go to the directory of your

53
00:03:22,190 --> 00:03:24,370
application for in my case, it is a.

54
00:03:25,840 --> 00:03:30,450
This and then to tag this command, which is npm and start.

55
00:03:30,790 --> 00:03:35,950
So once you have this company up to press and tell us what it will do is it will spin up a server on

56
00:03:35,950 --> 00:03:40,750
a board where we can see life changes, whatever change we make here in our code.

57
00:03:40,750 --> 00:03:44,500
So we will be able to see reflections of that code in the browser.

58
00:03:44,890 --> 00:03:46,300
So that's all.

59
00:03:46,750 --> 00:03:51,040
As you can see, the server is starting to let us let it start.

60
00:03:51,100 --> 00:03:54,400
So to build that bill, then I will explain you.

61
00:03:55,580 --> 00:04:00,890
Like, what is the folder structure, Andrea, so that does work.

62
00:04:02,390 --> 00:04:06,630
Let me just see if the browser in the browser, if they're not interesting in time.

63
00:04:06,650 --> 00:04:09,710
OK, so let me just explain you the folder structure.

64
00:04:09,710 --> 00:04:12,530
So this is the folder structure 99 percent of the time.

65
00:04:12,530 --> 00:04:15,470
We'll be just working on the CRC, which is the source folder.

66
00:04:15,830 --> 00:04:18,430
You don't need to test the node martine's the public folder.

67
00:04:18,510 --> 00:04:21,680
You will just work on the source folder in the folder.

68
00:04:21,690 --> 00:04:22,820
That is how it is done.

69
00:04:23,120 --> 00:04:23,400
OK.

70
00:04:23,420 --> 00:04:27,980
You can see us that was started successfully on the local port.

71
00:04:27,980 --> 00:04:30,440
Three thousand so we can just write it right.

72
00:04:30,440 --> 00:04:34,880
Something here, and it will show maybe a low react.

73
00:04:35,480 --> 00:04:35,920
Yes.

74
00:04:36,200 --> 00:04:40,910
And I just saved it on save it automatically reloads the page.

75
00:04:40,910 --> 00:04:47,480
So let me just go back to my browser and you can see how this is timed here.

76
00:04:47,960 --> 00:04:49,940
So this is an old application.

77
00:04:49,940 --> 00:04:51,530
We will not be pressured, we will just keep it.

78
00:04:51,530 --> 00:04:54,290
And according to this, we be creating on this.

79
00:04:54,710 --> 00:05:02,690
OK, OK, so let's go back to our we escort and let me just go to public folder and index dog and let

80
00:05:02,690 --> 00:05:12,620
me just change the title of the project because it is the expense tracker expense.

81
00:05:14,210 --> 00:05:14,480
Right.

82
00:05:14,720 --> 00:05:15,140
All right.

83
00:05:15,470 --> 00:05:18,320
Just save it and we'll close it now, we don't need it.

84
00:05:19,190 --> 00:05:19,750
OK.

85
00:05:19,790 --> 00:05:21,140
When I go back to the browser.

86
00:05:22,120 --> 00:05:24,110
As you can see, it's expense trackers now.

87
00:05:24,140 --> 00:05:24,670
OK.

88
00:05:25,670 --> 00:05:32,390
All right, well, now we want to create a component, so for that, we will create a folder in this

89
00:05:32,390 --> 00:05:38,150
odyssey, which is the components folder, so we'll create the components for a lot of components.

90
00:05:39,390 --> 00:05:44,100
And inside the components folder will create odd components.

91
00:05:44,160 --> 00:05:51,540
So first component will be header, which will be containing like name a name of the project, so it

92
00:05:51,540 --> 00:05:53,510
will be harder to dodge.

93
00:05:53,520 --> 00:05:55,440
Yes, and.

94
00:05:56,580 --> 00:05:56,880
Yeah.

95
00:05:57,480 --> 00:05:58,370
So here we are.

96
00:05:58,500 --> 00:06:03,510
OK, let me screw this permanently, and we don't need it anymore, so closing means it will just minimize

97
00:06:03,510 --> 00:06:03,630
it.

98
00:06:05,410 --> 00:06:11,950
And ahead, we will import our snippet for starting snippets of what that will need extension.

99
00:06:12,280 --> 00:06:14,980
Let me just show you what extension I use.

100
00:06:15,490 --> 00:06:21,100
So that is this right here, this this extension, you need to install an obvious escort, which is

101
00:06:21,100 --> 00:06:24,010
the S7 React Redux graphical react native snippets.

102
00:06:24,340 --> 00:06:26,930
This is a really, really important and productive.

103
00:06:26,980 --> 00:06:28,330
It increases your productivity.

104
00:06:28,330 --> 00:06:31,030
Basically, it's a really, really important extension.

105
00:06:31,030 --> 00:06:38,110
Please install it once you install it, and we need the boilerplate code for everything before that.

106
00:06:38,110 --> 00:06:48,520
After installing the extension, you can just press R F C or R F, F C F C, and so it just gives a

107
00:06:48,520 --> 00:06:52,120
boilerplate code for me some reason for due to some reason it doesn't work.

108
00:06:52,130 --> 00:06:57,910
So what I need to do is I need to press control by shift and then P and then I need to do this.

109
00:06:57,920 --> 00:07:00,700
S7 snippets first and then I need to do this.

110
00:07:00,700 --> 00:07:01,480
Ah F.

111
00:07:04,430 --> 00:07:07,340
A city now it gives me this.

112
00:07:08,250 --> 00:07:14,700
OK, that is some extra text here, OK, so then it gives me this boilerplate code where we can write

113
00:07:14,700 --> 00:07:16,680
anything about stuff in the header.

114
00:07:17,130 --> 00:07:25,810
We'll just write, we'll just give one each one and we'll write our expense back.

115
00:07:26,190 --> 00:07:27,000
Nothing else.

116
00:07:27,870 --> 00:07:28,800
We can save it.

117
00:07:28,800 --> 00:07:30,750
And now its work is done.

118
00:07:30,780 --> 00:07:31,740
We will just close it.

119
00:07:31,980 --> 00:07:32,310
OK.

120
00:07:32,640 --> 00:07:36,690
Next, we'll create another component, and that component will be named.

121
00:07:36,690 --> 00:07:44,400
After that, we'll be having a balance component component, which will also show the balance of our

122
00:07:44,460 --> 00:07:44,850
wallet.

123
00:07:45,360 --> 00:07:47,300
So that will be balanced.

124
00:07:47,580 --> 00:07:48,000
Yes.

125
00:07:48,180 --> 00:07:48,540
All right.

126
00:07:48,840 --> 00:07:50,310
It also will do the same thing.

127
00:07:50,640 --> 00:07:52,590
I will use our extension.

128
00:07:52,770 --> 00:07:58,140
So F on a C.

129
00:07:59,260 --> 00:08:01,000
OK, we have got.

130
00:08:02,470 --> 00:08:09,970
So here we'll provide and each one bag, oh, maybe, and each for where we will have our heading.

131
00:08:10,330 --> 00:08:12,910
And this will show like.

132
00:08:16,730 --> 00:08:25,850
Violence and we will have an H1 tag, so it will provide you the money, maybe like one fifty one zero

133
00:08:25,850 --> 00:08:32,300
zero and then we will have a rupee symbol for peace and love would be.

134
00:08:36,810 --> 00:08:43,320
When you save it and next, we'll create another component and the will be.

135
00:08:45,280 --> 00:08:51,940
Now will create on next component, which is the income expense container, so that will be.

136
00:08:53,500 --> 00:08:56,260
Income expands.

137
00:08:57,550 --> 00:08:58,480
Gorgeous.

138
00:08:59,410 --> 00:09:02,600
And also will use our extension for all.

139
00:09:03,270 --> 00:09:03,700
See?

140
00:09:04,910 --> 00:09:11,940
Okay, so here we'll have live with the class name of.

141
00:09:15,270 --> 00:09:16,180
And not.

142
00:09:18,250 --> 00:09:19,480
Oh, my God.

143
00:09:20,170 --> 00:09:21,370
I think we going to provide.

144
00:09:22,690 --> 00:09:23,080
OK.

145
00:09:23,170 --> 00:09:25,720
There's there's a problem, there's a problem.

146
00:09:27,720 --> 00:09:31,150
OK, and my Portland voters aren't working or voting for.

147
00:09:32,070 --> 00:09:32,430
In.

148
00:09:35,520 --> 00:09:39,430
OK, this is not working, Mary part, really write and will write a before.

149
00:09:40,390 --> 00:09:41,470
So they've.

150
00:09:44,520 --> 00:09:46,800
And certainly, we'll have a last name.

151
00:09:49,940 --> 00:09:53,960
And that guy's name would be in.

152
00:09:56,620 --> 00:09:57,680
And enough.

153
00:09:58,420 --> 00:09:59,140
All right.

154
00:10:00,570 --> 00:10:10,200
Well, we'll have another hyphen inside this, we'll have another live, which will be named as.

155
00:10:11,630 --> 00:10:21,960
Plus, unlike income or expense for income, we'll have Dave, and that will be just like normal Dave.

156
00:10:23,240 --> 00:10:31,310
So we'll have each food bag so that we'll type income come.

157
00:10:32,270 --> 00:10:36,250
And after that, we'll have a paragraph they're going to be.

158
00:10:36,620 --> 00:10:39,520
So inside there will be income and income.

159
00:10:39,530 --> 00:10:42,680
You can be here like 500 or.

160
00:10:45,290 --> 00:10:51,890
OK, so you can also place the rupee symbol, rupee symbol represent, will ya?

161
00:10:53,290 --> 00:10:57,620
OK, same thing we need to do for the expense.

162
00:10:57,620 --> 00:11:01,490
Think of what expense we type expense here.

163
00:11:03,240 --> 00:11:04,680
X fans.

164
00:11:06,780 --> 00:11:07,680
And we'll save it.

165
00:11:08,880 --> 00:11:09,870
All right.