React Developer Tools

With React, we never touch the actual DOM directly, 0:00 React manages what it's rendered into the DOM and what should appear on the screen. 0:02 So it can be tricky to debug your UI in the browser. 0:07 For instance, how do you map the React component to your building, 0:10 to what you see the developer tools inspector? 0:14 Fortunately, the engineers at Facebook created the React Developer tools 0:17 extension to give you a bid productivity boost when working with React, 0:21 let's take a look. 0:25 React Dev tools is an extension that let's you inspect your 0:26 React component hierarchy in the Chrome and Firefox developer tools. 0:29 The first thing we'll do is download and install the tools. 0:34 I'll open a new tab and just Google React DevTools. 0:37 I'm using Chrome, so I'll click the link to the Chrome Web Store. 0:41 React Devtools is also available for Firefox and as a standalone app for 0:46 Safari, you can find the links to those in the teacher's notes with this video. 0:50 Next, click the green add to Chrome button to install the tools. 0:54 I have already installed them, so 0:59 now that they're installed any time I visit a website or app that's built using 1:01 React I'll see the React extension icon light up in my tool bar. 1:06 For example, if I switch over to the scoreboard app a tooltip 1:10 pops up letting me know that this page is using the development build of React. 1:14 And if we have a look at the React site, 1:19 it notifies us that this page is using the production build of React. 1:21 So now if you open your browser's developer tools, 1:28 you should see a new tab called React. 1:32 Click on the tab and you will see the full component tree that makes up our app. 1:35 This is the React code that underlies our UI. 1:41 You can inspect your component hierarchy similar to 1:44 how you inspect HTML elements in the Elements pane. 1:47 So the first thing we see is our App component. 1:50 Click the arrow to expand the component, we see the scoreboard, div, 1:53 and the child Header and Player components. 1:58 Expand the player component and we see its elements in child component, the Counter. 2:01 The tool offers handy shortcuts to help you be productive and 2:07 quickly debug your apps. 2:10 For example, you can use the arrow keys to navigate up and down your component tree. 2:12 You can right click any component, select Find DOM node, and 2:17 it will switch over to the Elements pane and show you the corresponding DOM node. 2:22 Another useful tip is that if you inspect a React element on 2:28 the page using the regular elements tab. 2:33 Then switch over to the React tab, 2:37 that element will be automatically highlighted in the React component tree. 2:40 Finally, one feature I like to use is the search bar to find components by name. 2:44 For example, 2:49 if I type Player into the search bar it will show me all the Player components. 2:50 Type Counter and I immediately see the Counter component. 2:56 And there's a whole lot more you can do with React Dev tools including inspecting 3:01 a component's properties and the state of your application or 3:05 its data over here in the right pane. 3:09 And you're gonna learn a whole lot more about properties and 3:11 states starting in the next video. 3:13 We're going to be using React Dev tools to understand more about how React works and 3:14 how our application is running. 3:20 So, I suggest you install them now. 3:22 Whenever I visit sites built with React, I like to inspect them with React Dev tools 3:24 to see how they were built, so I encourage you to do the same. 3:29 You'll often learn something new or pick up new tips along the way. 3:32 Now we have the basic shape of our application, however, it's static. 3:36 So in the next stage, you'll learn how to insert dynamic information 3:41 into your components with properties or props. 3:45 See you soon. 3:48