This is a test change

Simplifying your React App Structure

In this article, I want to explain how you can structure a React app and what are best practices.

When you first created create-react-app, your app structure will look like this:

 " " \" \" \"folder-structure.png\"\"\"""

public/ is where all the static assets such as images and media files go. You can also see index.html file here. This is the main HTML file and React needs this file since it includes your React code and libraries related code and provides a context <div id="root"></div> tag for React to render your application to.

node_modules/ is for all your dependencies library that you included in package.json get stored when you do yarn or npm install.

If you are wondering how you should organize your files under src/ directory, read on.

This is how create-react-app decided to structure the app:

_For the project to build, these files must exist with exact filenames: public/index.html is the page template; src/index.js is the JavaScript entry point. _

You can delete or rename the other files.You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

There’s no one correct way of structuring your React app but we can make changes to the based on my how build. Here’s the modification from the built-in scaffold that I recommend starting. You can add more modules to your containers/ folder as you see fit later. But in my opinion the simpler the structure is, the better you can maintain later on.

 " " \" \" \"new-folder-structure.png\"\"\"""

You can see that I have added api, containers, components, assets and utils, styles and tests folders under src. Let me explain to you why I have chosen those.

  • src/index.js is the entry point to your application where you render the components by calling ReactDOM.render and initializing the app and related libraries.
  • src/containers & src/components are for the Container and the Presentation components. The idea here is to divide your components into two categories: Container components are concerned with how things work and Presentation components are concerned with how things look. Yon can read more about them here.
  • src/api is for to make API calls to backend API or APIs when needed. Here you can see I have two API files: one for the news and one for the user.
  • src/assets is to store all your static assets such as images and video files related to your app. Here you can see registerServiceWorker.js as a util file. In production, we register a service worker to serve assets from local cache.
  • src/utils is to store utilities or helper functions that you need e.g. string formatters, error handlers, generators, etc.
  • src/styles is where I put all the styles sheets for each component under src/containers and src/components folders. For easier context, we should name the file names exactly the same e.g. style sheet for src/containers/App.js should be named as src/styles/App.css.
  • src/tests is where you put all the Jest unit test cases, similar to src/styles folder you should name the file name the same as component’s file name.

Importing your files

create-react-app assumes that your files are under src but not under sub-directories. But no worries, it also supports NODE\\\_PATH.

Usually you will have to include/import a file like this:

import User from '../../components/User'

But if you want to eliminate ../../ part form import ... from statements, change start script in package.json to this:

"start": "NODE\\\_PATH=src react-scripts start"

NODE\\\_PATH is an environment variable and it can be set to a colon-delimited list of absolute paths as well. For our project we can change to:

"start": "NODE\\\_PATH=src:src/components:src/containers:src/utils:src/styles react-scripts start",

“build”: “NODE_PATH=src:src/components:src/containers:src/utils:src/styles react-scripts build”, “test”: “NODE_PATH=src/tests react-scripts test --env=jsdom”,

Wrap-up

Even though we could go deep by making sub-directories under components and containers for each feature, the simpler, the flatter your organization is the better to see and maintain things.

If you are wondering how to add Redux to your React app, start with this article. You can find the source code to this point can be found here

Happy Hacking!


This article was last updated at: Wednesday, September 20, 2017 11:09 AM