React

Grundlegende Cursor-Regel für modernes React mit Function Components, Hooks und typisierten Props.

Original-Beschreibung der Autoren: React best practices and patterns for modern web applications

Die Regel

---
description: "React best practices and patterns for modern web applications"
globs: **/*.tsx, **/*.jsx, components/**/*
alwaysApply: false
---
# React Best Practices

## Component Structure
- Use functional components over class components
- Keep components small and focused
- Extract reusable logic into custom hooks
- Use composition over inheritance
- Implement proper prop types with TypeScript
- Split large components into smaller, focused ones

## Hooks
- Follow the Rules of Hooks
- Use custom hooks for reusable logic
- Keep hooks focused and simple
- Use appropriate dependency arrays in useEffect
- Implement cleanup in useEffect when needed
- Avoid nested hooks

## State Management
- Use useState for local component state
- Implement useReducer for complex state logic
- Use Context API for shared state
- Keep state as close to where it's used as possible
- Avoid prop drilling through proper state management
- Use state management libraries only when necessary

## Performance
- Implement proper memoization (useMemo, useCallback)
- Use React.memo for expensive components
- Avoid unnecessary re-renders
- Implement proper lazy loading
- Use proper key props in lists
- Profile and optimize render performance

## Forms
- Use controlled components for form inputs
- Implement proper form validation
- Handle form submission states properly
- Show appropriate loading and error states
- Use form libraries for complex forms
- Implement proper accessibility for forms

## Error Handling
- Implement Error Boundaries
- Handle async errors properly
- Show user-friendly error messages
- Implement proper fallback UI
- Log errors appropriately
- Handle edge cases gracefully

## Testing
- Write unit tests for components
- Implement integration tests for complex flows
- Use React Testing Library
- Test user interactions
- Test error scenarios
- Implement proper mock data

## Accessibility
- Use semantic HTML elements
- Implement proper ARIA attributes
- Ensure keyboard navigation
- Test with screen readers
- Handle focus management
- Provide proper alt text for images

## Code Organization
- Group related components together
- Use proper file naming conventions
- Implement proper directory structure
- Keep styles close to components
- Use proper imports/exports
- Document complex component logic

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Basis-Regel deckt das Fundament moderner React-Entwicklung ab: Function Components statt Klassenkomponenten, sinnvoller Einsatz von Hooks wie useState und useEffect sowie klare Typisierung von Props. Sie ist bewusst schlank gehalten und dient eher als Grundgerüst denn als Speziallösung, im Gegensatz zu den spezifischeren Regeln für Chakra UI, Apollo Client oder Formengine in dieser Sammlung. Der Vorteil ist die breite Einsetzbarkeit für praktisch jedes React-Projekt ohne bestimmte Zusatzbibliothek, der Nachteil, dass sie keine Vorgaben zu State-Management, Styling oder Datenanbindung macht. Am meisten profitieren Einsteiger oder Teams, die mit einem neuen, noch unspezifischen React-Projekt starten und erst später Spezialregeln ergänzen wollen.

Praxis-Tipp

Setzen Sie diese Regel als Startpunkt für neue React-Projekte ein und ergänzen Sie sie später um spezifischere Regeln, sobald Sie sich für eine UI-Bibliothek oder einen Datenlayer wie GraphQL entschieden haben.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …