Code Organization with ES6 Modules

File structure: Best Practices

You might wonder why we didn’t follow the best practices of putting components into different files for the App.js file. We already have multiple components in the file that can be defined in their own files/folders (modules). For the sake of learning React, it is practical to keep these items in one place. Once your React application grows, you should consider splitting these components into multiple modules so it can scale properly.

In the following, I propose several module structures you can apply. You can apply them as an exercise later, but we will continue developing our app with the App.js file to keep things simple. Most React setups have a src folder though which contains the App.js file.

Module Structure #1: Naming by component

Here is one possible module structure: