In this video, Eve shows you a few browser extensions and plugins that are helpful for you to have to ensure you work successfully with React. react-detector will highlight every time you visit a site that has React code in it. Also, the React Developer Tools extension will give you a sense of all of the React elements that make up a page. These extensions can be installed with Chrome, and also exist in Firefox.
- [Narrator] In an earlier video we set up our IDE.…Now lets go ahead and install a couple…useful React tools in our browser.…I'm using Chrome so I will be installing…these as Chrome extensions.…From the Chrome webstore…I'm going to search for React detector.…Notice too that I've selected the extensions…option from the left nav.…So when I search for React detector…this should bring me back this option here…and I'm going to select, add to Chrome.…I will say, add extension…and now this has been visibly installed here.…
So the great thing about the React detector…is any time I navigate to a website…that uses React, it's going to…display as blue.…But if I go back to a page that doesn't use React…you're not going to see that highlighted.…Next, I'm going to install…the React developer tools.…Since I've already searched for the React detector…React developer tools is right next to it.…So we'll say add this to Chrome also.…We will select add extension…and now this has been added as well.…
The React developer tools are going…
- 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
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?
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.