Chapter 1
An Introduction to Components

React helps you build dynamic web applications by automatically updating the DOM when your data model changes. On top of updating the DOM, React lets you iterate on the interface by combining, expanding, and moving around self-contained elements, until you’ve hit the right design. These self-contained elements are called components.

Every application contains buttons, text inputs, labels, legends, and so on. Instead of building the user interface from single HTML elements like <div> or <p>, and manipulating these elements one at a time when you need to apply some changes, you first group single elements into components. Then you build the whole page by combining the components. Components are like custom elements that precisely match your application’s functionality. Instead of manipulating HTML elements one by one to update the interface, you pass new data to the components, and React takes care of tedious manipulations. To be able to use components, you’ll define your interface mostly in JavaScript.

React enforces strict rules to share data between components, which we’ll explore in this chapter and the next. While you develop and debug, this helps you trace the source of the data that’s displayed.

Since it gets rid of code that manipulates HTML elements, React lets you focus on the logic behind the application—the model of the application. React lets you use any data structure you want in your model. You can use a lot of different libraries with React, so you can scale the complexity depending on the task at hand.

In this first chapter, you’ll learn how to map data to HTML elements. You’ll learn a few basic React concepts such as renderers, components, and props. Then you’ll build a text box with a counter that displays the word count automatically.