All language subtitles for 3. Before We Start Coding Debugging

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 that happens, don't panic, but instead try out a few solutions which 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.

But then at some point I noticed that, well, I actually hadn't even started the app, 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 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.

Uh, 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 the 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.

You 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 elements must be wrapped in an enclosing tag.

Did you want a fragment?

And maybe if you don't really understand this, you can just take this copy, open a new tab and Google

it.

And so this is now the power of React.

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 StackOverflow.

And so you will find your answer there.

So this one is a little bit older.

I saw earlier it's from 20.

16.

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 H one 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 equals 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 we're talking here about this 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 was 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 render it before React 18 remember is this react dot render.

But nowhere we are telling here where to render the app component.

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.