Introduction

React components modules

Components are functions that return elements created with the React.createElement() method. While it is possible to have our entire application built within one component function, most applications of any complexity would benefit from using multiple components, where the application is broken up into logical blocks of functionality.

Example

In creating a tree structure for a simple form application that has a filterable list with a header and footer, we might end up with components chained together like this:

App/
├─ Header/
│  ├─ Menu
├─ Body/
│  ├─ List/
│  │  ├─ Column Headers
│  │  ├─ ListRow
│  │  ├─ ListRow
│  │  ├─ ListRow
│  ├─ ListFilters
├─ Footer/
│  ├─ Totals

Each of these listed items can be a separate functional component that generates the elements required for one section of the form. In the case of ListRow, it can also be a reusable component that displays different values based on the props that are passed into it.

Separate modules

To start off, we can start building our application as one component. As we add more elements to build the UI, it will eventually become unmanageable. To keep it concise, we’ll break it up into smaller components. The concept of composing components is really no different than how we would with any computer program. By convention, we would typically have one component per Python file, but if we have several small and related components, there is nothing wrong with keeping them in a single module. It comes down to a matter of personal preference at that point.

Fortunately, React makes it very easy to create components. Knowing when and how to break up an application into multiple components is somewhat subjective, but will typically fall on clean lines between function, UI arrangement, or both. In the next lesson, we’ll look at how we can break up the simple list example we did previously, into logical components by separating the user input section from the list section.