‫Wow.
‫Oh, there you are.
‫I didn't see you there.
‫All right.
‫You came back.
‫Great.
‫Hope you had a good break.
‫Because in this video, I'm going to show you the react dev tools.
‫OK, but before I go any further and show you those tools, I just want you to check out one thing.
‫Now, in the last couple of tutorials, we created this component and it had one element that this div
‫inside.
‫The render method.
‫This single div wrapped the other div.
‫But.
‫What if we want to say, for example, after this d'Hiv, we want to add H one tag and say hello?
‫OK.
‫So let's save this and save works.
‫So let's come back to the browser and see that it's not working.
‫What?
‫So if we look into the console, you can see that we have got these errors right here.
‫So let's have a look and see what's happening.
‫So what's happening here is that we've got two top level tags within the return statement.
‫And react doesn't like that.
‫Can you see that?
‫Yeah.
‫So once you to put everything in the return statement in one parent tag.
‫So we can't do this.
‫But by the way, we can get around it.
‫And that's by doing a div tag at the top and then get the closing tag and put it at the end.
‫You follow.
‫So shift these and now everything is contained within one parent tag.
‫See how it works now.
‫Awesome.
‫So we can't actually add multiple elements, but we can.
‫But everything within one single parent tag.
‫How's that?
‫Pretty cool.
‫So now I'm going to delete this whole thing.
‫And now I want to show you some of the react dev tools.
‫So I'm just going to zoom into the console right here, and you can see it on my toolbar that I have
‫the React tab.
‫Just click on it and you can see our app components and inside of it here, we can see our hemisphere
‫display component.
‫So it's showing the components in my application.
‫And not only does it show the component, but if you click on it, it's going to show you the props
‫and the state of that component.
‫Now you can expand it to see what's inside.
‫So now I want to show you how to download this reactive tool.
‫I hope you weren't clicking around and on your computer and saying, hey, I don't have that.
‫So you can use it when you're developing a react app.
‫So what you want to do is go to the.
‫We have a store and search for react.
‫Dev tools.
‫Now, it's right here, I have already installed it, but if you click on that, you should see an ad,
‫a chrome button.
‫And you just click on that and then it's gonna install it for you.
‫So if you ever need to do, then is just right, click the select inspect and then open up your console.
‫And then go to react, and it's going to show you the different components in the application.
‫Something is really cool tool that you can download.
‫It's really going to help you when you're going to develop react applications.
‫All right.
‫So that's that.
‫Let's take a break right here.
‫And guess what?
‫You come too far to quit now.
‫Let's move on to the next section.