O'Reilly logo

React 16 Tooling by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Inspecting component properties and state

React follows a declarative paradigm so it helps to have tooling in place like React Developer Tools that lets you see your JSX markup in the browser. This is only the static aspect of your React app—you declare the elements of your UI and let data control the rest. Using the same tool, you can watch props and state as they flow through your app. To demonstrate this, let's create a simple list that fills itself up once mounted:

import React, { Component } from 'react'; 
import MyItem from './MyItem'; 
 
class MyList extends Component { 
  timer = null; 
  state = { items: [] }; componentDidMount() { this.timer = setInterval(() => { if (this.state.items.length === 10) { clearInterval(this.timer); return; } this.setState(state ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required