Skip to main content

Naming conventions

Base components​

Base components (presentational, dumb, or pure components) that apply app-specific styling and conventions should all include a specific suffix, such as Base.

Base components example
components/
  |- InputBase.tsx
  |- IconBase.tsx
  |- SceneBase.tsx

Order of words​

Component names should start with the highest-level (often most general) words and end with descriptive modifying words.

It is not a natural English language yet it is far more practical. Files are usually sorted alphabetically and this helps us keep related components next to each other.

Wrong names gives bad experience
components/
  |- Area.tsx
  |- BaseScene.tsx
  |- CenteredScene.tsx
  |- Input.tsx
  |- InputForm.tsx
  |- PasswordInput.tsx
  |- StructuredScene.tsx
  |- TextAreaForm.tsx
Good names, related files next to each other
components/
  |- FormInput.tsx
  |- FormTextArea.tsx
  |- InputArea.tsx
  |- InputBase.tsx
  |- InputPassword.tsx
  |- SceneBase.tsx
  |- SceneCentered.tsx
  |- SceneStructured.tsx

Components that are inside a folder with their parent and using them without the parent makes little sense should have the parent name as a prefix.

If a component only makes sense in the context of a single parent component, that relationship should be evident in its name. Since editors typically organise files alphabetically, this also keeps these related files next to each other. – Vue Style Guide

More good practices​

These naming conventions are inspired by Vue Style Guide. We are in a React project here – I know that. Yet, this style guide is very universal and I encourage you to take a look at it.