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:

10. In the App.js file, change the logo and Home imports:

 import logo from '../shared/images/logo.svg';
 import Home from './Home/Home';

11. After you changed that, we need to open the index.js and fix the import path for the App component:

import App from './components/App';