How to Organize Your React/Redux Projects

#react #redux #javascript

Introduction

React is one of the most unopinionated frontend frameworks in existence. From the selection of states, and routing to managing your code structure, React doesn't provide any guidance on how to structure your project - and that can be really confusing for developers.

Here is the best way you can structure you react/redux app


└──src/
     │
     ├──actions
     │       ├── Post.action.js
     │       └── User.action.js
     ├── components
     │       ├── Header.js
     │       ├── Footer.js
     │       └── Error.js
     ├── containers
     │       ├── PostContainer.js
     │     ├── LoginContainer.js
     │       └── RegisterContainer.java
     ├── constants
     │       ├── User.constant.js
     │       └── Post.constant.js
     ├── images
     │       ├── user.jpg
     │       └── post.png
     ├── reducers
     │       ├── Post.reducer.js
     │       └── Pser.reducer.js
     ├── style
     │       └── Main.css    
     ├── util
     │       ├── Store.js
     │     └── authUtils.js
     ├── views
     │       ├── Home.js
     │      ├── Register.js
     │       └── Login.js
     │
     ├── index.js
     └── root.js

Directory functions, in brief, include the following:

components - Contains all 'dumb' or shared components, consisting only of JSX and styling.
containers - Contains all corresponding components with logic in them. Each container will have one or more components depending on the view represented by the container. For example, PostContainer.js would have a Header.js as well as Footer.js.
images - Contain all Images that will be imported inside a component
actions - All Redux actions
reducers - All Redux reducers
style - This is where you include all of your main stylings
utils - Other logical codes that are not React specific. For example, authUtils.js would have functions to process the JWT token from the API to determine the user scopes and store.js which simply is the Redux store.
view - keeps app pages or screens (route endpoints)
routes.js - aggregates all routes together for easy access.

Note: Defining all routes in a single file has been deprecated as a practice, according to new React Router docs. It promoted segregating routes into components for better readability. Check React Router Docs for a better understanding.