1 00:00:01,140 --> 00:00:01,973 ‫From now on, 2 00:00:01,973 --> 00:00:04,560 ‫you will start coding on your own computer 3 00:00:04,560 --> 00:00:08,340 ‫and it's pretty much guaranteed that errors will happen 4 00:00:08,340 --> 00:00:11,100 ‫and that some things simply won't work. 5 00:00:11,100 --> 00:00:13,290 ‫And so, right off the bat, 6 00:00:13,290 --> 00:00:15,330 ‫I want to show you a few techniques 7 00:00:15,330 --> 00:00:18,450 ‫for dealing with these errors and problems. 8 00:00:18,450 --> 00:00:21,390 ‫So this is a really important lecture, 9 00:00:21,390 --> 00:00:23,073 ‫so please don't skip it. 10 00:00:24,570 --> 00:00:28,260 ‫So let's say that you're doing some change here in your code 11 00:00:28,260 --> 00:00:31,350 ‫and save it, and then you want to see the output. 12 00:00:31,350 --> 00:00:32,940 ‫But imagine that for some reason, 13 00:00:32,940 --> 00:00:35,700 ‫your page didn't update here. 14 00:00:35,700 --> 00:00:37,380 ‫So what do you do? 15 00:00:37,380 --> 00:00:40,590 ‫So when it happens, don't panic, but instead, 16 00:00:40,590 --> 00:00:44,130 ‫try out a few solutions, which I will tell you now. 17 00:00:44,130 --> 00:00:46,500 ‫And the first one is to make sure 18 00:00:46,500 --> 00:00:49,500 ‫that the application is actually running. 19 00:00:49,500 --> 00:00:50,700 ‫And believe me or not 20 00:00:50,700 --> 00:00:53,010 ‫this has actually happened to me before. 21 00:00:53,010 --> 00:00:55,170 ‫So I thought the app should be running 22 00:00:55,170 --> 00:00:57,930 ‫and I was doing some updates to the code, 23 00:00:57,930 --> 00:00:59,250 ‫changing something, 24 00:00:59,250 --> 00:01:02,400 ‫and I was wondering why the app was not reloading. 25 00:01:02,400 --> 00:01:03,570 ‫Then at some point, 26 00:01:03,570 --> 00:01:05,760 ‫I noticed that, well, 27 00:01:05,760 --> 00:01:08,160 ‫I actually hadn't even started the app. 28 00:01:08,160 --> 00:01:11,490 ‫And so this is actually something that can happen. 29 00:01:11,490 --> 00:01:14,700 ‫So if you don't have the app running, of course, 30 00:01:14,700 --> 00:01:19,020 ‫so if you didn't use "npm start" like I showed you earlier, 31 00:01:19,020 --> 00:01:23,250 ‫then, well of course your app cannot reload in the browser. 32 00:01:23,250 --> 00:01:25,950 ‫But if you're sure that it is actually running 33 00:01:25,950 --> 00:01:27,450 ‫but still not updating, 34 00:01:27,450 --> 00:01:31,653 ‫then one solution can be to stop the app and restart it. 35 00:01:32,640 --> 00:01:35,220 ‫So here is the tab in the terminal 36 00:01:35,220 --> 00:01:37,620 ‫where I currently have the app running. 37 00:01:37,620 --> 00:01:41,283 ‫And so in order to stop it, we use Control + C. 38 00:01:42,120 --> 00:01:44,010 ‫So on the Mac, that's Control + C 39 00:01:44,010 --> 00:01:47,100 ‫and on Windows it's also just Control + C. 40 00:01:47,100 --> 00:01:49,320 ‫Then on Windows I think it might ask you 41 00:01:49,320 --> 00:01:50,730 ‫if you actually want to stop 42 00:01:50,730 --> 00:01:53,730 ‫and then you can just type 'Y' and hit enter. 43 00:01:53,730 --> 00:01:57,600 ‫So with this, you have it stopped and then you can restart. 44 00:01:57,600 --> 00:02:00,873 ‫So that's then again "npm start" 45 00:02:01,830 --> 00:02:04,030 ‫which should then open up a new tab 46 00:02:05,430 --> 00:02:07,170 ‫and yeah, there we go. 47 00:02:07,170 --> 00:02:08,610 ‫And so 48 00:02:08,610 --> 00:02:09,873 ‫yeah, here it is. 49 00:02:12,150 --> 00:02:13,410 ‫And if I change something now 50 00:02:13,410 --> 00:02:16,590 ‫then it should be reflected immediately. 51 00:02:16,590 --> 00:02:18,210 ‫So, there it is. 52 00:02:18,210 --> 00:02:20,820 ‫And actually it's more common than you might think 53 00:02:20,820 --> 00:02:23,310 ‫that you have to do these kinds of things. 54 00:02:23,310 --> 00:02:25,260 ‫And that's why I really wanted 55 00:02:25,260 --> 00:02:27,810 ‫to include this lecture early on. 56 00:02:27,810 --> 00:02:29,490 ‫And what's also pretty common 57 00:02:29,490 --> 00:02:31,620 ‫is that sometimes all you have to do 58 00:02:31,620 --> 00:02:34,410 ‫is to do a hard reload here in the browser. 59 00:02:34,410 --> 00:02:36,570 ‫So just click this reloading button 60 00:02:36,570 --> 00:02:38,880 ‫because this automatic reload, 61 00:02:38,880 --> 00:02:42,870 ‫so the hot module replacement actually breaks all the time 62 00:02:42,870 --> 00:02:44,070 ‫for some reason. 63 00:02:44,070 --> 00:02:45,720 ‫And so then one of the solutions 64 00:02:45,720 --> 00:02:48,450 ‫is to just hard reload the browser. 65 00:02:48,450 --> 00:02:50,400 ‫Now another good tip that I can give you 66 00:02:50,400 --> 00:02:53,880 ‫is to always keep the terminal open here at all times. 67 00:02:53,880 --> 00:02:55,690 ‫And the same here for the dev tools 68 00:02:57,480 --> 00:02:58,680 ‫in the browser. 69 00:02:58,680 --> 00:03:00,450 ‫Well, it's not... 70 00:03:00,450 --> 00:03:05,193 ‫So inspecting, and then here that's a bit too big. 71 00:03:06,300 --> 00:03:09,270 ‫Yeah, then here, having the console open. 72 00:03:09,270 --> 00:03:11,850 ‫Also there's something called React dev tools 73 00:03:11,850 --> 00:03:14,200 ‫but we will talk about that a little bit later. 74 00:03:15,090 --> 00:03:16,980 ‫So it's good to keep these open 75 00:03:16,980 --> 00:03:20,070 ‫because then in case there are some unexpected errors 76 00:03:20,070 --> 00:03:24,000 ‫they will show up here in this console and also down here. 77 00:03:24,000 --> 00:03:25,980 ‫And also if you have this open, 78 00:03:25,980 --> 00:03:29,280 ‫you can always be sure that the app is running. 79 00:03:29,280 --> 00:03:31,560 ‫Can just maybe make it a little bit smaller 80 00:03:31,560 --> 00:03:35,130 ‫because, well, the window here is so small already, 81 00:03:35,130 --> 00:03:38,160 ‫otherwise, we almost can't see our code. 82 00:03:38,160 --> 00:03:41,220 ‫Now, I was talking about error messages before 83 00:03:41,220 --> 00:03:45,060 ‫and so sometimes these appear when you do something wrong. 84 00:03:45,060 --> 00:03:49,260 ‫So Create-React-App actually has some internal thing 85 00:03:49,260 --> 00:03:53,760 ‫which will automatically display errors right here on top. 86 00:03:53,760 --> 00:03:55,650 ‫So like on top on the window, 87 00:03:55,650 --> 00:03:59,103 ‫and also all of here. We show that to you. 88 00:03:59,940 --> 00:04:02,910 ‫So I will just write something here 89 00:04:02,910 --> 00:04:05,130 ‫which will create an error. 90 00:04:05,130 --> 00:04:08,250 ‫And so indeed we have the error here. 91 00:04:08,250 --> 00:04:09,750 ‫Well actually not here 92 00:04:09,750 --> 00:04:12,900 ‫but sometimes important errors do pop up here. 93 00:04:12,900 --> 00:04:15,540 ‫But we have this overlay over the entire app 94 00:04:15,540 --> 00:04:18,330 ‫which gives us this error message. 95 00:04:18,330 --> 00:04:20,430 ‫And so it's a good idea to then 96 00:04:20,430 --> 00:04:22,260 ‫take a look at this error message 97 00:04:22,260 --> 00:04:26,100 ‫and maybe try to understand what exactly went wrong. 98 00:04:26,100 --> 00:04:28,860 ‫So usually this first part here is not really important 99 00:04:28,860 --> 00:04:31,830 ‫but then here it tells us "adjacent JSX elements 100 00:04:31,830 --> 00:04:34,470 ‫must be wrapped in an enclosing tag. 101 00:04:34,470 --> 00:04:37,230 ‫Did you want a JSX fragment?" 102 00:04:37,230 --> 00:04:39,570 ‫And maybe if you don't really understand this, 103 00:04:39,570 --> 00:04:41,550 ‫you can just take this, copy, 104 00:04:41,550 --> 00:04:43,980 ‫open your new tab and google it. 105 00:04:43,980 --> 00:04:47,580 ‫And so this is now the power of React's huge community 106 00:04:47,580 --> 00:04:50,580 ‫because hundreds, if not thousands, of people 107 00:04:50,580 --> 00:04:54,690 ‫before you have had the same problem and have googled it, 108 00:04:54,690 --> 00:04:58,350 ‫or have like asked a question on Stack Overflow. 109 00:04:58,350 --> 00:05:00,693 ‫And so you will find your answer there. 110 00:05:02,520 --> 00:05:05,883 ‫So this one is a little bit older, I saw earlier. 111 00:05:06,830 --> 00:05:08,340 ‫So in 112 00:05:08,340 --> 00:05:09,173 ‫2016. 113 00:05:09,173 --> 00:05:13,080 ‫Yeah, so you should usually find something a bit more recent 114 00:05:13,080 --> 00:05:14,973 ‫like this one here from 2020. 115 00:05:16,020 --> 00:05:17,730 ‫But yeah, so here we are not trying 116 00:05:17,730 --> 00:05:19,350 ‫to solve a specific problem. 117 00:05:19,350 --> 00:05:22,770 ‫I was just mentioning that it's many times a good idea 118 00:05:22,770 --> 00:05:26,250 ‫to google these error messages right here. 119 00:05:26,250 --> 00:05:28,740 ‫So in this case, it's really not allowed 120 00:05:28,740 --> 00:05:31,380 ‫to return more than one element. 121 00:05:31,380 --> 00:05:34,110 ‫So here we are returning the h1 and the p 122 00:05:34,110 --> 00:05:37,890 ‫and that's not allowed in React, so just delete that 123 00:05:37,890 --> 00:05:40,680 ‫and then the error will disappear. 124 00:05:40,680 --> 00:05:45,090 ‫Another important tip is to always work with ESLint. 125 00:05:45,090 --> 00:05:48,900 ‫So ESLint is enabled by default. 126 00:05:48,900 --> 00:05:50,700 ‫For example, if you do this, 127 00:05:50,700 --> 00:05:54,360 ‫like const x = 'jonas' 128 00:05:54,360 --> 00:05:55,590 ‫and give it a save, 129 00:05:55,590 --> 00:05:58,140 ‫then immediately you get this warning here. 130 00:05:58,140 --> 00:06:00,900 ‫So then you can hover and it will warn you 131 00:06:00,900 --> 00:06:04,440 ‫that x is declared, but its value is never read. 132 00:06:04,440 --> 00:06:06,990 ‫And this is just one of countless examples 133 00:06:06,990 --> 00:06:10,200 ‫and situations in which ESLint can warn you 134 00:06:10,200 --> 00:06:11,700 ‫that you're about to do something 135 00:06:11,700 --> 00:06:13,080 ‫that you're not supposed to. 136 00:06:13,080 --> 00:06:16,560 ‫Because, if you have a variable that you're not using, 137 00:06:16,560 --> 00:06:18,540 ‫it means that probably somewhere else 138 00:06:18,540 --> 00:06:20,430 ‫you declared the wrong variable 139 00:06:20,430 --> 00:06:22,113 ‫that you actually didn't want to, 140 00:06:23,280 --> 00:06:24,870 ‫right? 141 00:06:24,870 --> 00:06:26,910 ‫And by the way, these problems, 142 00:06:26,910 --> 00:06:30,360 ‫they also appear down here in this Problems tab. 143 00:06:30,360 --> 00:06:32,790 ‫So this is also very useful down here. 144 00:06:32,790 --> 00:06:35,160 ‫So whenever you have some issue like this 145 00:06:35,160 --> 00:06:37,890 ‫so these yellow lines under some of your code, 146 00:06:37,890 --> 00:06:40,713 ‫you should probably check out what's going on there. 147 00:06:42,090 --> 00:06:47,090 ‫Now talking here about these tabs down here 148 00:06:47,250 --> 00:06:50,010 ‫sometimes the Prettier extension stops working 149 00:06:50,010 --> 00:06:51,030 ‫for some reason. 150 00:06:51,030 --> 00:06:52,140 ‫And when that happens 151 00:06:52,140 --> 00:06:55,830 ‫it's a good idea to come here to this Output tab. 152 00:06:55,830 --> 00:06:57,660 ‫And then here you can select 153 00:06:57,660 --> 00:07:01,590 ‫one of these processes that is running inside your VS code. 154 00:07:01,590 --> 00:07:04,503 ‫For example, as I was saying, Prettier. 155 00:07:06,450 --> 00:07:11,010 ‫So here it looks as if everything is working fine 156 00:07:11,010 --> 00:07:13,470 ‫but sometimes it will show you an error here 157 00:07:13,470 --> 00:07:15,510 ‫and then you can try to fix that. 158 00:07:15,510 --> 00:07:17,940 ‫And the same is true for ESLint. 159 00:07:17,940 --> 00:07:19,590 ‫So if you notice that ESLint 160 00:07:19,590 --> 00:07:21,540 ‫for some reason stopped working, 161 00:07:21,540 --> 00:07:24,573 ‫you can come here and check out if there is any problem. 162 00:07:26,880 --> 00:07:29,680 ‫So this here even looks as though there is some problem. 163 00:07:30,630 --> 00:07:33,873 ‫Yeah, there is an error here, but well, it still works. 164 00:07:35,230 --> 00:07:38,030 ‫So yeah, we don't need to worry about that in this case. 165 00:07:38,970 --> 00:07:41,430 ‫Okay? But let's come back to our terminal, 166 00:07:41,430 --> 00:07:44,523 ‫which is the one that we want open most of the time. 167 00:07:45,930 --> 00:07:48,930 ‫So, if everything looks correct in your code 168 00:07:48,930 --> 00:07:51,540 ‫and if you did everything that I told you 169 00:07:51,540 --> 00:07:53,820 ‫but still your code is not working, 170 00:07:53,820 --> 00:07:57,180 ‫it probably means that you have some bug in your code 171 00:07:57,180 --> 00:07:59,190 ‫because it is different than the one 172 00:07:59,190 --> 00:08:00,780 ‫that I'm showing you in the video. 173 00:08:00,780 --> 00:08:03,240 ‫And so in that case, the best thing to do 174 00:08:03,240 --> 00:08:07,470 ‫is to open up the final code for each of the projects, 175 00:08:07,470 --> 00:08:10,200 ‫so the one that we downloaded in the beginning 176 00:08:10,200 --> 00:08:14,220 ‫and then simply try to compare that with my code. 177 00:08:14,220 --> 00:08:16,590 ‫And doing so should then enable you 178 00:08:16,590 --> 00:08:19,620 ‫to find the bug that you have in your code. 179 00:08:19,620 --> 00:08:20,940 ‫And speaking of bugs, 180 00:08:20,940 --> 00:08:25,940 ‫actually, I introduced a bug here in this render part here. 181 00:08:27,120 --> 00:08:30,360 ‫So the way that we rendered before React 18 182 00:08:30,360 --> 00:08:32,850 ‫remember is this React.render, 183 00:08:32,850 --> 00:08:34,740 ‫but nowhere we are telling here 184 00:08:34,740 --> 00:08:38,250 ‫where to render the app component. 185 00:08:38,250 --> 00:08:42,300 ‫And so again, we need to select that root element 186 00:08:42,300 --> 00:08:45,273 ‫and actually place that here as a second argument. 187 00:08:46,560 --> 00:08:48,750 ‫So just to fix this here, 188 00:08:48,750 --> 00:08:51,690 ‫but again you are not going to write this yourself 189 00:08:51,690 --> 00:08:55,350 ‫but maybe you will work on an older code base at some point, 190 00:08:55,350 --> 00:08:57,810 ‫which uses an older version of React. 191 00:08:57,810 --> 00:09:01,350 ‫And so then this is how that project will render 192 00:09:01,350 --> 00:09:04,710 ‫the root element into your application. 193 00:09:04,710 --> 00:09:05,543 ‫And by the way, 194 00:09:05,543 --> 00:09:08,880 ‫you can see which React version you're using right here 195 00:09:08,880 --> 00:09:10,470 ‫in the dependencies array. 196 00:09:10,470 --> 00:09:14,520 ‫And so in this case, we are using React 18.2. 197 00:09:14,520 --> 00:09:15,510 ‫Or at least, I am. 198 00:09:15,510 --> 00:09:17,970 ‫So if you're watching this far in the future 199 00:09:17,970 --> 00:09:21,390 ‫then probably some other version has already come out. 200 00:09:21,390 --> 00:09:23,940 ‫But all of this, what we're talking about here 201 00:09:23,940 --> 00:09:24,773 ‫will of course, 202 00:09:24,773 --> 00:09:29,310 ‫apply to probably most of the future versions. 203 00:09:29,310 --> 00:09:31,320 ‫And that's actually it. 204 00:09:31,320 --> 00:09:34,230 ‫So that's the list of tips that I have for you 205 00:09:34,230 --> 00:09:38,400 ‫for dealing with problems that will sooner or later arrive 206 00:09:38,400 --> 00:09:41,610 ‫as you start writing your own React applications, 207 00:09:41,610 --> 00:09:43,743 ‫and even while you follow this course.