Decomposition

Shifting ListItems into another file

Up till this point, we have been using one module, or one React component, to hold our entire application. Even the ListItem and ListItems components currently have inner functions of our main App component. While there is nothing technically wrong with this, and it affords some conveniences from a scoping standpoint, as our application grows it will get more unwieldy with the more functionality we add to it.

As a simple example of how to physically break up a component once it grows too much, let’s extract the ListItems component from the App component and move it into its own module.

The first thing we did when splitting the ListItems component was to adjust the import statements to match just what we need. In line 1, of the listItems.py module, the only import we need is the React.createElement() method. In our app.py module, at line 2 we import the ListItems component from the newly created listItems module.