You can enhance your experience as a React developer by downloading the React developer tools. These can be used with Chrome or Firefox to view a component tree and inspect props and state.
- [Instructor] Let's go ahead…and install the React Developer Tools.…The React Developer Tools are a browser extension…that you can install to explore sites,…your own or other people's, that use React.…So let's go ahead and find these.…I'm just going to search Chrome for Chrome extensions.…This is typically the fastest way…to bring us to the Chrome Web Store.…And then, once I click on this link,…we should see the option to search…here on the left-hand side.…I can say React Developer Tools…and the first option here is what we want to add.…
So if I say Add to Chrome and we allow it…to add the extension, it lets us know…that React Developer Tools has been added to Chrome.…If you're a Firefox user,…I have some good news for you, too.…You can install the React Developer Tools as add-ons.…In the next video, we'll use these dev tools…to further inspect a site that uses React.…
Author
Eve Porcello
Released
12/18/2018- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
Duration
Views
-
Introduction
-
1. What Is React?
-
What is React?59s
-
Inspect React sites1m 31s
-
-
2. Introduction to React Elements
-
Install create-react-app1m 28s
-
Generate a project3m 2s
-
Create React elements4m 20s
-
-
3. React Components
-
Create a React component2m 16s
-
Add component properties3m 35s
-
Add custom methods1m 39s
-
Create function components3m 53s
-
-
4. Props and State
-
Compose components4m 48s
-
Display child components4m 42s
-
Introducing state3m 30s
-
Using setState4m 16s
-
Pass state as props2m 58s
-
Conditional rendering3m 5s
-
-
5. Additional Library Features
-
Component life cycle3m 10s
-
Fetching data4m 43s
-
Accessibility2m 6s
-
Forms4m 7s
-
Default props3m 29s
-
PropTypes3m 56s
-
Modularizing code3m 58s
-
Build the app2m 1s
-
-
Conclusion
-
Next steps36s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Set up Chrome tools for React