JavaScript

These rules apply to JavaScript in general, including frameworks such as React Native.

Strings

When possible prefer string interpolation above the + operator.

let foo = "Hello, my name is " + $name + ".";

let foo = "Hello, my name is ${name}.";

Naming conventions

Names should be formed from the 26 upper and lower case letters (A .. Z, a .. z), the 10 digits (0 .. 9), and _ underscore. Avoid use of international characters because they may not read well or be understood everywhere. Do not use $ dollar sign or \ backslash in names.

Files

File names are always according to PascalCase convention.

userstore.js
userStore.js

UserStore.js

Variables & Functions

The variable and function declaration are always according to camelCase convention.

let foobar = 'test'
let foo_bar = 'test'

foobar = () => {}
foo_bar = () => {}

let fooBar = 'test'

fooBar = () => {}

If statements

Curly brackets must always be present.

if (condition)
  // ...

if (condition) {
  // ...
}

Ternary expression

The “ternary expression” x ? y : z can only be used for conditional assignment.

condition ? setVisible(true) : setVisible(false);

let string = condition ? "true" : "false";

Whitespaces

const clearSearch = () => {
  props.activityStore.setCurrentContact(contact);
  NavigationService.navigate("Contact");
  if (searchQuery) {
    searchQuery?.current?.clear();
  }
  getContacts();
};

const clearSearch = () => {
  props.activityStore.setCurrentContact(contact);
  NavigationService.navigate("Contact");

  if (searchQuery) {
    searchQuery?.current?.clear();
  }

  getContacts();
};

Comments

Comments should provide extra information that cannot be easily deduced by reading the code, such as business logic or decisions that seem contradicting.

Make comments meaningful and keep them up-to-date. Focus on what is not immediately visible. Don’t waste the reader’s time with stuff like;

// Set i to zero.
i = 0;

Quotes

Always use double quotes (“) for JSX attributes, but single quotes (‘) for all other JS. eslint: jsx-quotes Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.

<Foo bar='bar' />

<Foo bar="bar" />

Spacing

Always include a single space in your self-closing tag.

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

<Foo />

Props

Omit the value of the prop when it is explicitly true.

<Foo hidden={true} />

<Foo hidden />