Organizing our React application

In this recipe, we will learn how to structure our project in a better way.

How to do it...

We can create React components with the default structure that create-react-app provides, but in this recipe, I'll show you a better way to organize the project so that we are ready when for when the application grows.

1. We need to create a new React app (check the last recipe if you haven't created a React app yet)

2. Currently, our React application directory tree looks like this:

3. We need to create src/components and src/shared directories
4. After this, we need to create the src/components/Home directory for our component and move Home.js into this folder
5. The App.js file stays at the src/components level
6. Also, App.css and App.test.js will stay at src/components level
7. Move the logo.svg file to src/shared/images
8. Our index.js will stay at the src/ level
9. Now your directory tree should look like this:

Note

I highly recommend that you create another directory for shared components, src/shared...