All alright, guys, and I was starting to react application and for that, but the first thing that
we do is import the React module.
So just head over to head of the file and import react from React.
Now there are certain components that we need to import in our application so that we can use them.
As you might recall, there were five components in total, but the number of companies that we are
going with that we're going to call in at the GSA just four.
So let's just see that what those components are so happy about potentially will be calling balance
regarding expense sheet recording new transactions as well as be recalling transactions.
So the first thing that will do is import these modules into our app component.
So just import them.
The first comment that was on board is the balance component.
And directly from which are calling is the components that are created inside the components that we
have our balance.
And apart from balance, we even have to import.
The expense sheet.
And the Derek Tree from which we are calling is again the component trajectory, so we'll head back
to their territory.
OK, so that you see components and from components, we want the expense sheet.
And apart from expense, she'd be even want.
OK, so before.
But the first statement it.
And apart from expense, you'd be warned the new transactions as well as transactions.
So let's import the new transaction.
And the directive on which we're calling is the components directory and inside the components of the
new transaction.
And the next and the last component that will be calling is that transactions.
And this is again from our component strategy.
OK, so we have successfully imported all the four modules that we needed in that application.
Now let me just put up semicolons, and after this, we'll just head to our app section and inside that
section.
Now what we're going to do is create a React app.
Now, as you might recall, that we have also installed material into that application, so we will
be needing certain functionalities of that suggest just.
So and will be importing the typography.
Typography, as well as books and mixed styles.
From we want wanted from material you could.
So now, once we're done with this now, head to your written statement and inside this written statement
will be first inside the apparent left class will be creating a typography tag.
Let's just created typography.
And really, with that last name off, Dale's.
So there are three Typekit starlings in React, either you can create a style in a spreadsheet or you
can do the inline starling and react and to do the inline stating what you need to do is you need to
add two sets of coordinates and then you can specify the seasons property in here.
So we would just give it a margin bottom of.
Twenty.
And apart from styles, let's put up our name, which was nothing but expense tracker.
After this.
Will create a box.
Now, let me ask close this, so it can you can get a better view.
So we'll just create a box.
Maybe creating a box and inside the box are going to have balance and inside the box, we are going
to have this balance component, this expense sheet.
The new transactions as well as the transactions.
So let's just create them and.
OK, the first component that we'll be having is the balance, as you might remember, night, the first
component that was being shown was the balance and give it a self-loathing tag.
Now the next component is going to be expense sheet and then against the freezing tag, then apart from
it, very creative transactions and new transactions.
So.
Transactions.
This is going to be the history of transactions that we just made into that application.
And the next is the new transactions, the function of new transactions to add transactions to our transaction
history, right?
So then again, we'll close it now will be passing data and then we are props.
But to that, let's just make up our state so that we can pass data from it.
So now the boilerplate of rap is ready, but we still are in agreement to make this deal.
So that's what we're doing next.