README.md

JavaScript Guidelines

In this document

• General Guidelines
• Style Guide
• JSX Rules

General Guidelines

In order to improve the clarity, quality and development time it is worth considering the following principles whenever possible:

• DRY (Don't Repeat Yourself)
• KISS (Keep It Simple, Stupid)
• SoC (Separation of Concerns)
• Single responsibility principle
• Law of Demeter

---

Style Guide

• Airbnb JavaScript Style Guide is being followed in our code base.

• Code formatting is handled entirely by Prettier. Run npm run prettify from the root of the project to format all code. Code is also automatically formatted pre-commit.

---

JSX Rules

• Use localize('...') or <Localize i18n_default_text='...' for translations.
• Do NOT use variables to localize(), this will break the translations, for example:

    // Do NOT use this
    localize(item.title)

    // Use this
    localize('title')

• Use website_name constant instead of Deriv.
• Do NOT use <Element attributeName={true} />; just use <Element attributeName />.
• Always name your components before default exporting them, for example:

import React from 'react';

const Loading = ({theme}) => (
    <div className={`barspinner ${ theme || 'dark'}`}>
        { Array.from(new Array(5)).map((x, inx) => (
            <div key={inx} className={`rect${inx + 1}`}></div>
        ))}
    </div>
);

export default Loading;

• There are cases where you do not want your strings to be escaped (i.g. when you place <a/> tags inside a <Table />). To bypass HTML escape, you can use the interpolation.escapeValue boolean property of the localize options param (under normal circumstances do NOT use this.):

localize('{{opening_tag}}Deriv App{{closing_tag}}', {
    opening_tag  : '<a href="https://app.deriv.com" rel="noopener noreferrer" target="_blank" class="link">',
    closing_tag  : '</a>',
    interpolation: { escapeValue: false },
}),