And first things first.
Let's take a look at the file and folder structure in our project.
And the good news is that.
For the most part, the setup is almost the same.
So if you're comfortable with Create React app, there's not that many things that are different, so
you should be very comfortable working with it.
But there are a few tiny things that we need to discuss.
For starters, let's navigate to package.json.
So again, we have the dependencies and all that and notice over here.
So we have react and react.
Dom And we also have some dev dependencies as far as the commands we're looking for.
NPM run dev.
So this is going to spin up the vite dev server and also we have the build one.
Now I'm not going to worry about these ones right now, so we'll cover build way later in the project
when we have a complete frontend application.
For now we're just concerned with this one.
So this is something we're going to use.
Of course, if you want to rename it to, let's say, start.
That's always an option.
But in my case, I will leave it as dev and the first thing we want to do when we have our Vite instance,
we want to install all the dependencies.
So we're just simply going to run NPM install and once all the dependencies are in place, then of course
I'll talk about the file and folder structure.
And like I said, for the most part we're going to run NPM run dev, which is going to spin up the vite
dev server.
And first we can see over here that we have node modules.
So these are going to be the dependencies our project is using here.
We have the public one, so whatever we place in the public is going to be publicly available.
Essentially, you can set up here the images, you can set up the CSS and all that.
However, just like with Create React app, it's not suggest that you do that because of course there's
going to be no optimization.
So something to keep in mind.
Now eventually we might add some code over here for the redirects, but again, that is all coming up.
And then we have a source where effectively we'll do all of our work.
So notice over here we have the assets where at this point we have again this React SVG image.
And you know what?
Let me clear everything and let me run NPM run dev just so you can see the actual result.
So notice how quickly everything happens.
We right away have our project on localhost 5173 and we simply need to navigate there now while we're
working on a front end.
In the beginning I'll actually have side by side the browser just so you can see.
Everything instantly.
Now, eventually, once we switch to the server code, I'll actually remove it because at that point
I don't see any need for that.
But yes, initially I'll use my VS code with the browser side by side and check it out.
So effectively this is going to be our project.
And as far as the assets folder you can place here, whatever you want, any kind of asset.
So CSS file images and all that, and I'm probably going to be very annoying and I'm just going to keep
repeating that.
Pretty much setup is exactly the same like we have in Create React app.
So it's not going to be surprising if you navigate to Main JS and you'll see that this is our main entry
point.
So notice that they're using React 18 and therefore we use this method, the create route.
And also at the moment app component is wrapped in the React strict mode.
Now why is that important?
Well, because during development you'll just have more logs.
That's one of the things with strict mode during development, it runs additional checks and as a result
we'll have more logs.
So don't be surprised while we're developing that, you're getting extra logs.
Also, we have index CSS effectively this is our main CSS file.
And in our case, this is where we'll set up the global styles and then eventually we'll use styled
component.
And at the moment we have only one component and that is app JS And as you can see over here, they
have some use state logic and this is the result that we see on the screen.
There's also a specific app, CSS, just for the app JS file, but totally honestly, we will remove
everything from index CSS and we'll also just remove app CSS.
There's really no need.
Now one thing we do need to remember though, is that when it comes to Vite, it's expecting a JS extension
if we have a react component.
So we will set up the component the same way.
Basically we create a function and we export and all that.
Notice this syntax doesn't change.
What does change is the extension.
So if you won't have JSX, then Vite is going to complain.
Something very important to keep in mind and to tell you honestly, at least in my opinion, that's
the biggest difference.
That's the biggest thing you need to remember.
Everything else is exactly the same.
Like with Create React app.
Then we have file for Eslint rules.
We also have git ignore.
Effectively, this just states which files are going to be ignored by the source.
Control something we're going to.
Set it up a little bit later.
Then we have index HTML.
So effectively this is the HTML file where we can change the title and also notice this route.
This is where our entire application sits.
We also have package lock and package Json.
Effectively, this is where we see the packages and also the scripts.
And at the very end we have feet config.
Where we can set up the configuration.
And in our case, this is where we'll set up the proxy.
And all of that is coming up.
If you see the same result in the browser, we are in good shape and we can move on to the next step.