React-Komponenten-Namenskonventionen: Dateien, Props und Hooks

React hat strenge Namenskonventionen, die von JSX selbst erzwungen werden — Komponenten müssen mit einem Großbuchstaben beginnen.

Komponenten: PascalCase

Alle React-Komponenten verwenden PascalCase: UserProfile, ShoppingCart, NavBar. Das ist erforderlich — JSX behandelt Tags in Kleinbuchstaben als HTML-Elemente.

Props: camelCase

Props verwenden camelCase: userName, isLoading, onSubmit, maxRetries.

Hooks: use + PascalCase

Custom Hooks beginnen mit use: useAuth, useFetch, useLocalStorage.

Event-Handler

Props: on + Event (onClick, onSubmit). Handler-Funktionen: handle + Event (handleClick, handleSubmit).

Dateinamen

Typ	Konvention	Beispiel
Komponente	PascalCase	UserProfile.tsx
Hook	camelCase	useAuth.ts
Utility	camelCase	formatDate.ts
Style	PascalCase	UserProfile.module.css
Test	Wie die Quelle	UserProfile.test.tsx

Namen konvertieren

PascalCase-Konverter für Komponenten, camelCase für Props, oder Hub.