Working with React elements in React Developer Tools

Once you've installed React Developer Tools in Chrome, you'll see a button in the toolbar located to the right of the browser address bar. Here's what mine looks like:

I have several buttons for browser extensions here. You can see the React Developer Tools button at the far right—the one with the React logo. When the button is greyed-out like this, it means that you're not currently on a page running a React application. Go ahead and try clicking on it while you're on some random page:

Now let's use create-react-app to create a new application, the same process you've been following throughout this book:

create-react-app finding-and-selecting-components

Now fire up the development server:

npm start

This should take you directly to the browser page with your React application loaded up in a new tab. Now the React Developer Tools button should look different:

There you go. Since you're on a page that's running a React application, the React Developer...