lut3k
❮Wszystkie Artykuły
Dev

Konwencje w React: Jak to wszystko nazwać?

03 października 20235 min czytania
Konwencje nazewnictwa w React

Wstęp

Konwencje nazewnictwa to zbiór zasad dotyczących wyboru nazw dla zmiennych, funkcji, plików czy folderów. Są one kluczowe dla utrzymania czytelności projektu i ułatwiają komunikację między programistami, którzy dzięki nim posługują się wspólnym językiem i terminologią.

W tym artykule podzielę się z Tobą wiedzą na temat stosowania konwencji nazewnictwa w kodzie i projektach React.

Najpopularniejsze konwencje

Przyjrzyjmy się najpopularniejszym konwencjom nazewnictwa stosowanym przez programistów, ze szczególnym uwzględnieniem tych używanych w projektach React.
1 2 3 4

camelCase

camelCase to konwencja, w której pierwsze słowo w nazwie zaczyna się małą literą, a każde kolejne wielką. Na przykład: handleClick, useState, currentAccountBalance.

Zastosowanie:

  • Zmienne
  • Funkcje
  • Hooki
  • Pliki i foldery niekomponentowe w React

Przykład w kodzie JS:

const myName = 'Steve';

const sayHello = (userName) => {
	console.log(`Hello ${userName}!`);
}

sayHello(myName);

Przykład w strukturze plików:

hooks
├── useAppDispatch.ts
└── useAppSelector.ts

PascalCase

PascalCase, znany również jako "CapitalCamelCase", to konwencja podobna do camelCase, ale każde słowo zaczyna się wielką literą. Na przykład: LoginScreen, Button, App.

Zastosowanie:

  • Komponenty React
  • Pliki i foldery komponentów React
  • Klasy
  • Typy

Przykład w strukturze plików:

Button
├── index.jsx
└── Button.module.scss

Przykład komponentu Button w kodzie:

// index.jsx
export default function Button({ children }) {
  return <button>{children}</button>;
}

UPPER_CASE

UPPER_CASE, znany również jako "CONSTANT_CASE" lub "SCREAM_CASE", to konwencja, w której wszystkie litery w nazwie są wielkie. Na przykład: FIRST_NAME, API_URL, APP_VERSION.

Zastosowanie:

  • Stałe
  • Wartości enum

Przykłady w kodzie TS:

const PI = 3.14;
const API_URL = "https://example.com/api";

enum RoutePath {
	DASHBOARD = '/',
	BLOG = '/blog',
	PRIVACY_POLICY = '/privacy-policy',
	TERMS_OF_SERVICE = '/terms-of-service'
}

kebab-case

kebab-case, znany również jako "dash-case", to konwencja, w której słowa w nazwie są oddzielone myślnikami. Na przykład: button-primary, main-heading, gallery-item.

Zastosowanie:

  • Klasy CSS
  • Atrybuty HTML
  • Pliki i foldery
  • Adresy URL

Przykład w kodzie HTML:

<ul class="site-nav">
  <li class="site-nav-item"><a href="#">Sklep</a></li>
  <li class="site-nav-item"><a href="#">Blog</a></li>
  <li class="site-nav-item"><a href="#">Kontakt</a></li>
</ul>

snake_case

snake_case to konwencja, w której słowa w nazwie są oddzielone podkreślnikami. Na przykład: last_name, annual_earnings, total_products_found.

Zastosowanie:

  • Zmienne i funkcje w niektórych językach (Python, Ruby, SQL)
  • Rzadko spotykany w aplikacjach React

Przykład w kodzie SQL:

CREATE TABLE customers (
  customer_id INT PRIMARY KEY,
  first_name VARCHAR(50),
  last_name VARCHAR(50),
  email VARCHAR(100)
);

Konwencje specyficzne dla React

Oprócz ogólnych zasad nazewnictwa, istnieją wytyczne specjalne dla projektów React.

Nazwy komponentów

Komponenty React powinny być pisane w PascalCase. Używaj rozszerzenia .jsx lub .tsx dla plików z komponentami React. Ułatwia to rozróżnić pliki z komponentami React od innych plików oraz pozwala odblokować dodatkowe możliwości w edytorze kodu. 5 6 7

Przykład w strukturze plików:

src
└── components
   ├── layout
   │   ├── Header
   │   │   ├── index.tsx
   │   │   └── Header.module.scss
   │   └── Footer
   │       ├── index.tsx
   │       └── Footer.module.scss
   └── TodoList
       ├── index.tsx
       ├── TodoList.module.scss
       └── components
           ├── TodoItem
           │   ├── index.tsx
           │   └── TodoItem.module.scss
           └── AddTodoForm
               ├── index.tsx
               └── AddTodoForm.module.scss

Hooki

Nazwy hooków powinny zaczynać się od słowa use i być pisane w camelCase. Na przykład: useEffect, useState, useFetch. 8

Przykład w kodzie JSX:

const [count, setCount] = useState(0);

useEffect(() => {
	document.title = `You clicked ${count} times`;
}, [count]);

Funkcje "handlery"

Funkcje obsługi zdarzeń powinny zaczynać się od słowa "handle", na przykład handleClick, handleChange, handleLoad. Ułatwia to czytelność, zrozumienie kodu oraz pomaga przy refaktoryzacji kodu, ponieważ można łatwo znaleźć wszystkie funkcje handlerów poprzez wyszukanie słowa "handle". 9

Przykład w kodzie JSX:

const handleInputChange = (event) => {
  const { name, value } = event.target;
  setFormValues((prev) => ({ ...prev, [name]: value }));
};

const handleToggleModalVisibility = () => {
  setIsModalOpen((prev) => !prev);
}

Style

W React można używać różnych metod do definiowania stylów. Oto zalecane konwencje dla różnych podejść:

Przykłady

  1. Inline — camelCase
<button style={{ backgroundColor: 'blue', color: 'white' }}>Tekst</button>
  1. Zwyczajny CSS — kebab-case
.button-primary {
  background-color: blue;
  color: white;
}
<button className="button-primary">Tekst</button>
  1. CSS Modules — camelCase
.buttonPrimary {
  background-color: blue;
  color: white;
}
import styles from './style.css';

<button className={styles.buttonPrimary}>Tekst</button>
  1. CSS-in-JS — camelCase
// biblioteka styled-components
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

<Button>Tekst</Button>

Wymuszanie stosowania konwencji z ESLint i TypeScript

Możesz użyć reguły ESLint @typescript-eslint/naming-convention do wymuszenia odpowiednich konwencji nazewnictwa w projekcie TypeScript. Oto przykładowa konfiguracja:

// .eslintrc
{
  "rules": {
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "default",
        "format": ["camelCase"]
      },
      {
        "selector": "variable",
        "format": ["camelCase", "PascalCase", "UPPER_CASE"]
      },
      {
        "selector": "function",
        "format": ["camelCase", "PascalCase"]
      },
      {
        "selector": "typeLike",
        "format": ["PascalCase"]
      },
      {
        "selector": "enumMember",
        "format": ["UPPER_CASE"]
      }
    ]
  }
}

Pełną dokumentację znajdziesz na stronie naming-convention | typescript-eslint.

Podsumowanie

Konwencje nazewnictwa są kluczowym elementem pracy zespołowej, ułatwiającym komunikację i współpracę. Warto znać różne opcje i wybrać te, które najlepiej odpowiadają potrzebom zespołu. Dla dużych zespołów dobrym rozwiązaniem może być stworzenie reguł ESLint wymuszających stosowanie przyjętych zasad w projekcie.

Pamiętaj, że najważniejsza jest spójność w całym projekcie. Wybrane konwencje powinny być zrozumiałe i oczywiste dla wszystkich członków zespołu, co przyczyni się do tworzenia bardziej czytelnego i łatwiejszego w utrzymaniu kodu 😉

  1. Naming Conventions in React JS | Upbeat Code↩
  2. React coding Standards and Practices | by Navita Singhal | Medium↩
  3. Programming naming conventions (explained by a snake) | Pluralsight↩
  4. React naming conventions - Stack Overflow↩
  5. What is PascalCase in React? – ProfoundTips↩
  6. reactjs - Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements - Stack Overflow↩
  7. Kluczowe Aspekty JSX - Podstawy składni, Integracja z JavaScript oraz Zaawansowane Techniki↩
  8. Building Your Own Hooks – React↩
  9. Handling Events – React↩
konwencje nazewnictwakonwencje Reactkonwencje programistycznekonwencje TypeScriptkonwencje JavaScriptkonwencje CSSnazywanie zmiennychnazywanie funkcjinazywanie plikównazywanie folderów
Kacper Lutyński
Napisany przez Kacper Lutyński

Frontend Developer z pasją do rozwoju