React boilerplate

This project was bootstrapped with Create React App, using 2people team usual project architecture.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn st

Creates type declaration for all scss modules in project

yarn lint

Runs eslint on all files

Directory structure

Project has default CRA structure after running eject script. Main difference is in src folder, which structure will be described below more detailed.

Overview

src/
├─ assets/
│  ├─ ...
│  └─ main.scss
├─ components/
│  ├─ blocks
│  │  ├─ ComplexComponent
│  │  │  ├─ index.tsx
│  │  │  ├─ SomeChildComponent.tsx
│  │  │  └─ style.module.scss
│  ├─ buttons
│  │  ├─ BasicButton
│  │  │  ├─ index.tsx
│  │  │  └─ style.module.scss
│  ├─ forms
│  └─ ...
├─ consts/
│  ├─ someConst.ts
│  └─ ...
├─ helpers/
│  ├─ someHelper.ts
│  └─ ...
├─ hooks/
│  ├─ api/
│  │  ├─ useSomeApi.ts
│  │  └─ ...
│  └─ ...
├─ middlewares/
├─ queries/
│  ├─ someService/
│  │  ├─ getSomething.ts
│  │  ├─ postSomething.ts
│  │  └─ ...
│  └─ ...
├─ reducers/
├─ schemas/
├─ screens/
├─ selectors/
├─ validators/
├─ App.tsx
├─ configureStore.ts
└─ index.ts

src/assets

Directory where all assets must be placed. Usually has fonts and img subdirectories. Also here are located all global scss files, including main.scss (webpack styles entrypoint) and different extend files (keyframes, fonts, variables, etc.). Extend files names must begin from _.

src/components

Directory with all React components. Has many subdirectories (blocks, buttons, forms, modals, etc.).

src/components/blocks

Example of subdirectory in components. Can have more subdirectories (e.g. components/blocks/auth - here must be all specific auth blocks placed).

src/components/blocks/Component

Directory with any React component. Every directory has index.tsx file with logic and style.module.scss file with styles. Can have ChildComponent.tsx files, if main component is complex and child components aren't reused somewhere in project.

src/consts

Directory with project constants.

src/consts/endpoints

File for api endpoints. All endpoints are created as functions which return strings and can get url parts or query params as arguments.

src/consts/routes

File for all routes in project. They are created as functions, which return route strings. Can get arguments, e.g. for routes with id's.

src/helpers

Directory with helper functions. There should be all functions placed, which are reused/can be reused in project. Every helper has single js file (e.g. someHelper.ts).

src/hooks

Directory with React hooks. Every hook has single js file (e.g. someHook.ts).

src/hooks/api

Subdirectory with api hooks. Api hook is a pattern for building api interactions. From such a hook developer can get:

• Action: query to server. Actions are made from redux-query query configs (more info in queries paragraph).
• Different info about query, such as isFetching, isFinished, lastUpdated, queryCount.
• Query result from redux store, which came from server after query. Example: query getUser gives us as result user entity, which should be available in useUserApi hook in field user.

src/middlewares

Directory with Redux middlewares. Every middleware has single js file (e.g. someMiddleware.ts).

src/queries

Directory with configs for api queries. All query config files are in subdirectories by resource they get (e.g. user) or by project global sections (e.g. settings). Subdirectory has many query config files, which names starts with query type (e.g. getUser.ts). Config documentation can be found in redux-query library documentation.

Query config file in this project architecture is more than just config - it is a function, which gets arguments and makes action (e.g. requestAsync). All action types can be also found in redux-query documentation.

src/reducers

Directory with Redux reducers.

src/schemas

Directory with normalizr schemas. Every schema has single js file (e.g. users.ts). Every schema should export schema and schemasArray. Key should be similar as filename.

src/screens

Directory with all screens in project. Every subdirectory is either single screen, or group of strings with wrapper, with handles all routes of group and has visual wrapper, if screen group needs it. Every single screen is in directory and most of the time also has style.module.scss file.

src/selectors

Directory with selectors, made by reselect.

src/validators (optional, if redux-form or smthg similar is used in project)

Directory with validators for redux-form.

src/App.ts

Main file with all global routes and other stuff.

src/configureStore.ts

File with Redux configuration. Exporting Redux store and React Router history.

src/index.ts

Project entrypoint.