Dev

By Carlos Santana on
Reading time: 3 minutes

React-qLXgV.png

In this post, I'll explain to you how to structure your React application in a better way.

If you read my last post Creating our first React application you probably created your first React application already, if not take some moment to take a look at that post and create it and then continue reading this post.

Now that you created your first React application with create-react-app I'll show you a better way to organize your project so it will be ready when the application grows.

The initial organization

Currently, our React application tree looks like this:

DirectoryTree-WGoez.png

The new structure

Let's start changing our application structure. First, we need to create the folders components and shared inside the src directory.

After this, we need to create a new directory called Home inside src/components to move our Home.js component (we created this component in the last post).

Then move your App.js inside src/components alongside App.css and App.test.js. Finally, the logo.svg file should be moved to src/shared/images.

Now our directory tree should look like this:

 

NewDirectoryTree-eew7h.png

I highly recommend you to create another directory for shared components (src/shared/components). In the next posts I'll explain you more about this benefit but basically is for all the components you need to share in multiple components.

Let's change some code

Probably if you try to run the application will not work at this time, and this is because we need to change some parts of our code to make it work.

First, in your App.js file, you have to change the logo and Home imports like this:

import React, { Component } from 'react';

// These are our new paths for Home and logo...
import Home from './Home/Home';
import logo from '../shared/images/logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

          {/* Here we add our Home component to be render it */}
          <Home />
        </header>
      </div>
    );
  }
}

export default App;
File: src/components/App.js

Finally, in your index.js now you should fix the import path for the App component: 

Only members can see all the codes
You can Login or Sign Up

File: src/index.js

Good news

This new structure will give us more flexibility to group our React components smartly. With this new structure, we are going to be able to create sub-components, if we need them, and that is very important when we are developing complex applications with React.

I hope you liked the post, remember you can join our Slack channel or subscribe to our Youtube channel.

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up