Join Eve Porcello for an in-depth discussion in this video Setting up React tools with Chrome, part of Learn React.js: The Basics.
- View Offline
- [Instructor] React works well in all browsers, but there are some great developer tools available as Chrome extensions. To install these extensions, you just need to navigate to the Chrome web store in the Chrome browser. The first extension we'll install, is the React Detector. So you can just search for up in the upper left hand corner. So we'll search for React Detector. Once this loads, we're gonna see the Add To Chrome next to the React Detector. And what this is going to do is it'll let you as you browse the internet, it'll let you know which websites are using React.
So, let's go ahead and add that. Great! So now that that's been added to Chrome, you'll see the next listing here as React Developer Tools. So, I'm gonna also install these, add to Chrome, click Add Extension, and then those should be installed as well. Perfect! So, I'm gonna now open a new window and this is going to open the Airbnb website. Now the Airbnb website is a website that uses React, so we see as soon as I reload this, that we have the React Detector activated here.
We also see the Developer Tools. So if I hit Cmd + Opt + J, and that's Control-Shift-J on the PC, you're gonna see a new tab here in your Developer Tools. So if I click on React, this is going to show me all of the React elements and I can compare those to the actual DOM. So we'll be using this React Developer tab quite a bit throughout the course, and it'll be very useful for you as you're working on your own React projects. So there we go, our Chrome browser is set up and ready to develop some real projects using React.
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Working with PropTypes
- Adding child elements
- Mounting and updating components
- Creating a React.js app