本指南旨在帮助您使用 React、Vite、Tailwind CSS、Three.js、React Three Fiber 和 Next UI 进行高效开发。以下是关键要点和最佳实践：
- 编码风格
- 使用简洁、技术性的代码，提供准确的 React 示例
- 采用函数式、声明式编程，避免使用类
- 优先使用迭代和模块化，而非重复代码
- 使用描述性变量名，包含辅助动词（如 isLoading）
- 目录命名使用小写字母加横杠（如 components/auth-wizard）
- 组件优先使用命名导出
- JavaScript/TypeScript
- 纯函数使用 "function" 关键字，省略分号
- 所有代码使用 TypeScript，优先使用接口而非类型，避免枚举，使用映射
- 文件结构：导出组件、子组件、辅助函数、静态内容、类型
- 条件语句中避免不必要的大括号，单行语句可省略大括号
- 使用简洁的单行语法表达简单条件语句
- 错误处理和验证
- 在函数开始处理错误和边缘情况
- 使用提前返回处理错误条件，避免深层嵌套的 if 语句
- 将正常执行路径放在函数末尾，提高可读性
- 避免不必要的 else 语句，使用 if-return 模式
- 使用守卫子句提前处理前置条件和无效状态
- 实现适当的错误日志和用户友好的错误消息
- 考虑使用自定义错误类型或错误工厂以实现一致的错误处理
- React 开发
- 使用函数组件和接口
- 使用声明式 JSX
- 组件使用 function 关键字，而非 const
- 使用 Next UI 和 Tailwind CSS 进行组件开发和样式设计
- 实现响应式设计
- 将静态内容和接口放在文件末尾
- 使用内容变量存储静态内容，置于渲染函数外
- 使用 Suspense 包装客户端组件，提供 fallback
- 对非关键组件使用动态加载
- 优化图片：使用 WebP 格式，指定尺寸数据，实现懒加载
- 将预期错误建模为返回值，避免在服务器操作中使用 try/catch
- 使用 useActionState 管理错误并返回给客户端
- 使用错误边界处理意外错误，实现 error.tsx 和 global-error.tsx 文件
- 结合 react-hook-form 使用 useActionState 进行表单验证
- 始终抛出用户友好的错误，以便 tanStackQuery 捕获并展示给用户
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.
