OK, so here we are in our culture, which is the Visual Studio code.
So first of all, if you don't have, we escort our business to record so you can just download it because
I prefer visual studio code and it is the best which I feel and so any developer friendly.
So if you prefer any other like sublime or item, you can use that.
Also, there's no issue with that.
It completely depends on you.
OK, and if you are new to react, please install and beam and nobody else on your computer because
without npm and or just you can't work on react with your computer.
So what can you do?
Just go to nerdiest dot org and just download Node.js and then install it with installer, and it will
install an audience.
And once you're done with everything, once you have installed Node.js and npm and once you installed
this escort.
So you have to, then you could just to open the escort and you have been discovered with this tab here.
Don't worry about what your look, what you're seeing here.
Don't worry about this.
I'll explain everything.
So if you download everything, then you need to just open the escort and you need to just go to this
terminal.
And New Terminal will open a new terminal here, and then you need to type a command, which is and
B X is created.
I found the iPhone app and space the name of your application, whatever you desire.
In this case we have, we have the name as expense tracker expense and.
But I could.
So this is the name which we have right now for our project.
You can give any name what you like.
It is suitable for you.
Okay, so once you tap this, you can just press, enter and tap an initial React app.
Default one will be created and all of the boilerplate code will be given to you.
So I already have executed this command, so I will not do it.
So remember, if you execute this command, it generally takes like five to six minutes or even 10 minutes.
So it completely depends on your processing power of the PC.
So don't worry if it takes a little long time.
So it generally takes like five to six minutes.
So don't worry.
So often it is done just open that it will create dramatically a folder with the name which you have
provided during the installation and during that in that command, whatever name you are provided for
the app, with that name, there will be a folder so open that folder of individuals to record.
So when you open something that will look something like this.
So here you will be having some extra files.
You need to just delete those files and you can just keep whatever you are seeing through the normal
folder, the public folder and in the source folder, you need to keep these files.
I've got CIUSSS app gorgeous in index or cases and next years, and these three or four of them are
also unique to keep other than this report by vitals.
And that will be test dog, something like that.
Just do that because we don't need it because our project is not that skill, so we not need that.
Okay.
So once you have done finished cleaning up and everything, just go to Abdel G.S. and open it.
There will also be some extra code written which you don't need to just clean up and just make this
look like this.
Make your app drawer just look like this, and then we are ready to go.
Once you're done with this, you can just go ahead, go to the terminal and go to the directory of your
application for in my case, it is a.
This and then to tag this command, which is npm and start.
So once you have this company up to press and tell us what it will do is it will spin up a server on
a board where we can see life changes, whatever change we make here in our code.
So we will be able to see reflections of that code in the browser.
So that's all.
As you can see, the server is starting to let us let it start.
So to build that bill, then I will explain you.
Like, what is the folder structure, Andrea, so that does work.
Let me just see if the browser in the browser, if they're not interesting in time.
OK, so let me just explain you the folder structure.
So this is the folder structure 99 percent of the time.
We'll be just working on the CRC, which is the source folder.
You don't need to test the node martine's the public folder.
You will just work on the source folder in the folder.
That is how it is done.
OK.
You can see us that was started successfully on the local port.
Three thousand so we can just write it right.
Something here, and it will show maybe a low react.
Yes.
And I just saved it on save it automatically reloads the page.
So let me just go back to my browser and you can see how this is timed here.
So this is an old application.
We will not be pressured, we will just keep it.
And according to this, we be creating on this.
OK, OK, so let's go back to our we escort and let me just go to public folder and index dog and let
me just change the title of the project because it is the expense tracker expense.
Right.
All right.
Just save it and we'll close it now, we don't need it.
OK.
When I go back to the browser.
As you can see, it's expense trackers now.
OK.
All right, well, now we want to create a component, so for that, we will create a folder in this
odyssey, which is the components folder, so we'll create the components for a lot of components.
And inside the components folder will create odd components.
So first component will be header, which will be containing like name a name of the project, so it
will be harder to dodge.
Yes, and.
Yeah.
So here we are.
OK, let me screw this permanently, and we don't need it anymore, so closing means it will just minimize
it.
And ahead, we will import our snippet for starting snippets of what that will need extension.
Let me just show you what extension I use.
So that is this right here, this this extension, you need to install an obvious escort, which is
the S7 React Redux graphical react native snippets.
This is a really, really important and productive.
It increases your productivity.
Basically, it's a really, really important extension.
Please install it once you install it, and we need the boilerplate code for everything before that.
After installing the extension, you can just press R F C or R F, F C F C, and so it just gives a
boilerplate code for me some reason for due to some reason it doesn't work.
So what I need to do is I need to press control by shift and then P and then I need to do this.
S7 snippets first and then I need to do this.
Ah F.
A city now it gives me this.
OK, that is some extra text here, OK, so then it gives me this boilerplate code where we can write
anything about stuff in the header.
We'll just write, we'll just give one each one and we'll write our expense back.
Nothing else.
We can save it.
And now its work is done.
We will just close it.
OK.
Next, we'll create another component, and that component will be named.
After that, we'll be having a balance component component, which will also show the balance of our
wallet.
So that will be balanced.
Yes.
All right.
It also will do the same thing.
I will use our extension.
So F on a C.
OK, we have got.
So here we'll provide and each one bag, oh, maybe, and each for where we will have our heading.
And this will show like.
Violence and we will have an H1 tag, so it will provide you the money, maybe like one fifty one zero
zero and then we will have a rupee symbol for peace and love would be.
When you save it and next, we'll create another component and the will be.
Now will create on next component, which is the income expense container, so that will be.
Income expands.
Gorgeous.
And also will use our extension for all.
See?
Okay, so here we'll have live with the class name of.
And not.
Oh, my God.
I think we going to provide.
OK.
There's there's a problem, there's a problem.
OK, and my Portland voters aren't working or voting for.
In.
OK, this is not working, Mary part, really write and will write a before.
So they've.
And certainly, we'll have a last name.
And that guy's name would be in.
And enough.
All right.
Well, we'll have another hyphen inside this, we'll have another live, which will be named as.
Plus, unlike income or expense for income, we'll have Dave, and that will be just like normal Dave.
So we'll have each food bag so that we'll type income come.
And after that, we'll have a paragraph they're going to be.
So inside there will be income and income.
You can be here like 500 or.
OK, so you can also place the rupee symbol, rupee symbol represent, will ya?
OK, same thing we need to do for the expense.
Think of what expense we type expense here.
X fans.
And we'll save it.
All right.