React boilerplate

This project was bootstrapped with Create React App, using Digital Wing team usual project architecture.

Available Scripts

In the project directory, you can run:

npm 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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run 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.

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.js
│  │  │  ├─ SomeChildComponent.js
│  │  │  └─ style.module.scss
│  ├─ buttons
│  │  ├─ BasicButton
│  │  │  ├─ index.js
│  │  │  └─ style.module.scss
│  ├─ forms
│  └─ ...
├─ consts/
│  ├─ someHelper.js
│  ├─ ...
│  └─ index.js
├─ helpers/
│  └─ index.js
├─ hooks/
│  ├─ api/
│  │  ├─ useSomeApi.js
│  │  ├─ ...
│  │  └─ index.js
│  └─ ...
├─ middlewares/
├─ queries/
│  ├─ someService/
│  │  ├─ getSomething.js
│  │  ├─ postSomething.js
│  │  ├─ ...
│  │  └─ index.js
│  └─ ...
├─ reducers/
├─ schemas/
├─ screens/
├─ selectors/
├─ validators/
├─ App.js
├─ configureStore.js
└─ index.js

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.js file with logic and style.module.scss file with styles. Can have ChildComponent.js files, if main component is complex and child components aren't reused somewhere in project.

src/consts

Directory with project constants. Has index.js file with list of consts, which must be exported as single object. Can have more files for complex consts (e.g. long arrays/objects), but they still should be exported in index file.

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.js). All helpers should be exported in index.js file.

src/hooks

Directory with React hooks. Every hook has single js file (e.g. someHook.js). All hooks should be exported in index.js file.

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.js). All middlewares should be exported in index.js file.

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.js). All query config files by subdirectory should be exported in index.js file. 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.

In project we are using fork of redux-query - redux-query-immutable. First of all, it makes redux immutable (based on immutable.js). Second - it provides more custom actions. In addition to redux-query basic updateEntities actions it provides updateResults action to handle normalized data (based on normalizr). Also query config has fields transformResult and updateResult, where normalized data keys is sent. Basic entities reducer is used for normalizr entities, results reducer for all other application data.

src/reducers

Directory with Redux reducers.

src/schemas

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

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 is used in project)

Directory with validators for redux-form.

src/App.js

Main file with all global routes and other stuff.

src/configureStore.js

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

src/index.js

Project entrypoint.