All language subtitles for 002 Understanding React Error Messages_en

Let's start with error messages.

Attached, you find a project, this project here

which is a slightly altered version,

of the project we worked on over the last modules.

Now in this attached project, I added a couple of errors,

a couple of problems.

And therefore if you run NPM install,

and thereafter NPM start,

you will immediately get an error here in your terminal.

If you visit the application in the browser

you will also basically get the same error output there,

instead of the application.

And that is a common thing.

Sometimes when you're writing code, you get errors.

Errors which React catches

or the React development process catches and froze at you.

And as I mentioned before, often

in the Q and A section of my courses, for example

I see students who immediately panic,

when they see an error message,

and they don't read it themselves.

They don't try to solve it themselves.

Instead, they immediately create a new thread

and ask for help.

This will not help you as a developer.

This will not make you a better developer.

It will actually make you a worse developer.

You need to be able to understand

and solve errors on your own.

So let's for example, have a look at this error message.

It failed to compile

and that's why we can't see the application.

And the problem we have is that we have a parsing error.

Adjacent JSX elements,

must be wrapped in an in closing tag.

Did you want a JSX fragment?

Okay. We haven't heard about JSX fragments yet.

This is something I'll cover later in the course.

But we also have that first part

and we can make sense of that.

Adjacent, which means side-by-side JSX elements,

must be wrapped in an in closing tag.

And we also get a hint at the file.

And the line of code this error is stemming from.

We even see the code snippet here below the message.

We see that it comes from app JS,

and there line 43, column seven.

That column part is not that important, but line 43.

And if I go to my app JS file, we see here, line 43.

Even my IDE detects this error.

Now as a side note, this is an error my IDE able to detect.

It won't detect all React errors though.

So sometimes you get an error,

which is not showing up in your IDE.

But here I get an error which has shown in the IDE,

which has also shown in the snippet

which is pointed at, by this line code here.

And which I also see here in the browser.

It also shows me that snippet,

that file name and that line information.

I get all of that here as well.

So what is wrong here?

Well, there seems to be a rule in React that forces us

to basically wrap neighboring side-by-side elements,

in one surrounding element.

And here, the problem is that we have a section,

next to a section.

And such adjacent JSX element,

which you return are not allowed.

Instead, you need to wrap them in one root element.

Now in there, you can have side by side elements.

But whenever you return JSX or use store JSX and a variable,

you must only have one root element in there,

which then can wrap adjacent elements.

That is a hard rule you have in React.

And as a side note,

and I will dive into that in more detail later.

But as a side note, we have that rule,

because behind the scenes,

this is this React create element code,

I showed you earlier.

And you can't have two statements side by side,

being returned by one return statement either,

for example.

And that is what two sections, two adjacent sections

would be translated to.

And that's the reason.

But we'll have a look at that in more detail, later.

But this is an error we are able to fix,

even without fully understanding where it's coming from.

Because the error message clearly tells us,

that we need an enclosing, so a rapping tag.

And as soon as they do add such a tag, for example, a div,

I'm able to save this and it now compiled successfully

and my app is back up and running.

So that is an example of a React error message,

which we just had to read, and we were able to solve it.

Now our common mistakes that are often made are, for example

incorrect names of functions you're pointing at.

Let's say here,

we're pointing at the addGoalsHandler function.

When it's actually named addGoalHandler.

A simple typo.

Again, my IDE detects it.

It gives me a clear indicator that something's wrong here.

And therefore we should check this

and check it for typos, for example.

But if I would save it nonetheless,

again we get a compilation error also here.

And we see that addGoalsHandler is not defined.

Again, this is a pretty clear error message.

We clearly are trying to use something, some variable,

which isn't found by React.

And then again, you should go to that place

and check why it's not found.

Maybe you have a typo.

Maybe you forgot to define such a function

or variable altogether.

So here it's a typo.

If you fix it, it compiles again.

So don't panic, read error messages,

have a look at the line or the file it's coming from,

have a look at the code snippet it might be showing you

and then look at the problematic code part,

at the problematic code snippet.

Look at the error message,

connect the error message to the snippet it's pointing at,

and you will be able to solve most errors.