1 00:00:01,110 --> 00:00:03,000 ‫So as we just learned, 2 00:00:03,000 --> 00:00:06,600 ‫in the real world we don't just write React apps 3 00:00:06,600 --> 00:00:11,070 ‫in a single JavaScript file without any tooling. 4 00:00:11,070 --> 00:00:14,820 ‫So let's now learn about the options that we have 5 00:00:14,820 --> 00:00:18,063 ‫to set up a brand new React project. 6 00:00:20,100 --> 00:00:23,580 ‫And for now, the two most important options 7 00:00:23,580 --> 00:00:26,430 ‫are the Create-React-App tool 8 00:00:26,430 --> 00:00:29,640 ‫or a build tool called Vite. 9 00:00:29,640 --> 00:00:33,630 ‫So first, Create-React-App is basically 10 00:00:33,630 --> 00:00:37,470 ‫a complete starter kit for React applications 11 00:00:37,470 --> 00:00:39,990 ‫that was developed many years ago 12 00:00:39,990 --> 00:00:42,330 ‫in order to make it really easy 13 00:00:42,330 --> 00:00:46,710 ‫for developers to scaffold new React apps. 14 00:00:46,710 --> 00:00:48,780 ‫And what's really nice about this 15 00:00:48,780 --> 00:00:51,270 ‫is that all the common development tools 16 00:00:51,270 --> 00:00:54,390 ‫are already preconfigured out of the box 17 00:00:54,390 --> 00:00:57,300 ‫specifically for React. 18 00:00:57,300 --> 00:01:01,350 ‫So an app created with Create-React-App 19 00:01:01,350 --> 00:01:05,340 ‫automatically comes with a development server webpack 20 00:01:05,340 --> 00:01:07,710 ‫for module bundling, and of course, 21 00:01:07,710 --> 00:01:09,630 ‫important developer tools, 22 00:01:09,630 --> 00:01:12,960 ‫which include a linter like ESLint, 23 00:01:12,960 --> 00:01:15,600 ‫a code formatter like Prettier, 24 00:01:15,600 --> 00:01:19,170 ‫a testing library like Jest, and of course, 25 00:01:19,170 --> 00:01:23,880 ‫Fable for enabling the latest JavaScript features. 26 00:01:23,880 --> 00:01:26,220 ‫Now this all sounds great 27 00:01:26,220 --> 00:01:30,120 ‫but the problem with Create-React-App is that, 28 00:01:30,120 --> 00:01:34,560 ‫as I said in the beginning, it was developed many years ago. 29 00:01:34,560 --> 00:01:39,420 ‫And so it uses some slow and kind of outdated technologies 30 00:01:39,420 --> 00:01:44,160 ‫under the hood, and in particular, the webpack bundler. 31 00:01:44,160 --> 00:01:46,890 ‫So the team behind Create-React-App 32 00:01:46,890 --> 00:01:51,420 ‫has really stopped innovating, and therefore right now, 33 00:01:51,420 --> 00:01:55,620 ‫the recommendation is to not use Create-React-App 34 00:01:55,620 --> 00:01:58,590 ‫for real world projects anymore. 35 00:01:58,590 --> 00:02:02,460 ‫It is, however, still a perfectly fine way 36 00:02:02,460 --> 00:02:06,090 ‫to get started quickly with a new React app 37 00:02:06,090 --> 00:02:10,710 ‫for tutorials, courses, or simple experiments. 38 00:02:10,710 --> 00:02:15,060 ‫And so therefore, we will actually use Create-React-App 39 00:02:15,060 --> 00:02:17,370 ‫for most of the course, 40 00:02:17,370 --> 00:02:20,160 ‫so for all the small learning projects 41 00:02:20,160 --> 00:02:22,560 ‫that we're gonna build together. 42 00:02:22,560 --> 00:02:25,260 ‫So you might have read all the articles 43 00:02:25,260 --> 00:02:28,980 ‫saying that Create-React-App is dead, 44 00:02:28,980 --> 00:02:31,710 ‫and that you should never use it again. 45 00:02:31,710 --> 00:02:35,700 ‫But that's only true for building real apps. 46 00:02:35,700 --> 00:02:39,840 ‫Again, for learning, it's still 100% fine 47 00:02:39,840 --> 00:02:42,480 ‫because you will not encounter the problems 48 00:02:42,480 --> 00:02:47,480 ‫that large scale apps will face, like slow refresh times. 49 00:02:47,820 --> 00:02:49,770 ‫Now, if you do want to build 50 00:02:49,770 --> 00:02:52,650 ‫real world applications with React, 51 00:02:52,650 --> 00:02:55,590 ‫as we will do by the end of the course, 52 00:02:55,590 --> 00:02:58,593 ‫then Vite is the perfect choice. 53 00:02:59,580 --> 00:03:04,500 ‫Now, Vite is actually quite different from Create-React-App 54 00:03:04,500 --> 00:03:08,340 ‫as it's basically simply a modern build tool. 55 00:03:08,340 --> 00:03:10,920 ‫So a bit like a modern webpack 56 00:03:10,920 --> 00:03:14,490 ‫but which happens to also contain a starter template 57 00:03:14,490 --> 00:03:18,720 ‫for setting up brand new React applications. 58 00:03:18,720 --> 00:03:22,440 ‫However, in a React app created with Vite, 59 00:03:22,440 --> 00:03:24,540 ‫you will have to manually set up 60 00:03:24,540 --> 00:03:26,760 ‫many important developer tools, 61 00:03:26,760 --> 00:03:31,760 ‫such as ESLint, Prettier, a testing library, and so on. 62 00:03:32,250 --> 00:03:35,490 ‫And the most annoying and painful of those 63 00:03:35,490 --> 00:03:39,870 ‫is setting up ESLint to play nice with React. 64 00:03:39,870 --> 00:03:43,710 ‫So that can be a bit of work and it can go wrong. 65 00:03:43,710 --> 00:03:45,090 ‫And so this is the reason 66 00:03:45,090 --> 00:03:48,930 ‫why I still recommend using Create-React-App 67 00:03:48,930 --> 00:03:52,920 ‫for tutorials when we just want to get up and running 68 00:03:52,920 --> 00:03:55,170 ‫as quickly as possible. 69 00:03:55,170 --> 00:03:57,750 ‫Now, if we have all this additional work 70 00:03:57,750 --> 00:03:59,700 ‫to set up our tools, 71 00:03:59,700 --> 00:04:03,450 ‫then why even use Vite in the first place? 72 00:04:03,450 --> 00:04:07,500 ‫Well, the reason is that it's just extremely fast 73 00:04:07,500 --> 00:04:11,880 ‫to automatically refresh the page when the code changes 74 00:04:11,880 --> 00:04:16,080 ‫which is what we call hot module replacement. 75 00:04:16,080 --> 00:04:19,770 ‫Also, bundling is extremely fast, too, 76 00:04:19,770 --> 00:04:22,470 ‫which for large scale applications 77 00:04:22,470 --> 00:04:24,810 ‫can really make a difference 78 00:04:24,810 --> 00:04:27,870 ‫because when you have to wait one or two seconds 79 00:04:27,870 --> 00:04:29,640 ‫for each page refresh, 80 00:04:29,640 --> 00:04:33,540 ‫it can become really, really annoying over time. 81 00:04:33,540 --> 00:04:37,920 ‫But with Vite, the page will update almost instantly 82 00:04:37,920 --> 00:04:40,140 ‫each time that we save our code 83 00:04:40,140 --> 00:04:43,590 ‫and want to see the changes on the screen. 84 00:04:43,590 --> 00:04:47,370 ‫So in summary, we will use Create-React-App 85 00:04:47,370 --> 00:04:50,220 ‫for most small apps in this course 86 00:04:50,220 --> 00:04:54,600 ‫and then move to Vite for the last two or three projects 87 00:04:54,600 --> 00:04:56,880 ‫to make them a bit more real world 88 00:04:56,880 --> 00:04:59,013 ‫and more modern as well. 89 00:05:00,630 --> 00:05:02,880 ‫Now, if you have spent any time 90 00:05:02,880 --> 00:05:05,790 ‫looking at the React documentation, 91 00:05:05,790 --> 00:05:08,100 ‫you might have read that the React team 92 00:05:08,100 --> 00:05:13,100 ‫now advises developers to use a so-called React framework 93 00:05:13,380 --> 00:05:18,380 ‫like Next.js or Remix to build new projects. 94 00:05:18,480 --> 00:05:21,930 ‫So in fact, we have even more options 95 00:05:21,930 --> 00:05:24,450 ‫to set up a new React project 96 00:05:24,450 --> 00:05:26,913 ‫than the ones that we just talked about. 97 00:05:27,990 --> 00:05:31,530 ‫Now we're gonna talk about what React frameworks are 98 00:05:31,530 --> 00:05:33,030 ‫throughout the course, 99 00:05:33,030 --> 00:05:35,190 ‫but for now, all you need to know 100 00:05:35,190 --> 00:05:39,540 ‫is that a framework like Next.js contains solutions 101 00:05:39,540 --> 00:05:42,750 ‫for things like routing, data fetching, 102 00:05:42,750 --> 00:05:44,700 ‫and server side rendering, 103 00:05:44,700 --> 00:05:49,020 ‫so things that React itself does not provide easily 104 00:05:49,020 --> 00:05:50,880 ‫out of the box. 105 00:05:50,880 --> 00:05:53,820 ‫So essentially, a React framework 106 00:05:53,820 --> 00:05:58,440 ‫is a framework built on top of the React library 107 00:05:58,440 --> 00:06:02,760 ‫and which is gonna make it even easier to build applications 108 00:06:02,760 --> 00:06:06,330 ‫than with just vanilla React itself. 109 00:06:06,330 --> 00:06:09,450 ‫And this sounds great, right? 110 00:06:09,450 --> 00:06:12,180 ‫Well, yeah, it kind of does, 111 00:06:12,180 --> 00:06:15,750 ‫but only for some applications. 112 00:06:15,750 --> 00:06:19,560 ‫However, many people, and that include me, 113 00:06:19,560 --> 00:06:21,540 ‫think that telling developers 114 00:06:21,540 --> 00:06:25,350 ‫to always immediately go for a React framework 115 00:06:25,350 --> 00:06:29,880 ‫is not the best idea and not always necessary. 116 00:06:29,880 --> 00:06:34,880 ‫Vanilla React apps, so apps built only using React, 117 00:06:34,890 --> 00:06:38,010 ‫still have a very important place, too. 118 00:06:38,010 --> 00:06:41,220 ‫And so forcing this opinion on everyone 119 00:06:41,220 --> 00:06:43,320 ‫seems kind of strange, 120 00:06:43,320 --> 00:06:47,400 ‫but again, we will discuss this later on. 121 00:06:47,400 --> 00:06:51,090 ‫Now, in any case, this advice only makes sense 122 00:06:51,090 --> 00:06:54,690 ‫for building actual production ready products, 123 00:06:54,690 --> 00:06:57,030 ‫but not for learning React, 124 00:06:57,030 --> 00:07:00,330 ‫which is, of course, what we are trying to do 125 00:07:00,330 --> 00:07:02,010 ‫in this course. 126 00:07:02,010 --> 00:07:04,140 ‫So even if at some point 127 00:07:04,140 --> 00:07:07,140 ‫you want to learn Next.js as well, 128 00:07:07,140 --> 00:07:12,140 ‫of course you still need to learn React, itself, first. 129 00:07:12,150 --> 00:07:14,460 ‫So all this is to say 130 00:07:14,460 --> 00:07:19,170 ‫that you should not worry about this recommendation for now. 131 00:07:19,170 --> 00:07:22,080 ‫For now, let's just learn React 132 00:07:22,080 --> 00:07:26,310 ‫and set up new projects with Create-React-App first 133 00:07:26,310 --> 00:07:29,940 ‫and then with Vite in the bigger projects. 134 00:07:29,940 --> 00:07:32,370 ‫And with all this being said, 135 00:07:32,370 --> 00:07:34,560 ‫let's now actually go create 136 00:07:34,560 --> 00:07:38,373 ‫our very first real React application.