Join Eve Porcello for an in-depth discussion in this video Inspecting React sites, part of React.js Essential Training.
- [Instructor] Now that we've installed the React Developer Tools, let's take a closer look at how these work. First, I've navigated to a website that uses React, like Airbnb. We see that React is on the page because we see the icon in the search bar is highlighted. Next, I want to go ahead and open up the Developer Tools. On a Mac I can use Command + Option + J. If you're on a PC then you can use F12 or Control + Shift + J. So once open, we're going to see our Console, but I can also click over to our React tab over here, and this is going to show me all of the different components that make up this page.
Now, if the site is using React pretty heavily and it has a lot of content like Airbnb, this can be a little bit overwhelming. But, I want to show you a little trick here that'll make this easier to make sense of. I'm going to right click on Experiences, and I'm going to click Inspect. Now you may have done this already using the Elements tab to figure out what's going on with your HTML elements. But, this highlights the span experiences, if we click over to the React tab, it's going to automatically highlight that exact same span.
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.