Understanding Components

Look at almost any web page and you can divide it into separate parts: a header, a logo, a search form, a row of product cards, and a button. In React, each of those parts is written as a component, which is a reusable piece of the interface with its own name. A React application is a tree of components, where larger components such as a page contain smaller ones such as a button.

A component groups three things that belong together: the data it shows, the logic that decides what to show, and the markup that describes how it looks.