‫Welcome to our biggest project yet.
‫Which is gonna be called WorldWise.
‫And what's special about this one is
‫that we're going to use Vite
‫for the first time
‫to set up this project
‫instead of Create React App.
‫But before we do that,
‫let's first take a quick look at the project.
‫And here it is.
‫So this is the WorldWise application.
‫And for the first time,
‫this actually looks more like a real world product.
‫Now, here we have this page link
‫or this page navigation where we can click
‫and it will then lead us to these different pages.
‫Now, notice how up here in the URL bar,
‫as we move to different pages, it actually changes.
‫So now I'm on the pricing page, and so then it says pricing,
‫but if I go to the product page, then there it says product.
‫And the same on the login page.
‫And if I click here on the logo,
‫then we go back to basically the homepage
‫where we then are at the root URL.
‫So basically, we have these different URLs
‫matched to different views in the application.
‫And so this makes this a single page application.
‫And more about that in the next lecture.
‫But now, let's actually take a look
‫at the heart of the application.
‫And so for that,
‫let's come to the login page.
‫Yeah, this is actually really just a fake login
‫where we just click this button here,
‫which will then take us to the application.
‫So in this application, basically,
‫users can register all the cities
‫that they have ever traveled to.
‫So here on the left side,
‫we have a list of all these cities
‫and also the countries which automatically come
‫from the cities.
‫And notice how actually here,
‫the URL also changes between countries and cities.
‫So this also makes part of the routing
‫that we will learn about in the next lecture.
‫But anyway, here on the right side is then
‫where we have a map
‫and we can go to our current position by clicking here.
‫So this is using the geolocation API in the background.
‫And so for that, we need to give our permission.
‫And then after getting our position,
‫the map will move to our current location.
‫So let's wait for that.
‫And there we are.
‫All right.
‫And now let's see that I went here to Sevila.
‫So I click here.
‫And so then, actually the city name gets fetched
‫from an external API.
‫We get our date,
‫and then I can just say something about my trip
‫and then I add that to the list.
‫So we see then we get this marker here, which we can click.
‫And yeah, it got added to our list right here.
‫And I can also delete cities by clicking here.
‫So you saw here this loading spinner.
‫And the reason for that is
‫that this list of cities is once again,
‫fetched from a fake API just like we used
‫in our previous project.
‫But anyway, we can of course also click on one
‫of these cities and that will then move the map there
‫and it will show us all the details here
‫about the city name, the date we went there and our notes.
‫And even here, this link to the Wikipedia article.
‫Okay.
‫And so that's pretty much it.
‫So that's how this application works
‫and I think this is our nicest application yet
‫and the most real world for sure.
‫So with that being said,
‫let's now actually set up a new application
‫on your computer using Vite for the very first time.
‫So let's minimize this here.
‫And then just as always,
‫we need to open up a new terminal
‫or a command prompt on Windows,
‫and move to the folder where we want to create that project.
‫And so now, instead of using Create React App,
‫we will do npm, so not npx.
‫So npm create vite.
‫And in the future,
‫once you start building your own applications with Vite,
‫you will then use @latest
‫so to use the latest version of Vite.
‫But here in this course,
‫I now want you to use version four
‫so that we are all using the same thing.
‫And that's actually all the command that you need.
‫Now, since you are using this command for the first time,
‫it will ask you to install the Vite package.
‫And so then you just hit enter or Y to confirm that.
‫And afterwards, you will then see this prompt here
‫for the project name.
‫Okay, so since I already used Vite before,
‫that's not showing up here on my screen
‫but you'll have this step here between these two.
‫So just confirm that.
‫That will then quickly install Vite
‫and then here you can enter the project name.
‫So this one, again, is called worldwise.
‫And then here we can select the framework
‫that we want to use.
‫So remember how I showed you in the beginning
‫of the course that Vite is really quite different
‫from Create React App.
‫So Vite is basically more
‫of a modern build tool that also happens
‫to have a few templates for all these different frameworks.
‫So we could even use Vanilla JavaScript
‫but of course we want React.
‫And so with our arrow keys,
‫we can navigate to React,
‫hit enter and then, finally to finish,
‫we just select JavaScript here
‫and then that's it.
‫So now it tells us to go into the folder
‫and to then install the dependencies,
‫but let's not do it that way.
‫So let's instead open up our folder
‫in VS Code and do it from there.
‫So again, quickly renaming it here.
‫Okay, let's make it a bit bigger actually.
‫And then let's
‫open up the terminal.
‫And so from here,
‫we now need to actually install the dependencies manually.
‫So at Create React App, we didn't have to do that.
‫So it would already then contain
‫the note modules folder here, but this one didn't.
‫So let's just type npm install or just npm i for short.
‫And so this will then install all the packages
‫but it will be a lot faster than with Create React App.
‫So there's a lot less packages necessary apparently.
‫So this is going to be a lot faster.
‫But while this is installing,
‫and actually now it already finished,
‫but what I wanted to do now was just to take a quick look
‫at the file structure here.
‫So we have our note modules again
‫which will contain all the libraries necessary.
‫so React, React Dom,
‫and a bunch of other ones
‫that are necessary behind the scenes.
‫Then we have also the public folder again
‫but this time index.html is actually outside that folder.
‫So that's another small difference here.
‫And the reason for that is simply
‫that the developer who maintains this template here
‫thinks basically that this is the best structure.
‫So once again, React really doesn't care about this
‫and it doesn't even know,
‫basically, what the structure here of the folder is.
‫So remember, React really only is concerned
‫about displaying components onto the screen.
‫It doesn't care about the file structure,
‫but of course we do.
‫So let's just take a look here at our source folder.
‫And so here we see that instead of an index.js,
‫we have this main.jsx.
‫So the file extension is now this jsx
‫which as we can see down here,
‫stands for JavaScript JSX.
‫So it's pretty much the same as a JavaScript file
‫but Vite really needs this to be JSX files
‫and not just JS files.
‫So here, the entry point is not index.js,
‫but again, this file called Main.
‫And notice how this one here
‫almost doesn't have any junk at all.
‫So unlike the index.js file
‫that we get from Create React App.
‫All right.
‫Then here, we also have our app.jsx file.
‫As always, this one is just a bit different
‫but let's just, as always, get rid of everything.
‫And then here I will use that snippet
‫that we started using in the previous section
‫to very quickly scaffold a new component.
‫So for now, let's just write the name
‫of the application here.
‫Just so we have something.
‫And then let's also get rid of all this CSS.
‫We will get some new one soon.
‫And then here we need to remove that line of code as well.
‫Okay.
‫And so now we are ready to start the application.
‫However, here is another difference.
‫We don't do that with npm start.
‫So instead, we can check out here
‫that we have this dev script.
‫And so here, we need to run npm run dev.
‫Okay.
‫And so that's running now successfully.
‫But notice how it actually didn't open up a new browser tab.
‫So we need to manually do that.
‫Now, let's make this a lot smaller here like this
‫and then I can just command or control click
‫here on this link and then it opens up our page.
‫And you see it is working great.
‫And as always, let's also bring up our console here
‫which we are going to need all the time.
‫And now to finish,
‫remember how I also told you at the beginning of the course
‫that the great thing about Create React App is
‫that it already comes
‫with all the important developer tools pre-installed.
‫And the most important one of those is by far ESLint.
‫So hopefully you saw throughout this course until this point
‫that ESLint helped us so much
‫and prevented so many bugs from happening.
‫So building a React app without ESLint
‫is a bit like coding half-blinded.
‫So we really don't want that.
‫And so we now need to config ESLint here
‫in our Vite project.
‫So again, we need to do that manually each time
‫that we set up a new project with Vite.
‫So that can be a bit annoying
‫and that's the reason why I told you that for learning,
‫it is just good enough to actually use Create React App.
‫But yeah, now we are using Vite.
‫And so let's then config ESLint.
‫Let me just show you an example here of why we need that.
‫So let's say we define this variable
‫and we are not using it.
‫And so then usually ESLint would warn us
‫by highlighting this variable here
‫with that yellow underline.
‫So that's what we want to get back, basically.
‫So let's open up a new terminal here.
‫So by clicking this button here.
‫And so with this,
‫we keep our application running here in this other process.
‫So to configure ESLint,
‫we need to install a few NPM packages.
‫So that's ESLint itself.
‫Then the Vite ESLint plugin.
‫So vite-plugin-eslint.
‫And finally, we also need to install
‫all the React-specific ESLint rules.
‫So that's eslint-config-react-app.
‫So those are our three packages
‫and then we need to save them as dependencies.
‫So dev dependencies with save-dev.
‫And then here, apparently I forgot the install keyword.
‫And so let's see.
‫So this should now install these three packages.
‫And so next, we need to actually config our project here
‫to integrate with these packages.
‫So the first step was to install those three packages
‫and the second one is to create a new file
‫called .eslintrc.json.
‫And so here we can basically configure
‫the behavior of ESLint.
‫And in this case,
‫what we want to do is to extend the default rules
‫of ESLint with those React rules that we just installed.
‫So just create an object like this
‫and then extends and then react-app.
‫So again, these are the ESLint rules
‫that we just installed before.
‫So basically these ones right here.
‫So with this, we extend ESLint to work with those rules.
‫And then finally, we also need to config our Vite project
‫with this vite.config.js file.
‫So on this file we can configure all kinds of things
‫about development and building of our project.
‫But here, all we need to do is to now add the ESLint plugin
‫to this array.
‫So for that, we first import that here.
‫So import eslint from the vite-plugin-eslint.
‫And then finally, we add that here to our plugins array.
‫Give it a save, and that should then work.
‫So our application got reloaded here a few times.
‫There are no more errors.
‫Here, we can also close this process.
‫And you see that now ESLint is back to working.
‫So we get the error right here in our VS Code
‫and also even that warning down here
‫in our output from the Vite development process.
‫So let's get rid of that
‫because now we know that this is actually working.
‫Great!
‫So with this, we have Vite correctly set up.
‫It is a little bit of work,
‫but you just have to write down somewhere how it works
‫and then do it every time.
‫So that's not too bad.
‫Especially if it's a big project
‫that you will be working on for a long time.
‫But anyway, with this we have our project set up
‫and so now we can start learning about the main concepts
‫that we will talk about in this section,
‫which are routing single page applications and React Router.