To start project run

npm run eslint

npm run start

Project structure

Top level directory structure:

• api - API calls;
• assets - global static files such as images, styles, svgs, etc;
• components - global shared/reusable components, such as layout, form, buttons and so on;
• utils -helpers, constants, utilities;
• store - state management;
• pages - route based components;
• hooks - there will be custom hooks;
• types - if we have a project with the Typescript;
• context - if we use React Context in the project.

|-src
|--/api
|--/assets
|--/components
|--/utils
|--/store
|--/pages
|--/hooks
|--/types
|--/context
|--/App.ts
|--/index.ts

API

• API folder to manage all api requests. It’s like an adapter between DB and view layer of the application;
• All data requests defined here, if we need to make a transformation of the response you also do it here;
• There should be the request file where we define a configured instance;
• Good practice to create separate files for each business object, for example: User, Task, Orders, Admin and so on;
• Schemas for the responses also should be described here.

Example

|-api
|--user
|---User.ts
|---UserSchema.ts

Example of the instance:

class Users {
  getUser = () => {
    // make a request for getting user
  }
  ...
}

Example of request file:

const instance = axios.create({
  baseUrl: 'https://some-domain.com/api',
  ...
})

Components

• In this folder you can group your components by type forms (Select, Input, Button, etc), layouts (AuthLayout, ModalLayout, etc) and so on;
• For the grouped type of components you can create an index file, in other situations I prefer to avoid using index files :)
• Create named-exports instead of default exports, this will avoid any naming conflicts;
• You can separate components with complex logic to container and view components - ComponentContainer.ts and ComponentView.ts.

Component files structure:

• Select
  • Select.tsx - file that contains actual React component;
  • Select.styles.[ts|scss] - styles for the component;
  • Select.[test|spec].ts - test for the components;
  • Select.stories.ts - component story.

Utils

• All the utility/helper functions, constants, etc. that could be shared across the project you need to add here;
• In the utils folder you can create “helper” folders, so as not to mix everything together.

Example

|-utils
|--constants
|---apiConstants.ts
|--helpers
|---validation.ts

Store

• There will be the global store configuration and everything connected with it;
• Each feature will have a separate folder.

|-store
|--user
|---user.slice.ts
|---user.actions.ts
|---user.test.ts
|-rootReducer.ts
|-configureStore.ts

Pages

This specific folder is for route-level components. So if you need a new route you should create a component for this route, that will wrap all your components on that route.

|-pages
|--Article
|---Article.ts
|---article.test.ts