When you visit a site that uses React, you can inspect the component tree that makes up a page. Learn more about the React DOM with the dev tools in the browser.
- [Instructor] In this video, we'll take a closer look…at the React tools that we previously installed.…Here, I've navigated to Airbnb.…Airbnb is a site that uses React, and I know this,…because I see the React developer tools icon…highlighted here in our tab.…So what I can do to inspect this, is similar to what I do…to inspect any HTML on a page when I'm using Chrome.…I'm going to open up the developer tools.…So I can open up Command + Option + J,…using my Mac, or if you're using a PC,…you can hit F12, or Ctrl + Shift + J.…
So once I do this, I'm going to see the Console.…Now, if I go next door to our Elements tab, I'll see all…of the different HTML elements that make up the page.…Then, if I go to the right arrow over here,…and I select React, I can see all of the different…components that make up this page.…So a React page is just a collection of components,…and the React developer tools show us…where these components live in the component hierarchy.…
So we're going to be using these developer tools quite a bit…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.