React for Real

Match Components and Data

Let’s put all of this new knowledge to use by creating something more concrete. We’ll build a word counter widget that takes some text and a target word count and displays the word count and a progress bar. In Chapter 2, ​Work with State and Events​, we’ll learn how to update the text and the word count as the user types, but first, we’ll set up the word counter with a fixed text. When we’re done, our component will look like this:

In most applications, we don’t operate on a jumble of disconnected data; there are relationships between the data we work on. For example, the count and the progress bar are both based on the ...