File Structure

Understanding File Structure

Starting with a good folder structure, especially when working on large applications is very important for the developer experience,

Top-Level Directory Dtructure

1
.
2
├── api # Contains the fake backend Api mock data and config
3
├── assets # Contains app assets (images, icons and custom fonts file)
4
├── config # Dev tools configuration
5
├── docs # application documentation
6
└── src # Application main Source Code directory
Copied!

Application File Structure

The starterKit use a pattern that group files by domain where all files corresponding to a business domain are in the same directory. Here is the example of SignIn page file structure:
1
.
2
├── ...
3
├── SignIn # Contains all files related to SignIn page UI and logic
4
│ ├── __tests__ # Unit tests and integration of the display the screen, its components and behavior
5
│ ├── behavior.js # Screen behavior (actions and action creators ans reducers)
6
│ ├── index.js # Export default screen component
7
│ ├── SignIn.js # Main screen UI component
8
│ ├── selectors.js # Selectors from Redux State
9
│ └── styles # Styles used for displaying this scree
10
└── ...
Copied!

Test File Structure

The automated tests are placed in the tests directory of each screen / component.
Unit and integration tests are placed directly in the tests folder
Snapshots Jest tests (rendering tests of a screen / component against a snapshot) are placed in the snapshots subfolder
Last modified 2yr ago