Okay, so now we know about react and we know how to use that framework.
And we also know how to create API.
It's time to start a project with our react application.
So first thing first what we need to do.
And we've done it before.
Npx create react app and then we can name it.
I will name my application Movie Creator.
This will take a moment.
So this is built.
And what I could do is I could go to that folder and do npm start.
But I'm not going to do it here because what we can do is at this moment, we can switch to our Visual
Studio Code and finish the process over there.
So I will do that now.
Okay.
We are inside Visual Studio Code and I have that folder open so you can see here Movie Writer.
And what I have inside is I have a source and I have a public.
At the moment we will do the we will deal with the source.
But before we will do that let's run the application.
So click on the terminal here and I will say new terminal.
And here what I can do is I'm inside her already that folder.
So I can do npm start.
And there is some error here.
I'm not really sure why this is happening.
And probably by the time you will watch this, this will be resolved.
But I have some problems with this library here.
So it's basically cannot find a module a, a g, v.
So that means I will need to install.
That will fix it for me probably.
You don't have to do that step but I will do npm install d and then.
This packet and once it is installed I will do npm start.
And it should be okay now.
So probably you don't have to do that step.
But in case you need to do it.
And that will be way to solve it.
And our application is up and running on localhost 3000.
We can see a logo of react and some basic setup here.
So what we will do in this video we will clean up a little bit.
We have a lot of things here that we actually don't need.
So I will open app.js here.
This is basically um the page that we see there.
I will leave the this app and this header and I will remove all the rest of it.
So let's see.
We will put H1 here and I can have a heading of movie writer for now.
So we don't need that logo.
We can remove it from here.
And we can also remove the logo from here.
So I will move it to trash.
Another thing, what we are not going to do is we are not going to do any tests.
So we have to a basic test here.
I could remove it just for a sake of having everything a little bit simpler, and then set up test here.
I can also remove it.
So I do encourage you to write your own test for the application, but this is outside of the scope
of this tutorial, so I will remove it just to have like a less files.
So what we have here also is in the app.js we load up CSS.
That will be the styles.
But most of the things we removed so we don't need actually app logo, we don't need that app logo animation.
So we remove that.
I can leave app and app header.
That's what we have done.
We can remove the all the rest of the the things there.
So I will leave with two two classes here and that two classes are here.
So if I will go back here I have a movie radiator here and this is running.
You can see here on the react app here.
It's actually a name of the application.
So if we go to public we can open index.html.
And you can see under title.
Here we have react app.
This is what we can actually change it.
So I will change it to Movie Rater.
And that will be the title of our tab here.
So I can close it and I can close also that we also have some logo, icon and favicon if I will open
the favicon.
This is the favicon.
You can also change that if you like.
So if you have your own orders, online generators for favicon.
If you have your own graphics, you can generate the ICO from it and just replace this one and that
will be enough.
And you have the same with some some logos here.
So if you open this, this will be used for, for example, if you have a shortcut on your mobile for
the application, this will be used.
So if you have your own asset just replace those um five 512 and 192 and the favicon okay.
So that's a good enough for a start.
We have our application up and running and we will start developing our application in the next video.