What Are Components?

A key concept of React is the usage of so-called components. Components are reusable building blocks which are combined to compose the final user interface. For example, a basic website could be made up of a header that includes a navigation bar and a main section that includes an authentication form.

Figure 2.1 An example authentication screen with navigation bar.

If you look at this example page, you might be able to identify various building blocks (i.e., components). Some of these components are even reused.

In the header with the navigation bar you will find the following components:

• The navigation items (Login and Profile)
• The Logout button

Below this, the main section displays the following:

• The container that contains the authentication form
• The input elements
• The confirmation button
• A link to switch to the New Account page

Please note that some components are nested inside other...