‫As always, let's start the section
‫by actually setting up our next project.
‫And since we are now
‫in the professional React development part of this course,
‫we are of course going to use Vite
‫and not Create-React-App to scaffold this new application,
‫and so let's open up our terminal, or on Windows,
‫the Command prompt, and then let's move to the folder
‫where all our projects live.
‫So for me, that's again the desktop,
‫but for you, it can be any other folder.
‫And then in here, let's run npm, create Vite, not Vite.
‫So Vite, and then in the future,
‫once you start building your own applications,
‫you will run Vite at latest, so just like this,
‫but in this case, it's important that you run Vite
‫actually at version four so that everything
‫is going to work exactly like here in the video.
‫So then just hit enter.
‫And if you have never run Vite before,
‫then it will now ask you to install Vite,
‫but in this case, I have already used it before
‫and so now all I have to do here
‫is to specify the project name.
‫So in this section, the project that we're gonna build
‫is called Fast React Pizza.
‫Then let's use our arrow keys to select React
‫and just with JavaScript.
‫And there we go, that's all we have to do for now.
‫And so let's now take our new folder that we just got here.
‫I'll just quickly rename it
‫and then let's open it up in VS Code, as always.
‫And remember that with Vite,
‫we actually don't initially have the note modules folder
‫so all of the libraries like React and React DOM
‫actually haven't been installed yet
‫and so that's the first thing that we need to do now.
‫So let's open up our terminal here
‫and then let's just run npm install.
‫So once you're in that project folder,
‫then here we basically manually need to install
‫all the packages.
‫And now that this is finished,
‫we also need to configure ESLint,
‫so just like we did before,
‫also in our world-wise application, remember that?
‫So I will now just very quickly do that here.
‫So we need to npm install a few packages here
‫which are ESLint.
‫We also need a Vite ESLint plugin
‫so that's Vite plugin ESLint,
‫and then we also need the basically
‫ESLint configuration rules specifically for React-Apps.
‫And then we also need to save this
‫as development dependencies by using this save dev flag.
‫And actually here it is just ESLint config React-App,
‫so not Apps.
‫Now let's give this some time here to install
‫all the packages.
‫And once that is done,
‫let's again create the .ESLintrc.JSON file.
‫And so again, we can use this file here to configure
‫ESLin in this project.
‫Just make sure that you also have the ESLint extension
‫installed in your VS Code.
‫And so here what we're gonna do is to tell ESLint
‫that we want to use the previously installed
‫set of rules for React-Apps,
‫so basically this one right here.
‫So what we want to do is to extend.
‫So we use extends
‫and then it actually needs to be these quotes
‫and then React-App.
‫So that's the first step in configuring ESLint
‫and now we also need to change
‫something here in Vite config.
‫So this is the config file where we can change
‫all kinds of settings about the Vite application itself
‫and so here what we're going to do is to import ESLint
‫from the Vite plugin ESLint module.
‫And so now what we need to do here is to then use that here
‫in this array of plugins.
‫So we already have the React plugin here
‫because that's the starter template that we basically chose
‫in the beginning when we set up the project
‫and now here we just need to add ESLint as well.
‫So calling this function here, and so with this,
‫we should have ESLint correctly configured in our project,
‫which again, is really, really important
‫because without ESLint, it's a bit like coding all blind.
‫So for example, we need help
‫with the use effect hook all the time,
‫so with the dependency array and things like that,
‫and so for this ESLint is really indispensable.
‫And so now with this, we have it correctly set up
‫so let's come here into our app component.
‫Let's again start by deleting these two CSS files
‫that we no longer need
‫and the same here for the assets folder.
‫Now this main .JSX file is really nice and clean here.
‫Let's just get rid of this line of code
‫and now let's just see if everything is working.
‫So I will delete everything and then again
‫use our very handy snippet here.
‫And let's just say hello, Vite.
‫All right, and so with all this in place,
‫we are now ready to start running this project.
‫So here in Vite, it's not npm start,
‫but instead it's npm run dev.
‫And one difference between Vite and Create-React-App
‫is that it doesn't automatically open up a new browser tab
‫so if that doesn't happen,
‫that's not because there is some problem,
‫but it's because we need to manually click this link here.
‫So in VS Code, you can Command or Control-Click
‫on these links here and that will then open up the new tab.
‫Nice, so that worked.
‫Let's make it a bit smaller
‫and then place our window here side by side.
‫And now I just want to declare
‫some variable here and not use it.
‫And so indeed we get here this morning from ESLint,
‫or at least we should get it, there it is,
‫and even here in the terminal,
‫Vite itself also shows us the same warning.
‫Great, so with this,
‫we are now ready to start building our application.
‫And this time, actually, I don't have a demo version
‫of the application for you because instead,
‫we will basically build the complete application
‫from complete scratch as if we were building the app
‫for a real client and so we really need to plan it
‫from scratch and so let's go do that now
‫in the next lecture.