Packt+ | Advance your knowledge in tech

You're reading from React 16 Tooling Master essential cutting-edge tools, such as create-react-app, Jest, and Flow

Product type Paperback

Published in Apr 2018

Publisher Packt

ISBN-13 9781788835015

Length 298 pages

Edition 1st Edition

Languages

JavaScript

Tools

Flow

Concepts

Front End Web Development

Authors (2):

Christopher Pitt

Adam Boduch

View More author details

Table of Contents (12) Chapters

1. Creating a Personalized React Development Ecosystem

2. Efficiently Bootstrapping React Applications with Create React App FREE CHAPTER

3. Development Mode and Mastering Hot Reloading

4. Optimizing Test-Driven React Development

5. Streamlining Development and Refactoring with Type-Safe React Components

6. Enforcing Code Quality to Improve Maintainability

7. Isolating Components with Storybook

8. Debugging Components in the Browser

9. Instrumenting Application State with Redux

10. Building and Deploying Static React Sites with Gatsby

11. Building and Deploying React Applications with Docker Containers

12. Another Book You May Enjoy

Leave a review – let other readers know what you think

Installing the React Developer Tools add-on

The first step to getting started with React tooling is to install the React Developer Tools browser extension. I'll be using Chrome in the examples throughout this chapter as this is a popular choice. React Developer Tools is also available as an extension for Firefox (https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).

To get the extension installed in Chrome, visit https://chrome.google.com/webstore/category/extensions and search for react developer tools:

The first result should be the extension that you want. Click on the ADD TO CHROME button to install it:

Chrome might warn you that it can change data on websites that you visit. Don't worry, the extension is only activated when you visit React apps:

Once you click on the Add extension button, the extension is marked as installed:

You're all set! With the React Developer Tools Chrome extension installed and enabled, you're ready to start inspecting React components on the page, just...