To start the application do the following:
- Clone the repository
- Go to the respository directory and execute:
npm install
- Execute command:
npm start
- Go to
http://localhost:3000
in a browser
Main stack includes:
- React
- Redux
- Redux Saga (for working with asynchronous and other middlewares in Redux)
- React Router
- clsx (for merging classNames)
- SCSS
Developing stack includes:
- Husky (pre-commit hooks)
- Eslint
- Prettier
- Stylelint
- Commitlint (linting of commit messages)
- Lint-staged (starting linters only when files of special format change)
- Extentions recommendations (for VS Code)
- Settings recommendations (for VS Code)
- Connected Devtools (for Redux)
Folder and files structure of the project:
api
- functions which allow to call API correctly and easilyassets
- folder with all media files, for example imagescommon
- constants and enumscomponents
- all components, which are used in viewsbase
- atomic components, which are common and used in bigger componentscommon
- common components, which are used on most pages, for example footermodals
- all modal windows, which are usedbase
- base modal window, which can be taken as an example
helpers
- functions, which are used in application to optimise some routine operationscontainers
- application logic components, which pass properties topages
services
- core logic of all entities, interact with APIstore
- core application configured storestyles
- core styles, which are common for all parts of application, also have some atomic classes
Common component is just a folder with 2 files. Main file is called index.jsx
. React framework is already configured to resolve main file, so use just %component%
, not %component%/index.jsx
. HTML and JS code is inside index
, styles are extracted in .module.scss
file is the same directory and imported in component. BEM is offered to use in the names of SCSS classes, but there are some atomic classes in styles
too. PropTypes must be specified in index.jsx
as well.
There is jsconfig
, which is already configured to allow convinient imports. It is basically resolving src
directory, so you can use not
import Button from '../../components/base/button';
but
import { Button } from 'components/base';
A lot of folders contain subfolders, so after creating a directory add exports in index
file. It makes importing everything much more easier.
All logic is extracted to containers. Those components pass properties to pages, which are just a views and do not have any logic. We can say that this is something like MVC pattern, where components/pages
are V and containers
are C.
All common/example files and their structure you can already find in this started.