React 16 Tooling

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 ...