Simple React Naming Conventions (anyone or any team can follow)

This is a list of best practices found not only in catalyst projects, but from years of web articles and personal practices that are easy to remember and implement across small or large React applications.

One of the most common discussions I have seen is which casing to use for what. The goal here is to keep it simple

A general Guideline (TLDR)

Pascal Case (MyComponent) for components, Classes, Interfaces
Kebab Case (my-component) for directories, non react components, and Function, Class, Interfaces file names
Camel Case (myVariable) for variables and functions
Screaming Snake Case (RATE_THROTTLE_IN_MINUTES) for constants and globals

Pascal Case (MyComponent) for components

For a component called Person, the file name of the css files, the component file and the component class / variable name are the same and thus easy to remember that when PascalCase is seen, the file contains or is for use with a React Component

// Filename
Person.tsx

// React Component in Person.tsx
const Person = () => {
   // ...
}

// CSS
Person.css
Person.scss
Person.module.scss

Kebab Case (my-component) for css and directories

Kebab case is easy to remember as most JS/TS projects are structured this way. CSS also follows this convention which makes the contents of the files more uniform and inline with the best practice of stylesheets.

// Folder Structure
src
     my-component // folder
         MyComponent.tsx
         MyComponent.module.scss
     person-component // folder
         PersonComponent.tsx
         PersonComponent.module.scss

// CSS Class Names
.content-body {
    font-family: Georgia, serif;
}

<div class="content-body">
  // ...
</div>

// Function in standalone file : do-something.function.ts
export function doSomething (input : string) {
  // ...
}

Camel Case (myFunction) for variables and functions

Camel Case makes identifying functions, variables, and procedural code uniform and easy to read. While the file naming for individual files is Kebab Case.

// Function in standalone file : do-something.function.ts
// Note the above use of Kebab Case for the file name
export function doSomething (input : string) {
  // ...
}

// variable example using Pascal Case
let firstName : string = "John";
let lastName : string = "Doe";

Screaming Snake Case for constants and globals

Screaming Snake Case makes it simple to identify at a glance that a value will not change and is available to the entire application at runtime.

// environment.constants.ts
export const REQUESTS_PER_MINUTE : number = 100;
export const APPLICATION_ID : string = "372fb32e-bcc5-404f-973e-b2de260e1d12"

Classes and Interfaces

Using Kebab Case for file names with an extention, and Pascal Case for the definition of Classes and Interfaces is a familiar pattern seen across most JS/TS projects over the last few years of larger JS/TS adoption.

Note that interfaces are prefixed with and "I" following C# conventions, this is a recommendation only.

// person.class.ts
export class Person {
   / ...
}

// entity.interface.ts
export interface IEntity {
   / ...
}

Extras

Below are a few common asks given React speficic functionality and or JS functionality that is not specific to React, but useful as a starting point or general practice.

Custom Hooks

React hooks can easily be identified and defined if using the pattern [use][behavior or purpose]. This is a general purpose definition as defined by the React team. Hook names always start with use.

const useLastModified = (listItem : ListItem) => {
  // ... hook implementation
};

kamauwashington/react-naming-conventions-simplified.md