‫From now on,
‫you will start coding on your own computer
‫and it's pretty much guaranteed that errors will happen
‫and that some things simply won't work.
‫And so, right off the bat,
‫I want to show you a few techniques
‫for dealing with these errors and problems.
‫So this is a really important lecture,
‫so please don't skip it.
‫So let's say that you're doing some change here in your code
‫and save it, and then you want to see the output.
‫But imagine that for some reason,
‫your page didn't update here.
‫So what do you do?
‫So when it happens, don't panic, but instead,
‫try out a few solutions, which I will tell you now.
‫And the first one is to make sure
‫that the application is actually running.
‫And believe me or not
‫this has actually happened to me before.
‫So I thought the app should be running
‫and I was doing some updates to the code,
‫changing something,
‫and I was wondering why the app was not reloading.
‫Then at some point,
‫I noticed that, well,
‫I actually hadn't even started the app.
‫And so this is actually something that can happen.
‫So if you don't have the app running, of course,
‫so if you didn't use "npm start" like I showed you earlier,
‫then, well of course your app cannot reload in the browser.
‫But if you're sure that it is actually running
‫but still not updating,
‫then one solution can be to stop the app and restart it.
‫So here is the tab in the terminal
‫where I currently have the app running.
‫And so in order to stop it, we use Control + C.
‫So on the Mac, that's Control + C
‫and on Windows it's also just Control + C.
‫Then on Windows I think it might ask you
‫if you actually want to stop
‫and then you can just type 'Y' and hit enter.
‫So with this, you have it stopped and then you can restart.
‫So that's then again "npm start"
‫which should then open up a new tab
‫and yeah, there we go.
‫And so
‫yeah, here it is.
‫And if I change something now
‫then it should be reflected immediately.
‫So, there it is.
‫And actually it's more common than you might think
‫that you have to do these kinds of things.
‫And that's why I really wanted
‫to include this lecture early on.
‫And what's also pretty common
‫is that sometimes all you have to do
‫is to do a hard reload here in the browser.
‫So just click this reloading button
‫because this automatic reload,
‫so the hot module replacement actually breaks all the time
‫for some reason.
‫And so then one of the solutions
‫is to just hard reload the browser.
‫Now another good tip that I can give you
‫is to always keep the terminal open here at all times.
‫And the same here for the dev tools
‫in the browser.
‫Well, it's not...
‫So inspecting, and then here that's a bit too big.
‫Yeah, then here, having the console open.
‫Also there's something called React dev tools
‫but we will talk about that a little bit later.
‫So it's good to keep these open
‫because then in case there are some unexpected errors
‫they will show up here in this console and also down here.
‫And also if you have this open,
‫you can always be sure that the app is running.
‫Can just maybe make it a little bit smaller
‫because, well, the window here is so small already,
‫otherwise, we almost can't see our code.
‫Now, I was talking about error messages before
‫and so sometimes these appear when you do something wrong.
‫So Create-React-App actually has some internal thing
‫which will automatically display errors right here on top.
‫So like on top on the window,
‫and also all of here. We show that to you.
‫So I will just write something here
‫which will create an error.
‫And so indeed we have the error here.
‫Well actually not here
‫but sometimes important errors do pop up here.
‫But we have this overlay over the entire app
‫which gives us this error message.
‫And so it's a good idea to then
‫take a look at this error message
‫and maybe try to understand what exactly went wrong.
‫So usually this first part here is not really important
‫but then here it tells us "adjacent JSX elements
‫must be wrapped in an enclosing tag.
‫Did you want a JSX fragment?"
‫And maybe if you don't really understand this,
‫you can just take this, copy,
‫open your new tab and google it.
‫And so this is now the power of React's huge community
‫because hundreds, if not thousands, of people
‫before you have had the same problem and have googled it,
‫or have like asked a question on Stack Overflow.
‫And so you will find your answer there.
‫So this one is a little bit older, I saw earlier.
‫So in
‫2016.
‫Yeah, so you should usually find something a bit more recent
‫like this one here from 2020.
‫But yeah, so here we are not trying
‫to solve a specific problem.
‫I was just mentioning that it's many times a good idea
‫to google these error messages right here.
‫So in this case, it's really not allowed
‫to return more than one element.
‫So here we are returning the h1 and the p
‫and that's not allowed in React, so just delete that
‫and then the error will disappear.
‫Another important tip is to always work with ESLint.
‫So ESLint is enabled by default.
‫For example, if you do this,
‫like const x = 'jonas'
‫and give it a save,
‫then immediately you get this warning here.
‫So then you can hover and it will warn you
‫that x is declared, but its value is never read.
‫And this is just one of countless examples
‫and situations in which ESLint can warn you
‫that you're about to do something
‫that you're not supposed to.
‫Because, if you have a variable that you're not using,
‫it means that probably somewhere else
‫you declared the wrong variable
‫that you actually didn't want to,
‫right?
‫And by the way, these problems,
‫they also appear down here in this Problems tab.
‫So this is also very useful down here.
‫So whenever you have some issue like this
‫so these yellow lines under some of your code,
‫you should probably check out what's going on there.
‫Now talking here about these tabs down here
‫sometimes the Prettier extension stops working
‫for some reason.
‫And when that happens
‫it's a good idea to come here to this Output tab.
‫And then here you can select
‫one of these processes that is running inside your VS code.
‫For example, as I was saying, Prettier.
‫So here it looks as if everything is working fine
‫but sometimes it will show you an error here
‫and then you can try to fix that.
‫And the same is true for ESLint.
‫So if you notice that ESLint
‫for some reason stopped working,
‫you can come here and check out if there is any problem.
‫So this here even looks as though there is some problem.
‫Yeah, there is an error here, but well, it still works.
‫So yeah, we don't need to worry about that in this case.
‫Okay? But let's come back to our terminal,
‫which is the one that we want open most of the time.
‫So, if everything looks correct in your code
‫and if you did everything that I told you
‫but still your code is not working,
‫it probably means that you have some bug in your code
‫because it is different than the one
‫that I'm showing you in the video.
‫And so in that case, the best thing to do
‫is to open up the final code for each of the projects,
‫so the one that we downloaded in the beginning
‫and then simply try to compare that with my code.
‫And doing so should then enable you
‫to find the bug that you have in your code.
‫And speaking of bugs,
‫actually, I introduced a bug here in this render part here.
‫So the way that we rendered before React 18
‫remember is this React.render,
‫but nowhere we are telling here
‫where to render the app component.
‫And so again, we need to select that root element
‫and actually place that here as a second argument.
‫So just to fix this here,
‫but again you are not going to write this yourself
‫but maybe you will work on an older code base at some point,
‫which uses an older version of React.
‫And so then this is how that project will render
‫the root element into your application.
‫And by the way,
‫you can see which React version you're using right here
‫in the dependencies array.
‫And so in this case, we are using React 18.2.
‫Or at least, I am.
‫So if you're watching this far in the future
‫then probably some other version has already come out.
‫But all of this, what we're talking about here
‫will of course,
‫apply to probably most of the future versions.
‫And that's actually it.
‫So that's the list of tips that I have for you
‫for dealing with problems that will sooner or later arrive
‫as you start writing your own React applications,
‫and even while you follow this course.