React Project Structure

With multiple React components in one file, you might wonder why we didn’t put components into different files for the src/App.js file from the start. We already have multiple components in the file that can be defined in their own files/folders (also called modules). For learning, it’s more practical to keep these components in one place. Once our application grows, we’ll consider splitting these components into multiple modules so it scales properly.

Before we restructure our React project, recap JavaScript’s import and export statements. Importing and exporting files are two fundamental concepts in JavaScript you must learn before React. There’s no right way to structure a React application, as they evolve naturally along with the project’s structure.

We’ll complete a simple refactoring for the project’s folder/file structure for the sake of learning about the process. Afterward, there will be a few additional options about restructuring this project or React projects in general. You can continue with the restructured project, though we’ll continue developing with the src/App.js file to keep things simple.

On the command line in your project’s folder, navigate into the src/ folder and create the following component dedicated files:

cd src
touch List.js InputWithLabel.js SearchForm.js