So now the first thing that will do is create a reactor.
And thanks to Facebook that it is fairly simple to do if you just move into the GitHub repository or
create React app or Facebook, you will see all you all that you need to create your.
These three commands and be created that powered by the name of the app.
Then you are to move into the app and then just your npm started to launch your app.
Now, before we create a react to a beta because it's right, the first of them is that you need to
have node installed in the system unless and until you do this and become and won't work.
And so let's just create an app as well as you need to have a right.
So open up a command prompt or terminal if you are on a Mac.
So we have a command prompt right in front of us, and the commander right is NBC's create.
React.
At followed by the name of the app, in this case, this is an expense tracker.
So let's just name it expense tracker.
And then just hit enter.
It is going to take some amount of time to create a reactor.
Meanwhile, you have to wait and once it's done, we'll just move into an app by Siri command and then
just launch us ed.
In my case, it as we escort.
If you're using Atom or any other data, feel free to open your ETA by moving into that repository or
that particular folder.
So once the app is complete, your screen might show up like mine is showing right now.
Now I'd like to discuss do's and don'ts of making a React app, for example.
I just need my React app as expense tracker, right?
So what would have happened if I just.
All uppercase letter of E!
It is going to throw us an error I'm going to tell in advance because.
We just can't use a bogus little while making a reactor.
So what will happen if I just hit enter?
We are going to see an error.
So let's just push them downwards.
It is going to take some time, and it was going to throw an error that we just can't make our reactive
with a carpet of uppercase letter in it name cannot have an uppercase letter.
So here is an error, it says, that cannot create a project named as expense tracker because the npm
naming restrictions name can no longer contain capital letters.
So just try to remember this just don'tI anemia app with uppercase letter.
So now let's just move into Iraq.
As you might see that the other step to create React app was just create React app, then card to your
app, followed by the name of the app.
So the name of my app is expense tracker, right?
So.
Expense structure is getting better.
So now you might see that I am moving to expense treasurer, and if you're having Visual Studio code
installed, then just run code and it will just open up a Waskow instance of that particular app.
So hit enter and it is going to open about vascular node modules.
With this Publix start up, we have known modules, we have public folder.
We have sourced directly our creative industries associated because we are going to deploy our app from
this section, we are going to treat changes.
We are going to create components in our tools directly.
If we just take a look at the node modules.
It contains node packages like Babbel and all, as well as all the packages that will be installing
during our project, for example.
In this case, we are going to be installing material UI.
So just close it.
It is a very long list.
Now if just take a look at public.
It contains the icon, the integrity, extremists.
And if we just take a look at source, we have Abdul Aziz Abdul Jesus.
Now let's take a look at our bridges.
So you can just open at Abdul just fine.
What will see a functional component?
So this is a religious file as a candidate, as a functional component.
It is a class name app and all that stuff.
So now let's give it our first try.
So just open up a terminal.
You can open a terminal by clicking on the Terminal tab and create a new terminal, all by a shortcut
to a shortcut key being displayed on your screen.
Now, before we move any further, let's just do a bit of housekeeping, and that is let's remove Abdul
Gas-Fired Abdul test dog.
Sorry.
So now to be starting about I've just come on and started this.
This is going to launch our app.
So just start and hit enter.
Now it's going to take some time to deploy it up.
And once it's done, we'll set up.
So this is a device that will get from the Create React app only see the React logo rotating and learn
react that is going to take you to react documentation.
Edit it.
I was here just to say we don't know if we go back to that app and if you want to close the server,
just type control policy and you'll get a prompt saying that they want to close it up, then just press
two.
Yes, and this is going to pull us over.
Now, if I just go back and try to reload my, if I just go back and try to reload my app, it will
say that the site cannot be reached.
It's because the servers had been closed.
Right now, let's discuss what is happening.
So this is Abdul fine, whatever we're going to write and this is going to be compiled and sent to index
judges.
Which, in turn is calling out are gorgeous.
Now you might see that app is being called here.
And if are wondering what these strict modes are?
Well, the strict mode is a way to render application more safely that.
So this is the point of contact between us and not just an individual, just fine.
So now before we move any further and start creating it up, let's do a bit of housekeeping.
So just delete this Abdul 10 just fine.
As well as advertisers satisfied and logo 3G.
So this is these are three files are the ones that are really leading now because we do not need them.
So just delete them.
And a logo not as big.
No, winter abaji is.
And just remove all that in there, except the parent plus.
Just remove all this hit save.
And will just remove the logo because we have deleted it and we have no requirement of it, as well
as at outdoor theaters because they have deleted both of these.
OK, then it's safe.
So now will be starting up at up.