Conventions naming, files etc

Naming

• We follow common JavaScript naming where file and code items are all camel case. Most start with a lower case letter. Only class and components names (and files that expose them) start with an upper case letter (this is true even for function only components).
• We use .js extension for both JavaScript and jsx files.

---

Components

• Component/Class file names are derived from the default type they export.
• A component file may contain other (private to the file) component or other artifacts, but may export only a single type. It must export it as the default export.
• We do not separate between dumb components and smart components. This is an internal implementation detail.
• All smart components delegate their presentation to a dumb one. The dumb competent may be defined in the same file as the smart component. In this case, it should not be exported from it, but rather serve as an internal implementation detail of the smart component. In fact this is the preferred way in many cases.

---

Styles (css modules flavour)

• Component styles are defined next to the component, in a scss file with the same name as the component's, only with a .scss extension.
• We only use scss to support variables and theming. Keep all style files flat and use classes. Adhere to the css moudles rules.
• We use styleName property from react-css-moudles to connect the style class to an html element.
• We used the CSSModules decorator for classes to connect styles and components or, better yet, the corresponding functional equivalent.

---

Imports and path aliasing

• Intra-module imports are done using relative path e.g import MyChild from './MyChild' or evenimport {fetchCars} '../services/api'.
• imports between modules always use a top level alias (configure via babel, webpack, jsconfig.json etc). For example import Header from 'shared/components/Header or import {actions as authActions} from 'auth.