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:

images/wordcounter_new.png

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

Get React for Real now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.