React-Komponente entwickeln
Erstellen Sie eine professionelle, wiederverwendbare React-Komponente mit TypeScript.
Prompt-Vorlage
Erstelle eine professionelle React-Komponente für [KOMPONENTENBESCHREIBUNG]. **Technische Anforderungen:** - React-Version: [VERSION, z.B. 18+] - TypeScript: Ja, mit strikten Typen - Styling: [CSS Modules/Tailwind/Styled Components/etc.] - State Management: [useState/useReducer/Zustand/etc.] **Komponenten-Spezifikation:** 1. **Props-Interface:** Vollständig typisierte Props mit optionalen und erforderlichen Feldern 2. **Interne Logik:** Custom Hooks extrahieren wo sinnvoll 3. **Fehlerbehandlung:** Error Boundaries und graceful Degradation 4. **Zugänglichkeit:** ARIA-Attribute, Keyboard-Navigation, Screen Reader Support 5. **Performance:** React.memo, useMemo, useCallback wo nötig 6. **Responsive Design:** Mobile-first Ansatz **Liefere:** - Die Hauptkomponente mit TypeScript - Zugehörige Custom Hooks - Unit-Tests mit React Testing Library - Storybook-Story (optional) - Verwendungsbeispiel **Verhalten:** [BESCHREIBUNG DES GEWÜNSCHTEN VERHALTENS]
Platzhalter in [eckigen Klammern] ersetzen: [KOMPONENTENBESCHREIBUNG][VERSION, z.B. 18+][CSS Modules/Tailwind/Styled Components/etc.][useState/useReducer/Zustand/etc.][BESCHREIBUNG DES GEWÜNSCHTEN VERHALTENS]
So verwendest du die Vorlage
Kopiere den Prompt, ersetze die Platzhalter in eckigen Klammern durch deine Angaben und füge ihn in den KI-Assistenten deiner Wahl ein. Je genauer die Angaben, desto besser das Ergebnis.
Tipps für bessere Ergebnisse
- Beschreiben Sie das gewünschte Verhalten und die Interaktionen detailliert
- Geben Sie das Styling-Framework und den State-Management-Ansatz an
- Fragen Sie nach Storybook-Stories für die Dokumentation
- Bitten Sie um Accessibility-Tests mit jest-axe
Passende offene Modelle
Die Auswahl nennt aktuelle offene Modelle als Ausgangspunkt für eigene Tests. Sie ist keine Messung für diese Vorlage.
Stichwörter: #react #component #typescript #frontend