Code Organization with ES6 Modules

In this lesson, we'll discuss the best practices of React specific code organization on a local setup for a large React application i.e., the most efficient way to put components into modules (files) and modules into folders.

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:

Get hands-on with 1200+ tech skills courses.