This guide is designed to help you develop efficiently with React, Vite, Tailwind CSS, Three.js, React Three Fiber, and Next UI. Here are the key takeaways and best practices:
- coding style
- Use concise, technical code that provides accurate React typical example
- Use functional, declarative programming and avoid using classes
- Prioritize the use of iteration and modularity over duplicate code
- Use descriptive variable names containing auxiliary verbs (e.g. isLoading)
- Use lowercase letters with a dash for directory naming (e.g. components/auth-wizard)
- Components prioritize the use of named exports
- JavaScript/TypeScript
- Pure functions use the "function" keyword and omit the semicolon.
- Use TypeScript for all code, prioritize interfaces over types, avoid enums, and use mappings.
- File structure: exported components, subcomponents, helper functions, static content, types
- Avoid unnecessary curly braces in conditional statements; single-line statements may omit curly braces
- Expressing Simple Conditional Statements Using Concise One-Line Syntax
- Error handling and validation
- Handling errors and edge cases at the start of a function
- Use early returns to handle error conditions and avoid deeply nested if statements.
- Improve readability by placing the normal execution path at the end of the function
- Avoid unnecessary else statements and use the if-return pattern.
- Use guard clauses to handle preconditions and invalid states in advance
- Implement proper error logging and user-friendly error messages
- Consider using custom error types or error factories for consistent error handling
- React Development
- Using Function Components and Interfaces
- Using Declarative JSX
- Components use the function keyword instead of const
- Component Development and Styling with Next UI and Tailwind CSS
- Implementing Responsive Design
- Putting static content and interfaces at the end of the file
- Use content variables to store static content outside of the rendering function
- Wrapping client-side components with Suspense provides a fallback.
- Use dynamic loading for non-critical components
- Optimize images: use WebP format, specify size data, lazy loading
- Model expected errors as return values to avoid using try/catch in server operations
- Using useActionState to manage errors and return them to the client
- Use error boundaries to handle unexpected errors, implement the error.tsx and global-error.tsx files
- Form validation using useActionState in conjunction with react-hook-form
- Always throw user-friendly errors for tanStackQuery to catch and display to the user
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.
Related articles
NET Programming Prompt Word Directive for Cursor Configuration
Configuring PyTorch Programming Prompt Word Instructions for Cursor
Configuring the Go Programming Prompt Word Directive for Cursor
Configuring the Jupyter Programming Prompt Word Directive for Cursor
Configuring the WebShop Programming Prompt Word Directive for Cursor
