Code conventions

Git

Commit message

<Issue ID>: <Subject (shortly what was done in imperative form)>
(Not required) Description what and why was done

Example:

#2: Add date format service

Good article to read: https://chris.beams.io/posts/git-commit/

Branch name

feature/<Issue ID>-<task-purpose-in-short (optional)>

Example:

feature/#2

Pull requests

Create Fork from master and work in new branch according to the above rules. Then create PR by New pull request button.

React / JS

Naming conventions

Start boolean variable name from is, has, can, should.

Examples:

shouldComponentUpdate, isLoaded, canOpenModal

Start event handlers method names with on, then domain and then verb: onItemSelect(), onButtonClick()

Name files in Pascal or Camel case. If file returns react component or it's wrapper then it's PascalCase.

Example:

Header.js, AppRouter.js

Name constant with upper case.

Example:

const SAVE_DATA = 'SAVE_DATA';

If component contains props, create an interface for it with prop-types package. If this interface is exported, name it as component MyComponentProps. If there are no props - do not create interface.

Example:

const MyComponentShape = PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
});

MyComponent.propTypes = {
    content: MyComponentShape.isRequired,
};

To work with props in component use destructuring.

Example:

function MyComponent(props) {
  const { title, description = '' } = props;
}

Component logic

Use pattern "Smart parent - Dumb Children". Child components depend only from props. They don't contain inner state, only run event handlers. Only parent controls a data flow and state.

Avoid a class components, use a functional components with hooks.

If your component variable depends on props or other variable, use useMemo hook.

Example:

const firstRowItems = useMemo(() => props.items.slice(0, 3), [props.items]);

Create constants for magic numbers/strings.

Styles

Follow BEM name convention.

Avoid magic numbers for colors/font-sizes/etc. Use mixins and variables.

Name variables in kebab-case.

Example:

$font-size-sm

Avoid !important. There are not so many cases, where you need it.

Put styles near it's component in Pascal case.

Example:

MyComponent.scss

HTML / JSX

Avoid style attribute, write scss styles instead.

Write semantic html. If there is a list, use ul/li, not div.

Code Structure

project-root/
├── landing/
│   └── ...  # landing page "before" application.
├── public/
│   └── ...  # index.html and it's resources.
├── src/
│   ├── __tests__/
│   │   └── ...  # integration tests.
│   ├── components/
│   │   └── ...  # all components from App and deeper.
│   ├── services/
│   │   └── ...  # API and common app services.
│   └── store/
│       └── ...  # Contains root store, actions and reducers
├── index.js  # Provider - main React Component.
├── index.scss  # root element styles
├── setupTests.js  # used for running tests
├── setupProxy.js  # used for setup proxies before app starts
└── serviceWorker.js  # CRA service worker