Este guia foi criado para ajudá-lo a desenvolver com eficiência com React, Vite, Tailwind CSS, Three.js, React Three Fiber e Next UI. Aqui estão as principais conclusões e práticas recomendadas:
- estilo de codificação
- Use um código conciso e técnico que forneça informações precisas React exemplo típico
- Usar programação funcional e declarativa e evitar o uso de classes
- Priorizar o uso de iteração e modularidade em vez de código duplicado
- Use nomes descritivos de variáveis que contenham verbos auxiliares (por exemplo, isLoading)
- A nomenclatura do diretório usa letras minúsculas com um traço (por exemplo, components/auth-wizard)
- As exportações nomeadas são preferíveis para componentes
- JavaScript/TypeScript
- As funções puras usam a palavra-chave "function" e omitem o ponto e vírgula.
- Use TypeScript para todo o código, prefira interfaces a tipos, evite enums, use mapeamentos
- Estrutura do arquivo: componentes exportados, subcomponentes, funções auxiliares, conteúdo estático, tipos
- Evite colchetes desnecessários em declarações condicionais; declarações de linha única podem omitir colchetes
- Expressão de declarações condicionais simples usando sintaxe concisa de uma linha
- Tratamento de erros e validação
- Tratamento de erros e casos extremos no início da função
- Use retornos antecipados para lidar com condições de erro e evite instruções if muito aninhadas.
- Coloque o caminho de execução normal no final da função para melhorar a legibilidade
- Evite instruções else desnecessárias e use o padrão if-return.
- Use cláusulas de proteção para lidar com pré-condições e estados inválidos antecipadamente
- Implemente o registro adequado de erros e mensagens de erro fáceis de usar
- Considere o uso de tipos de erros personalizados ou fábricas de erros para o tratamento consistente de erros
- Desenvolvimento em React
- Uso de componentes de função e interfaces
- Uso de JSX declarativo
- Os componentes usam a palavra-chave function em vez de const
- Desenvolvimento de componentes e estilo com Next UI e Tailwind CSS
- Implementação do design responsivo
- Colocar conteúdo estático e interfaces no final do arquivo
- Use variáveis de conteúdo para armazenar conteúdo estático fora da função de renderização
- O envolvimento de componentes do lado do cliente com o Suspense oferece um recurso alternativo.
- Use o carregamento dinâmico para componentes não críticos
- Imagens otimizadas: use o formato WebP, especifique dados de tamanho, carregamento lento
- A modelagem de erros esperados como valores de retorno evita o uso de try/catch nas operações do servidor
- Use useActionState para gerenciar erros e devolvê-los ao cliente
- Use limites de erro para lidar com erros inesperados, implemente os arquivos error.tsx e global-error.tsx
- Validação de formulário usando useActionState em conjunto com react-hook-form
- Sempre lance erros fáceis de usar para que o tanStackQuery capture e exiba ao usuário
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.
