Development
coding-conventions
typescript
React JS

React JS

Naming

1. Use JSX extensions for components, screens etc.

2. Use PascalCase for files with the jsx extension:

components/
├── Button/
│   ├── index.jsx
│   ├── index.test.jsx
screens/
├── Home/
│   ├── index.jsx
│   ├── index.test.jsx

3. Use camelCase for all other files with a js extension:

lib/
├── requestManager.js
├── requestManager.test.js
helpers/
├── userHelper.js
├── userHelper.test.js

4. Use camelCase for variables and functions:

// 🚩 Don't
let form_params = {};

function FetchParams() {
  return {};
}
// ✅ Do
let formParams = {};

function fetchParams() {
  return {};
}

5. Use PascalCase for classes:

// 🚩 Don't
class product_form {}
class productForm {}
// ✅ Do
class ProductForm {}

6. Use SCREAMING_SNAKE_CASE for constants:

// 🚩 Don't
const fetchLimit = 25;
// ✅ Do
const FETCH_LIMIT = 25;

7. Use PascalCase for components and camelCase for their instances:

// 🚩 Don't
import menuCard from './MenuCard';
// ✅ Do
import MenuCard from './MenuCard';
// 🚩 Don't
const MenuIten = <MenuCard />;
// ✅ Do
const menuItem = <MenuCard />;

8. Use camelCase for prop names and PascalCase if the prop value is a React component:

// 🚩 Don't
<Foo
  UserName='hello'
  phone_number={ 12345678 }
/>
// ✅ Do
<Foo
  userName='hello'
  phoneNumber={ 12345678 }
  Component={ SomeComponent }
/>

9. Event and handler naming

  • on as in onEventName for component attributes.

  • handle as in handleEventName for handling child component events.

  • Should follow this construct:

on/handle + Noun + Action, e.g. onModalMenuToggle

// 🚩 Don't
const onSubmit
const handleSubmit
// ✅ Do
const onRegistrationSubmit
const handleRegistrationButtonClick

Variables

1. Use the same vocabulary for the same type of variable

// 🚩 Don't
getUserInfo();
getClientData();
getCustomerRecord();
// ✅ Do
getUser();
getClient();

2. Use explanatory variables

// 🚩 Don't
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);
// ✅ Do
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

3. Avoid Mental Mapping

  • Explicit is better than implicit.
// 🚩 Don't
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  //doSomeOtherStuff();
  // ...
  // ...
  // What is `l` for again?
  callback(l);
});
// ✅ Do
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doSomeOtherStuff();
  // ...
  // ...
  callback(location);
});

4. Use default parameters instead of short circuiting or conditionals

  • Default parameters are often cleaner than short circuiting. Be aware that if you use them, your function will only provide default values for undefined arguments. Other "falsy" values such as '', "", false, null, 0, and NaN, will not be replaced by a default value.
// 🚩 Don't
function createUser(name) {
  const userName = name || "Jun Co";
  // ...
}
// ✅ Do
function createUser(name = "Jun Co") {
  // ...
}

5. Use searchable names

// 🚩 Don't
setTimeout(blastOff, 86400000);
// ✅ Do
// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_PER_DAY);

Functions

1. Function arguments

// 🚩 Don't
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true);
// ✅ Do
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

2. Remove dead code

  • Dead code is just as bad as duplicate code. There's no reason to keep it in your codebase. If it's not being called, get rid of it! It will still be safe in your version history if you still need it.
// 🚩 Don't
function oldRequestModule(url) {
  // ...
}

function newRequestModule(url) {
  // ...
}

const req = newRequestModule;
inventoryTracker("apples", req, "www.inventory-awesome.io");
// ✅ Do
function newRequestModule(url) {
  // ...
}

const req = newRequestModule;
inventoryTracker("apples", req, "www.inventory-awesome.io");

Typescript

1. Naming without I prefix and Type surfix

// 🚩 Don't
interface EducationType {
  id: string;
  //...
}

interface IUser {
  firstName: string;
  lastName: string;
  //...
}
// ✅ Do
interface Education {
  id: string;
  //...
}

interface User {
  firstName: string;
  lastName: string;
  //...
}

2. Interface names and the interface member

  • Use PascalCase for interface names.
  • Use camelCase for interface members.
  • Use whole words in names when possible.
// 🚩 Don't
interface hondaCar {
  id: string;
  //...
}

interface hondaCar {
  created_at: number;
  updated_at: number;
  //...
}
// ✅ Do
interface HondaCar {
  id: string;
  //...
}

interface HondaCar {
  createdAt: number;
  updatedAt: number;
  //...
}
TerraformReact Native