1 00:00:01,050 --> 00:00:03,480 ‫Welcome to the Pizza Menu project 2 00:00:03,480 --> 00:00:06,180 ‫that we're going to build throughout this section. 3 00:00:06,180 --> 00:00:08,850 ‫And in this lecture, I actually want to start 4 00:00:08,850 --> 00:00:11,913 ‫to build this project from complete scratch. 5 00:00:13,260 --> 00:00:14,820 ‫And with complete scratch, 6 00:00:14,820 --> 00:00:17,220 ‫I mean that we are going to delete all 7 00:00:17,220 --> 00:00:20,790 ‫of these files that we have here that we don't really need, 8 00:00:20,790 --> 00:00:25,410 ‫and start a project from scratch, as I just said. 9 00:00:25,410 --> 00:00:28,260 ‫So let's close this one and this one 10 00:00:28,260 --> 00:00:30,840 ‫and even the index.HTML 11 00:00:30,840 --> 00:00:33,775 ‫which we will not delete and recreate, but all of these 12 00:00:33,775 --> 00:00:37,500 ‫feel free to ignore them and to delete them. 13 00:00:37,500 --> 00:00:42,390 ‫So delete, and let's start from scratch. 14 00:00:42,390 --> 00:00:44,490 ‫So here we have our first error 15 00:00:44,490 --> 00:00:47,910 ‫and notice that I placed the browser here on one side 16 00:00:47,910 --> 00:00:50,070 ‫and our code editor on the left side 17 00:00:50,070 --> 00:00:53,970 ‫so that we can always see the output at the same time. 18 00:00:53,970 --> 00:00:56,820 ‫So you see that our application is kind of looking 19 00:00:56,820 --> 00:00:59,160 ‫for this file right here, 20 00:00:59,160 --> 00:01:00,862 ‫but of course it doesn't exist anymore 21 00:01:00,862 --> 00:01:02,853 ‫because we just deleted it. 22 00:01:04,860 --> 00:01:07,260 ‫So, let's start from scratch. 23 00:01:07,260 --> 00:01:09,210 ‫And we're going to create our first file 24 00:01:09,210 --> 00:01:10,680 ‫inside of this folder, 25 00:01:10,680 --> 00:01:14,760 ‫and it's going to be called index.js, and it really 26 00:01:14,760 --> 00:01:17,010 ‫needs to be called index.js 27 00:01:17,010 --> 00:01:18,210 ‫because webpack, 28 00:01:18,210 --> 00:01:21,030 ‫which is the module bundler in this project, 29 00:01:21,030 --> 00:01:25,590 ‫expects the entry point to be called index.js. 30 00:01:25,590 --> 00:01:26,423 ‫All right? 31 00:01:26,423 --> 00:01:29,619 ‫But anyway, let's now start by importing 32 00:01:29,619 --> 00:01:33,540 ‫React 33 00:01:33,540 --> 00:01:34,860 ‫from 'react'. 34 00:01:34,860 --> 00:01:38,370 ‫And again, this is just simple JavaScript here. 35 00:01:38,370 --> 00:01:42,360 ‫So importing modules is part of JavaScript, 36 00:01:42,360 --> 00:01:45,570 ‫and specifically since ES6. 37 00:01:45,570 --> 00:01:47,320 ‫Then let's also import 38 00:01:48,264 --> 00:01:49,097 ‫ReactDOM 39 00:01:50,640 --> 00:01:52,267 ‫from 40 00:01:52,267 --> 00:01:57,267 ‫"react-dom/client". 41 00:01:58,050 --> 00:01:58,883 ‫All right? 42 00:01:58,883 --> 00:02:02,349 ‫And as I keep saving, somehow it keeps moving the file here 43 00:02:02,349 --> 00:02:04,053 ‫but nevermind. 44 00:02:04,920 --> 00:02:08,010 ‫So we just imported these two libraries, and again 45 00:02:08,010 --> 00:02:11,370 ‫remember how we imported basically these exact two 46 00:02:11,370 --> 00:02:14,820 ‫same libraries in the pure React lecture. 47 00:02:14,820 --> 00:02:17,790 ‫And in fact, I want to open up that file here 48 00:02:17,790 --> 00:02:19,950 ‫so that we can compare it. 49 00:02:19,950 --> 00:02:21,660 ‫So open, 50 00:02:21,660 --> 00:02:26,403 ‫and then on the desktop, pure React, then index.HTML. 51 00:02:27,870 --> 00:02:30,687 ‫And so remember here we import it, also React 52 00:02:30,687 --> 00:02:34,080 ‫and Reactdom, using these script texts. 53 00:02:34,080 --> 00:02:37,350 ‫But again here, these were installed using NPM 54 00:02:37,350 --> 00:02:40,070 ‫and here we are now importing them into our project 55 00:02:40,070 --> 00:02:43,500 ‫using the import syntax, which is coming directly 56 00:02:43,500 --> 00:02:44,970 ‫from JavaScript. 57 00:02:44,970 --> 00:02:48,363 ‫Next up, let's actually create our App component again. 58 00:02:49,470 --> 00:02:54,090 ‫So function App, and it wouldn't have to be called App 59 00:02:54,090 --> 00:02:56,070 ‫this is just a convention, 60 00:02:56,070 --> 00:02:57,090 ‫right? 61 00:02:57,090 --> 00:02:59,280 ‫What is necessary, is status component 62 00:02:59,280 --> 00:03:01,263 ‫starts with an upper case here. 63 00:03:02,430 --> 00:03:04,116 ‫So now let's return here, 64 00:03:04,116 --> 00:03:06,784 ‫again the same thing that we returned before 65 00:03:06,784 --> 00:03:11,220 ‫which is just

Hello React!

. 66 00:03:11,220 --> 00:03:14,880 ‫And now all we need to do is to render this to the dump. 67 00:03:14,880 --> 00:03:16,290 ‫And so once again 68 00:03:16,290 --> 00:03:19,680 ‫this is going to be similar to what we did here. 69 00:03:19,680 --> 00:03:23,610 ‫So we could even copy paste all of this here into our app 70 00:03:23,610 --> 00:03:28,610 ‫that we already have, but let's write it by hand. 71 00:03:29,310 --> 00:03:31,590 ‫So of course in the future we will not be writing all 72 00:03:31,590 --> 00:03:33,327 ‫of this by hand, but at least once 73 00:03:33,327 --> 00:03:34,920 ‫I want you to write all of this 74 00:03:34,920 --> 00:03:38,640 ‫by hand so that you actually know what is going on here. 75 00:03:38,640 --> 00:03:39,473 ‫All right? 76 00:03:40,980 --> 00:03:43,923 ‫So let's now create a so-called root. 77 00:03:46,230 --> 00:03:48,849 ‫And for that we use the ReactDOM library 78 00:03:48,849 --> 00:03:52,860 ‫on which there is a createRoot method. 79 00:03:52,860 --> 00:03:57,240 ‫And so now we select this root element. 80 00:03:57,240 --> 00:04:00,573 ‫Well not here of course, but in our public folder. 81 00:04:02,160 --> 00:04:04,140 ‫So here you have all this stuff 82 00:04:04,140 --> 00:04:06,630 ‫like this strange URL here. 83 00:04:06,630 --> 00:04:09,390 ‫And again, webpack will take care of all of this 84 00:04:09,390 --> 00:04:12,363 ‫like it will replace this URL right there. 85 00:04:13,427 --> 00:04:17,880 ‫But what we're looking for here is this div with this id. 86 00:04:17,880 --> 00:04:19,200 ‫So id="root". 87 00:04:19,200 --> 00:04:21,960 ‫So we are going to select this element so that 88 00:04:21,960 --> 00:04:25,293 ‫React can render our application inside of this div. 89 00:04:27,540 --> 00:04:29,373 ‫So document.getElementById. 90 00:04:33,570 --> 00:04:38,570 ‫Okay, and then let's do root.render. 91 00:04:39,000 --> 00:04:42,060 ‫And we could also have written it all in one line. 92 00:04:42,060 --> 00:04:46,500 ‫So without storing this here as an intermediary variable 93 00:04:46,500 --> 00:04:48,271 ‫but like this, it's a bit cleaner. 94 00:04:48,271 --> 00:04:52,593 ‫Okay? And then here we place our App, 95 00:04:53,850 --> 00:04:57,420 ‫give it a safe, and there it is. 96 00:04:57,420 --> 00:04:58,740 ‫Hello React! 97 00:04:58,740 --> 00:05:01,533 ‫Which is our nice app component right here. 98 00:05:02,460 --> 00:05:07,170 ‫So this is how we write React from scratch basically. 99 00:05:07,170 --> 00:05:10,890 ‫Now I just want to draw your attention that this is the way 100 00:05:10,890 --> 00:05:15,090 ‫that we render the root so that we basically render 101 00:05:15,090 --> 00:05:18,123 ‫our app in the Dom in React version 18. 102 00:05:19,590 --> 00:05:22,620 ‫So React v18. 103 00:05:22,620 --> 00:05:24,870 ‫But if you're seeing an older code base that is 104 00:05:24,870 --> 00:05:28,260 ‫before React 18, this worked in a different way. 105 00:05:28,260 --> 00:05:30,210 ‫So it looked a little bit different. 106 00:05:30,210 --> 00:05:32,534 ‫So let's just exemplify that here. 107 00:05:32,534 --> 00:05:36,420 ‫And you don't need to write this code here 108 00:05:36,420 --> 00:05:38,790 ‫I just want to quickly show it to you. 109 00:05:38,790 --> 00:05:41,470 ‫So before React 18, we would simply do 110 00:05:42,360 --> 00:05:45,154 ‫React.render 111 00:05:45,154 --> 00:05:48,513 ‫and then place the app in there. 112 00:05:50,160 --> 00:05:51,150 ‫All right? 113 00:05:51,150 --> 00:05:53,790 ‫And another change that we would have to do is 114 00:05:53,790 --> 00:05:55,440 ‫to get rid of this. 115 00:05:55,440 --> 00:06:00,440 ‫So this would be a React 17 app, but with these changes 116 00:06:00,480 --> 00:06:03,780 ‫so with having react-dom/client 117 00:06:03,780 --> 00:06:05,790 ‫and with rendering this way, 118 00:06:05,790 --> 00:06:08,610 ‫we made our app ready for React 18. 119 00:06:08,610 --> 00:06:10,620 ‫So we can now comment this one out, 120 00:06:10,620 --> 00:06:13,590 ‫and I will just leave it here as a reference. 121 00:06:13,590 --> 00:06:15,570 ‫Now, just one final thing that I want to talk 122 00:06:15,570 --> 00:06:18,023 ‫about here is strict mode. 123 00:06:18,023 --> 00:06:21,322 ‫So we can simply activate strict mode by, instead 124 00:06:21,322 --> 00:06:25,590 ‫of directly rendering the app component as a root component. 125 00:06:25,590 --> 00:06:29,700 ‫Wrapping this here into a strict mode component. 126 00:06:29,700 --> 00:06:32,960 ‫So let's write React.StrictMode. 127 00:06:34,890 --> 00:06:36,992 ‫And so this strict mode is basically a component 128 00:06:36,992 --> 00:06:41,992 ‫that is part of React and that we can take from React. 129 00:06:43,170 --> 00:06:45,030 ‫And so you see that automatically 130 00:06:45,030 --> 00:06:48,060 ‫VS code then closes this component. 131 00:06:48,060 --> 00:06:50,730 ‫So let's copy or cut this 132 00:06:50,730 --> 00:06:54,330 ‫from here and place it here, give it a safe. 133 00:06:54,330 --> 00:06:58,170 ‫And so the app is now wrapped inside of this strict mode. 134 00:06:58,170 --> 00:07:00,643 ‫And strict mode is really not a big deal. 135 00:07:00,643 --> 00:07:03,855 ‫The only thing that it does is that during development 136 00:07:03,855 --> 00:07:06,399 ‫it will render all components twice 137 00:07:06,399 --> 00:07:08,820 ‫in order to find certain bugs. 138 00:07:08,820 --> 00:07:10,620 ‫And also React will check 139 00:07:10,620 --> 00:07:14,730 ‫if we're using outdated parts of the React API. 140 00:07:14,730 --> 00:07:17,430 ‫So strict mode is nothing groundbreaking 141 00:07:17,430 --> 00:07:19,902 ‫but it's still a good idea to always activate it 142 00:07:19,902 --> 00:07:22,953 ‫when we develop React applications.