React Developer Tools3:49 with Guil Hernandez
With React, we never touch the actual DOM directly. React only manages what gets rendered into the DOM, so it can be tricky to debug your UI in the browser. The React Developer Tools extension gives you a big productivity boost when working with React. It lets you inspect your React component hierarchy in the Chrome and Firefox 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
You need to sign up for Treehouse in order to download course files.Sign up