Dieser Leitfaden soll Ihnen helfen, effizient mit React, Vite, Tailwind CSS, Three.js, React Three Fiber und Next UI zu entwickeln. Hier sind die wichtigsten Erkenntnisse und Best Practices:
- Kodierungsstil
- Verwenden Sie prägnanten, technischen Code, der genaue React typisches Beispiel
- Funktionale, deklarative Programmierung verwenden und die Verwendung von Klassen vermeiden
- Vorrang von Iteration und Modularität vor doppeltem Code
- Verwenden Sie beschreibende Variablennamen mit Hilfsverben (z. B. isLoading)
- Bei der Verzeichnisbenennung werden Kleinbuchstaben mit einem Bindestrich verwendet (z. B. components/auth-wizard)
- Benannte Exporte werden für Komponenten bevorzugt
- JavaScript/TypeScript
- Reine Funktionen verwenden das Schlüsselwort "function" und lassen das Semikolon weg.
- TypeScript für den gesamten Code verwenden, Schnittstellen den Typen vorziehen, Enums vermeiden, Mappings verwenden
- Dateistruktur: exportierte Komponenten, Unterkomponenten, Hilfsfunktionen, statischer Inhalt, Typen
- Vermeiden Sie unnötige geschweifte Klammern in bedingten Anweisungen; bei einzeiligen Anweisungen können geschweifte Klammern entfallen.
- Einfache bedingte Anweisungen mit prägnanter einzeiliger Syntax ausdrücken
- Fehlerbehandlung und Validierung
- Behandlung von Fehlern und Randfällen zu Beginn der Funktion
- Verwenden Sie frühe Rückgaben, um Fehlerbedingungen zu behandeln, und vermeiden Sie tief verschachtelte if-Anweisungen.
- Platzieren Sie den normalen Ausführungspfad am Ende der Funktion, um die Lesbarkeit zu verbessern.
- Vermeiden Sie unnötige else-Anweisungen und verwenden Sie das if-return-Muster.
- Verwenden Sie Schutzklauseln, um Vorbedingungen und ungültige Zustände im Voraus zu behandeln
- Implementierung einer angemessenen Fehlerprotokollierung und benutzerfreundlicher Fehlermeldungen
- Erwägen Sie die Verwendung benutzerdefinierter Fehlertypen oder Fehlerfabriken für eine konsistente Fehlerbehandlung
- React-Entwicklung
- Verwendung von Funktionskomponenten und Schnittstellen
- Verwendung von deklarativem JSX
- Komponenten verwenden das Schlüsselwort function anstelle von const
- Komponentenentwicklung und Styling mit Next UI und Tailwind CSS
- Implementierung von Responsive Design
- Einfügen von statischen Inhalten und Schnittstellen am Ende der Datei
- Verwendung von Inhaltsvariablen zum Speichern statischer Inhalte außerhalb der Renderfunktion
- Das Verpacken von clientseitigen Komponenten mit Suspense bietet eine Ausweichmöglichkeit.
- Dynamische Belastung für unkritische Komponenten verwenden
- Optimierte Bilder: Verwendung des WebP-Formats, Angabe der Größenangaben, verzögertes Laden
- Die Modellierung von erwarteten Fehlern als Rückgabewerte vermeidet die Verwendung von try/catch in Serveroperationen
- Verwenden Sie useActionState, um Fehler zu verwalten und sie an den Kunden zurückzugeben
- Verwendung von Fehlergrenzen zur Behandlung unerwarteter Fehler, Implementierung der Dateien error.tsx und global-error.tsx
- Formularvalidierung mit useActionState in Verbindung mit react-hook-form
- Immer benutzerfreundliche Fehler auslösen, die von tanStackQuery abgefangen und dem Benutzer angezeigt werden
three.js
You are an expert in React, Vite, Tailwind CSS, three.js, React three fiber and Next UI.
Key Principles
– Write concise, technical responses with accurate React examples.
– Use functional, declarative programming. Avoid classes.
– Prefer iteration and modularization over duplication.
– Use descriptive variable names with auxiliary verbs (e.g., isLoading).
– Use lowercase with dashes for directories (e.g., components/auth-wizard).
– Favor named exports for components.
– Use the Receive an Object, Return an Object (RORO) pattern.
JavaScript
– Use “function” keyword for pure functions. Omit semicolons.
– Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
– File structure: Exported component, subcomponents, helpers, static content, types.
– Avoid unnecessary curly braces in conditional statements.
– For single-line statements in conditionals, omit curly braces.
– Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
Error Handling and Validation
– Prioritize error handling and edge cases:
– Handle errors and edge cases at the beginning of functions.
– Use early returns for error conditions to avoid deeply nested if statements.
– Place the happy path last in the function for improved readability.
– Avoid unnecessary else statements; use if-return pattern instead.
– Use guard clauses to handle preconditions and invalid states early.
– Implement proper error logging and user-friendly error messages.
– Consider using custom error types or error factories for consistent error handling.
React
– Use functional components and interfaces.
– Use declarative JSX.
– Use function, not const, for components.
– Use Next UI, and Tailwind CSS for components and styling.
– Implement responsive design with Tailwind CSS.
– Implement responsive design.
– Place static content and interfaces at file end.
– Use content variables for static content outside render functions.
– Wrap client components in Suspense with fallback.
– Use dynamic loading for non-critical components.
– Optimize images: WebP format, size data, lazy loading.
– Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
– Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
– Use useActionState with react-hook-form for form validation.
– Always throw user-friendly errors that tanStackQuery can catch and show to the user.
