What React Is and Why It Matters

Chapter 1. What Is React?

React is a library for helping developers build user interfaces (UIs) as a tree of small pieces called components. A component is a mixture of HTML and JavaScript that captures all of the logic required to display a small section of a larger UI. Each of these components can be built up into successively complex parts of an app. The rest is just details.

In this first chapter, you’ll look at React as it relates to JavaScript and HTML. For those who work with code, this chapter will help set the stage for some of the concepts in later chapters. If you don’t work with code, it’s OK; you can skip this chapter and move on to the more conceptual sections.

A Short Example

A Button component may be contained in a NavigationBar component, which may be part of a Homepage component. Figure 1-1 roughly illustrates how the New Yorker’s cartoon page might be broken down.

Figure 1-1. The component tree representing the Cartoons page of the New Yorker’s website

For a more concrete example, if I was building a to-do list, a typical sample app for JavaScript projects, I might have a Todo component like this:

/**
 * An individual ToDo item
 * @param {Object}  props
 * @param {String}  props.todoItem  A ToDo
 */
const Todo = ({ todoItem }) => (
  <li>{ todoItem.text }</li>
);

and a TodoList component like this:

/**
 * A todoList with a Todo for each item in todoListData ...