React coding style guide

Single responsibility

Apply the single responsibility principle (SRP)  to all components, hooks, contexts and other symbols. This helps make the app cleaner, easier to read and maintain, and more testable.

Naming

Naming conventions are important to maintainability and readability. This guide recommends naming conventions for the file name and the symbol name.

Separate file names with dashes

Do use dashes to separate words in the descriptive name.

Code

Names of components: PascalCase.

Names of local variables, parameters: camelCase.

For casing, a “word” is anything written without internal spaces, including acronyms. For example, MyRpc instead of MyRPC.

Static/readonly constants are written in SCREAMING_SNAKE_CASE:

const COSMOS_CONNECTION_STRING = process.env.COSMOS_CONNECTION_STRING;

General Naming Guidelines

Do use dashes to separate words in the descriptive name.

Naming conventions provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. When you achieve consistency in projects and teams, you get an efficiency boost across the company. The naming conventions should help find desired code faster and make it easier to understand.

Names of folders and files should clearly convey their intent. For example, heroes/hero-list.tsx may contain a component that manages a list of heroes.

Files and directories

Do name the file such that you instantly know what it contains and represents.

Do use consistent names for all symbols.

Filenames and directories are kebab-case, e.g. my-feature.tsx and my-feature.

Use dashes to separate words in the descriptive name.

Use dots to separate the descriptive name from the type. For example, exception.service.ts

Names of folders and files should clearly convey their intent. For example, heroes/hero-list.tsx may contain a component that manages a list of heroes.

Project Structure

Do structure the app such that you can locate code quickly, identify the code at a glance, keep the flattest structure you can, and try to be DRY.

Do create folders named for the feature area they represent.

Nextjs

<project root>
  public
  src
    core
      exception.service.ts
    heroes
      hero
        hero.component.tsx
      hero-list
        hero-list.test.tsx
        hero-list.tsx
      shared
        hero.service.ts
        hero.model.ts
      heroes.tsx
    pages
      api
        heroes.ts
      heroes.tsx
      _app.tsx
    shared
      constants.ts
    styles
      globals.css

Create React App

<project root>
  public
    index.html
  src
    core
    feature
    pages
    shared
    styles
      globals.css
  app.tsx
  app-routing.tsx
  main.tsx

Components

Do write components as functions that return markup. For example,

export function MyButton() {
  return <button>I'm a button</button>;
}

Do limit logic in a component to only that required for the view. All other logic should be delegated to hooks.

Do move reusable logic to hooks and keep components simple and focused on their intended purpose.

If you have many input parameters in a function, consider making an object with an interface/type model as input data.

Name event handler methods with the prefix handle followed by the event name. For example handleClick.

Hooks

Functions starting with use are called Hooks.

Hooks are more restrictive than regular functions. You can only call Hooks at the top level of your components (or other Hooks). If you want to useState in a condition or a loop, extract a new component and put it there.

Do make hooks responsible for XHR calls, local storage, stashing in memory, or any other data operations.

For hooks acting as singleton and/or shared with complete solution. Use them together with context.

Context

Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

In general, if some information is needed by distant components in different parts of the tree, it’s a good indication that context will help you.