Join Eve Porcello for an in-depth discussion in this video Setting up Chrome tools for React, part of React.js Essential Training.
- [Instructor] In an earlier video, we set up our IDE. Now, let's go ahead and install the React Developer Tool so we can work more efficiently on React projects. I'm using Chrome, so I'm going to install the developer tools as a Chrome extension. I'm just going to look for the Chrome web store. In the Chrome web store, there's a whole list of browser extensions that you can use. Right up here in the upper left-hand corner though, I'm going to search for React Developer Tools.
Excellent! The first of these is what I want to add, so I'm going to click this Add to Chrome button. I'm going to allow it to add this extension. It looks like this has been added to Chrome, so we see this little icon over here. Perfect! If you're a Firefox user, I have some good news for you also. You can install the React Developer Tools as a Firefox add-on. In the next video, we'll use this tool to further inspect a site that uses react.
- 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.
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.