drobenyuka / cra-project-structure

Create react app repository structure

React file structure example

Desired file structure

+-- src
|    |
|    +-- assets
|    |     |
|    |     +-- images
|    |     |   |         
│    |     |   +-- image.png
|    |     |   +-- image.jpg
|    |     |   +-- image.svg
|    |     |
|    |     +-- icons
|    |     |   |  
│    |     |   +-- icon.png
|    |     |   +-- icon.jpg
|    |     |   +-- icon.svg
|    |     |
|    +-- components
│    |     |
|    |     +-- SomeComponent
|    |     |  |
|    |     |  +-- Child
|    |     |  |   +-- styles.ts
|    |     |  |   +-- SomeComponentChild.tsx
|    |     |  |
|    |     |  +-- SomeComponent.tsx
|    |     |  +-- types.ts
|    |     |  +-- styles.ts
|    |     |  +-- utils.ts
|    |     |  +-- selectors.ts
|    |     |  +-- index.ts
|    |     |
|    |     +-- AnotherComponent.tsx
|    |     |
|    |     +-- index.ts
|    | 
|    +-- hooks
|    |     |
|    |     +-- useFirsHook.ts
|    |     +-- useSecondHook
|    |     +-- index.ts
|    |
|    +-- pages
|    |     |
|    |     +-- PageComponent
|    |     |   |
|    |     |   +-- PageComponent.ts
|    |     |   +-- styles.ts
|    |     |   +-- index.ts
|    |     |
|    |     +-- AnotherPageComponent.tsx
|    |     +-- index.ts
|    |
|    +-- service
|    |     |
|    |     +-- SomeService
|    |     |   |
|    |     |   +-- constants.ts
|    |     |   +-- SomeService.ts
|    |     |   +-- types.ts
|    |     |   +-- index.ts
|    |     |
|    |     +-- AnotherService.tsx
|    |     |
|    |     +-- index.ts
|    |
|    +-- state
|    |     |
|    |     +-- branchName
|    |     |   |         
│    |     |   +-- actions.ts
|    |     |   +-- actionTypes.ts
|    |     |   +-- reducer.ts
|    |     |   +-- selectors.ts
|    |     |   +-- index.ts
|    |     |
|    |     +-- index.ts
|    |
|    +-- utils
|    |     |
|    |     +-- utilsName.ts
|    |     |
|    |     +-- index.ts

Constants folder

As you can see there is no constants folder because of intersection with Node.js internal module constants package

cra-project-structure's Issues

Working with apis

I don't think using pure fetch or axios is the best way for api integration nowadays. Using redux toolkit query or react query would be more suitable. Redux toolkit query would be more effective because in the future we are planning of using redux toolkit. Toolkit and toolkit query have saga, thunk integration, cache, by default storing data to the redux store and many more advantages.

Common

I would like to suggest creating common folder.
folder structure:
common
-hooks
--index.ts
-utils
--index.ts
-api
--index.ts
-assets
--index.ts
-components
--index.ts
-modules
--index.ts
-models(ts types)
--index.ts
-constants
--index.ts
-helpers
--index.ts
-store
--index.ts