A React component, at the most basic level, is a piece of the user interface, more specifically, a section of UI devoted to a single purpose.
With React, your UI is split up into sections, sections within those sections, then sections within those, and so on; you get the picture. Each section is its own component, and lives in a separate file.
The beauty of this system may not be obvious now, but once we dive into it, you'll see how it makes our application much more comprehendible, that is, easy for us to understand and navigate as we're developing. We'll only be building a small application with a few components. The effect increases as your application grows to hundreds of components.
Let's look at a quick example of splitting a UI into components. Here's the online store of Packt, the publishers of this book:
If we were to rebuild this in React, we would start by dividing the UI into meaningful sections. Which parts are concerned with different purposes?
Note that...