1 00:00:01,140 --> 00:00:03,960 ‫As always, let's start the section 2 00:00:03,960 --> 00:00:07,743 ‫by actually setting up our next project. 3 00:00:09,030 --> 00:00:10,530 ‫And since we are now 4 00:00:10,530 --> 00:00:14,790 ‫in the professional React development part of this course, 5 00:00:14,790 --> 00:00:17,700 ‫we are of course going to use Vite 6 00:00:17,700 --> 00:00:22,700 ‫and not Create-React-App to scaffold this new application, 7 00:00:22,980 --> 00:00:26,760 ‫and so let's open up our terminal, or on Windows, 8 00:00:26,760 --> 00:00:30,360 ‫the Command prompt, and then let's move to the folder 9 00:00:30,360 --> 00:00:32,613 ‫where all our projects live. 10 00:00:33,570 --> 00:00:35,910 ‫So for me, that's again the desktop, 11 00:00:35,910 --> 00:00:38,850 ‫but for you, it can be any other folder. 12 00:00:38,850 --> 00:00:43,850 ‫And then in here, let's run npm, create Vite, not Vite. 13 00:00:46,800 --> 00:00:49,050 ‫So Vite, and then in the future, 14 00:00:49,050 --> 00:00:51,660 ‫once you start building your own applications, 15 00:00:51,660 --> 00:00:56,660 ‫you will run Vite at latest, so just like this, 16 00:00:57,240 --> 00:01:00,690 ‫but in this case, it's important that you run Vite 17 00:01:00,690 --> 00:01:03,780 ‫actually at version four so that everything 18 00:01:03,780 --> 00:01:06,993 ‫is going to work exactly like here in the video. 19 00:01:07,920 --> 00:01:10,170 ‫So then just hit enter. 20 00:01:10,170 --> 00:01:12,870 ‫And if you have never run Vite before, 21 00:01:12,870 --> 00:01:15,930 ‫then it will now ask you to install Vite, 22 00:01:15,930 --> 00:01:18,720 ‫but in this case, I have already used it before 23 00:01:18,720 --> 00:01:21,060 ‫and so now all I have to do here 24 00:01:21,060 --> 00:01:23,760 ‫is to specify the project name. 25 00:01:23,760 --> 00:01:27,120 ‫So in this section, the project that we're gonna build 26 00:01:27,120 --> 00:01:31,433 ‫is called Fast React Pizza. 27 00:01:33,420 --> 00:01:37,620 ‫Then let's use our arrow keys to select React 28 00:01:37,620 --> 00:01:39,693 ‫and just with JavaScript. 29 00:01:40,830 --> 00:01:44,310 ‫And there we go, that's all we have to do for now. 30 00:01:44,310 --> 00:01:48,933 ‫And so let's now take our new folder that we just got here. 31 00:01:50,220 --> 00:01:52,950 ‫I'll just quickly rename it 32 00:01:52,950 --> 00:01:57,153 ‫and then let's open it up in VS Code, as always. 33 00:01:58,110 --> 00:02:00,210 ‫And remember that with Vite, 34 00:02:00,210 --> 00:02:04,380 ‫we actually don't initially have the note modules folder 35 00:02:04,380 --> 00:02:08,280 ‫so all of the libraries like React and React DOM 36 00:02:08,280 --> 00:02:10,590 ‫actually haven't been installed yet 37 00:02:10,590 --> 00:02:14,430 ‫and so that's the first thing that we need to do now. 38 00:02:14,430 --> 00:02:16,900 ‫So let's open up our terminal here 39 00:02:19,170 --> 00:02:22,413 ‫and then let's just run npm install. 40 00:02:23,580 --> 00:02:27,240 ‫So once you're in that project folder, 41 00:02:27,240 --> 00:02:30,900 ‫then here we basically manually need to install 42 00:02:30,900 --> 00:02:32,493 ‫all the packages. 43 00:02:34,650 --> 00:02:36,150 ‫And now that this is finished, 44 00:02:36,150 --> 00:02:38,820 ‫we also need to configure ESLint, 45 00:02:38,820 --> 00:02:40,710 ‫so just like we did before, 46 00:02:40,710 --> 00:02:44,820 ‫also in our world-wise application, remember that? 47 00:02:44,820 --> 00:02:48,180 ‫So I will now just very quickly do that here. 48 00:02:48,180 --> 00:02:51,990 ‫So we need to npm install a few packages here 49 00:02:51,990 --> 00:02:54,510 ‫which are ESLint. 50 00:02:54,510 --> 00:02:57,900 ‫We also need a Vite ESLint plugin 51 00:02:57,900 --> 00:03:02,900 ‫so that's Vite plugin ESLint, 52 00:03:03,180 --> 00:03:07,560 ‫and then we also need the basically 53 00:03:07,560 --> 00:03:12,560 ‫ESLint configuration rules specifically for React-Apps. 54 00:03:14,070 --> 00:03:16,680 ‫And then we also need to save this 55 00:03:16,680 --> 00:03:21,680 ‫as development dependencies by using this save dev flag. 56 00:03:22,920 --> 00:03:27,920 ‫And actually here it is just ESLint config React-App, 57 00:03:27,990 --> 00:03:29,103 ‫so not Apps. 58 00:03:31,301 --> 00:03:33,780 ‫Now let's give this some time here to install 59 00:03:33,780 --> 00:03:34,833 ‫all the packages. 60 00:03:36,090 --> 00:03:38,070 ‫And once that is done, 61 00:03:38,070 --> 00:03:43,070 ‫let's again create the .ESLintrc.JSON file. 62 00:03:46,620 --> 00:03:50,580 ‫And so again, we can use this file here to configure 63 00:03:50,580 --> 00:03:52,920 ‫ESLin in this project. 64 00:03:52,920 --> 00:03:56,490 ‫Just make sure that you also have the ESLint extension 65 00:03:56,490 --> 00:03:59,100 ‫installed in your VS Code. 66 00:03:59,100 --> 00:04:02,820 ‫And so here what we're gonna do is to tell ESLint 67 00:04:02,820 --> 00:04:05,760 ‫that we want to use the previously installed 68 00:04:05,760 --> 00:04:09,120 ‫set of rules for React-Apps, 69 00:04:09,120 --> 00:04:11,940 ‫so basically this one right here. 70 00:04:11,940 --> 00:04:14,823 ‫So what we want to do is to extend. 71 00:04:15,780 --> 00:04:18,360 ‫So we use extends 72 00:04:18,360 --> 00:04:23,040 ‫and then it actually needs to be these quotes 73 00:04:23,040 --> 00:04:25,953 ‫and then React-App. 74 00:04:27,120 --> 00:04:30,480 ‫So that's the first step in configuring ESLint 75 00:04:30,480 --> 00:04:32,160 ‫and now we also need to change 76 00:04:32,160 --> 00:04:34,980 ‫something here in Vite config. 77 00:04:34,980 --> 00:04:38,370 ‫So this is the config file where we can change 78 00:04:38,370 --> 00:04:42,750 ‫all kinds of settings about the Vite application itself 79 00:04:42,750 --> 00:04:46,373 ‫and so here what we're going to do is to import ESLint 80 00:04:49,170 --> 00:04:54,170 ‫from the Vite plugin ESLint module. 81 00:04:55,710 --> 00:04:59,850 ‫And so now what we need to do here is to then use that here 82 00:04:59,850 --> 00:05:01,620 ‫in this array of plugins. 83 00:05:01,620 --> 00:05:03,780 ‫So we already have the React plugin here 84 00:05:03,780 --> 00:05:07,530 ‫because that's the starter template that we basically chose 85 00:05:07,530 --> 00:05:10,530 ‫in the beginning when we set up the project 86 00:05:10,530 --> 00:05:15,330 ‫and now here we just need to add ESLint as well. 87 00:05:15,330 --> 00:05:18,210 ‫So calling this function here, and so with this, 88 00:05:18,210 --> 00:05:22,800 ‫we should have ESLint correctly configured in our project, 89 00:05:22,800 --> 00:05:25,680 ‫which again, is really, really important 90 00:05:25,680 --> 00:05:30,680 ‫because without ESLint, it's a bit like coding all blind. 91 00:05:30,780 --> 00:05:32,730 ‫So for example, we need help 92 00:05:32,730 --> 00:05:35,310 ‫with the use effect hook all the time, 93 00:05:35,310 --> 00:05:38,550 ‫so with the dependency array and things like that, 94 00:05:38,550 --> 00:05:42,363 ‫and so for this ESLint is really indispensable. 95 00:05:43,200 --> 00:05:46,770 ‫And so now with this, we have it correctly set up 96 00:05:46,770 --> 00:05:50,343 ‫so let's come here into our app component. 97 00:05:51,360 --> 00:05:56,360 ‫Let's again start by deleting these two CSS files 98 00:05:56,370 --> 00:05:58,120 ‫that we no longer need 99 00:05:59,100 --> 00:06:03,213 ‫and the same here for the assets folder. 100 00:06:04,080 --> 00:06:09,080 ‫Now this main .JSX file is really nice and clean here. 101 00:06:09,360 --> 00:06:12,400 ‫Let's just get rid of this line of code 102 00:06:13,410 --> 00:06:16,890 ‫and now let's just see if everything is working. 103 00:06:16,890 --> 00:06:19,980 ‫So I will delete everything and then again 104 00:06:19,980 --> 00:06:23,160 ‫use our very handy snippet here. 105 00:06:23,160 --> 00:06:26,013 ‫And let's just say hello, Vite. 106 00:06:27,360 --> 00:06:30,960 ‫All right, and so with all this in place, 107 00:06:30,960 --> 00:06:34,143 ‫we are now ready to start running this project. 108 00:06:35,040 --> 00:06:38,670 ‫So here in Vite, it's not npm start, 109 00:06:38,670 --> 00:06:43,170 ‫but instead it's npm run dev. 110 00:06:43,170 --> 00:06:47,010 ‫And one difference between Vite and Create-React-App 111 00:06:47,010 --> 00:06:51,300 ‫is that it doesn't automatically open up a new browser tab 112 00:06:51,300 --> 00:06:53,220 ‫so if that doesn't happen, 113 00:06:53,220 --> 00:06:55,470 ‫that's not because there is some problem, 114 00:06:55,470 --> 00:06:59,640 ‫but it's because we need to manually click this link here. 115 00:06:59,640 --> 00:07:03,570 ‫So in VS Code, you can Command or Control-Click 116 00:07:03,570 --> 00:07:07,473 ‫on these links here and that will then open up the new tab. 117 00:07:09,900 --> 00:07:12,513 ‫Nice, so that worked. 118 00:07:13,590 --> 00:07:15,070 ‫Let's make it a bit smaller 119 00:07:16,380 --> 00:07:20,550 ‫and then place our window here side by side. 120 00:07:20,550 --> 00:07:22,380 ‫And now I just want to declare 121 00:07:22,380 --> 00:07:24,543 ‫some variable here and not use it. 122 00:07:26,820 --> 00:07:30,753 ‫And so indeed we get here this morning from ESLint, 123 00:07:31,620 --> 00:07:35,520 ‫or at least we should get it, there it is, 124 00:07:35,520 --> 00:07:37,740 ‫and even here in the terminal, 125 00:07:37,740 --> 00:07:41,880 ‫Vite itself also shows us the same warning. 126 00:07:41,880 --> 00:07:43,590 ‫Great, so with this, 127 00:07:43,590 --> 00:07:47,280 ‫we are now ready to start building our application. 128 00:07:47,280 --> 00:07:50,790 ‫And this time, actually, I don't have a demo version 129 00:07:50,790 --> 00:07:54,180 ‫of the application for you because instead, 130 00:07:54,180 --> 00:07:57,360 ‫we will basically build the complete application 131 00:07:57,360 --> 00:08:01,200 ‫from complete scratch as if we were building the app 132 00:08:01,200 --> 00:08:05,430 ‫for a real client and so we really need to plan it 133 00:08:05,430 --> 00:08:09,000 ‫from scratch and so let's go do that now 134 00:08:09,000 --> 00:08:10,353 ‫in the next lecture.