Original subtitles

So we had a look at error messages,

that we shouldn't panic when we read them,

we had a look at other approaches we can take,

to find and fix errors.

And we had a look at the browser developer tools.

Now, let's have a look at a dedicated tool,

which is available for React Development,

which can help us with React specific problems

and which can help us with understanding

our React Application better.

And that would be the React Dev Tools.

You can simply search for React Dev Tools

and you should find an entry here

on chrome.google.com.

They are also available for Firefox,

but I would strongly recommend

that you use Google Chrome, if you wanna

work with them, because they're a browser extension,

which you can add to the browser.

Now, I already did add them, but you can add them

here with a simple add button,

in case you didn't add them to your browser yet.

So you'll simply visit that page here,

in the Chrome Extensions Store.

Though, these tools, this extension is totally free.

You don't need to pay, no worries.

And you simply add it to your browser.

You might be prompted to restart

your browser thereafter, but once you added them

here in your browser dev tools,

you'll have two new tabs.

Components and Profiler.

Now we'll have a look at the Profiler

later in the course.

For now, let's focus on Components.

If you click on it, we see

a little Component tree here, on the right.

And that is what we're building with React right?

We're building a tree of Components.

So, it makes sense that we see that here.

And what's interesting here is,

that here we only see React Components.

Now in the browser, we got the elements tab.

And there we see the entire DOM,

as it was rendered by the browser.

And in the end, that's just a DOM,

that is implied by our Components.

So that can also be useful for

debugging our DOM and our UI.

But the difference to the Components tab here,

is that in the Components tab,

we see the actual React Components

and the Components structure,

that is responsible for this UI output.

And we see, for example, that we have

that root App Component.

And it's even getting highlighted on the left,

with the CourseInput Component,

which has the Button Component.

With the CourseGoalList Component,

with the different CourseGoalItems.

We can also click on those Components,

to get more information about them.

Here, for example, we already see that

a key is set, but then if we scroll down

for the CourseGoalItem, we actually see

a list of all props that it's getting.

That includes the children prop,

so the content passed between

the opening and closing tag,

the ID prop, the onDelete prop and this new prop,

which we can ignore.

For the onDelete prop, we for example,

see that the deleteItemHandler function,

is passed as a value.

For children, we see that it's the text of the task.

And if we scroll down further,

we see which Components were responsible

for rendering this.

And these Components are ordered,

depending on how close they are.

The top most Component here, is the Component

which directly rendered CourseGoalItem.

And the further down we go here,

the further away that Component is,

in the main Component tree.

Indeed CourseGoalList Component did render

the two CourseGoalItems, but of course

CourseGoalList then was rendered by App,

Which is why we see that here as well.

We also see the source code, where we can find

information about the CourseGoalItem.

And if we click on CourseGoalList here,

for example, we're taken to that Component.

Of course, we could have also clicked on it here.

You can also search for a Component here,

like for item, to highlight them and find them quicker.

And you can also configure what you see here.

The general theme, light mode, dark mode,

how it should be displayed.

And in general, you can play around

with the settings here, to for example,

display more information, less information,

or simply in a different style.

I prefer that style and therefore I'll keep it this way.

Now, what you'll also see, is that if you,

for example, go to the CourseInput,

you don't just see the props there,

but you also see the hooks

that are being used here.

And you see that in there,

we're using cue State hooks.

Remember that I mentioned that useState,

which we use to manage State is a so-called React hook.

And later, we'll learn about other hooks as well.

So this is a so-called React hook

and that's why it's showing up under

this hooks section here.

It's a State hook, which is responsible

for managing the State of course input.

And here we can see and actually also change

the current State.

For example, here, if I enter Master React,

you'll see that's reflected down there.

And if I add an exclamation mark here,

it's not reflected in the input,

because in our code, we're actually not feeding

the current value back into the input.

We could do that, by setting the value prop,

but we're not doing that here.

But nonetheless, if I now add the goal,

you see that the exclamation mark

is part of the text that was added here,

here it is.

Or here it was, since I clicked on it.

So we can change the State here.

And it really will have an effect on the UI.

On the App Component, we, for example,

see our array of Goals.

And if I change one of the Goals here,

if I change the text here, by adding

multiple exclamation marks, that is reflected here

on the left as well.

So that's another great tool for playing around

with your interface, with your State,

with your props and for understanding

how everything is connected and also

for trying out different use cases,

in different scenarios.

So that's the last tool I want to show you

in this module, because the React Dev Tools

can also be really useful,

when it comes to debugging

and analyzing your React Application.