DEV Community

loading...
Cover image for How to Organize Your React/Redux Projects

How to Organize Your React/Redux Projects

developerkimaiyo profile image MAXWELL KIMAIYO Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide
Collapse
madara profile image
Tomislav Borbaš

I would suggest to use atomic design for components instead of just making them in single folder.

For images I would suggest to create assets folder which would contain icons/images and all other assets....

since in my opinion this structure is not scalable for bigger projects

Collapse
davinc profile image
Danijel Vincijanović

Tomo you are my hero 🚜

Collapse
developerkimaiyo profile image
MAXWELL KIMAIYO Author

Yeah I agree with you, I just made this to give new developers a basic overview

Collapse
goutamsamal9 profile image
Goutam Samal

Hey can you help for a curd operation using MERN