React
React Native
Node.js
Python
Rust
PostgreSQL
Solana
Claude
AI Agents
Go
Containers
AWS SDKs

React SME Cookbook

Perguntas frequentes

Seções

React

Noções Básicas de React Fluxo de Decisão de Componentes JSX e TSX Componentes Variações de Sintaxe de Componentes de Função Renderização Condicional Listas e Chaves Manipulação de Eventos Formulários Refs Boas Práticas Fundamentais do React Highlights Summary

JSX and Elements Components and Props State with useState Effects and Side Effects Refs and DOM Access Context and Composition Lists Keys and Conditionals Forms and Controlled Inputs Custom Hooks Patterns Performance Idioms React 19 APIs TypeScript with React

Noções Básicas de Hooks do React Custom Hooks Hook useEffect Hook useState Hook useContext Hook useReducer Hook useMemo Hook useCallback Hook useRef Hook useId Hook useTransition Hook useDeferredValue Hook useActionState Hook useOptimistic Hook use Melhores Práticas de React Hooks Highlights Summary

Hooks Personalizados: Guia Passo a Passo useDebounce useThrottle useScrollToTop useLocalStorage useMediaQuery useClickOutside useCopyToClipboard useIntersectionObserver useWindowSize useKeyboardShortcut useToggle usePrevious useFetch useInterval useEventListener Highlights Summary

Fundamentos de Padrões React Composição em Vez de Herança Render Props Higher-Order Components Componentes Compostos Componentes Controlados vs. Não Controlados Máquinas de Estado para Lógica de UI Error Boundaries Portais React Limites do Suspense Padrões de Contexto Otimização de Performance do React Melhores Práticas de Padrões React Highlights Summary

Novidades no React 19 Server Components Server Actions Ações de Formulário Hook use()useOptimistic Ref como Prop Metadados do Documento Carregamento de Assets Compilador do React Boas Práticas do React 19 Highlights Summary

50 Regras do React & Next.js 40 Regras do Next.js 30 Regras de API para Next.js 30 Regras de UX para React Problema/Solução Decisões de Arquitetura React & Next.js Highlights Summary

Checklist de Decisões de Arquitetura React Erros Comuns e Armadilhas da Arquitetura React Decisões de Refatoração de React & TypeScript Checklist de Refatoração de UI Checklist de Auditoria para Novo App React Auditoria de Sinais de Alerta de Aplicativo React React Audit Quick Glance Boas Práticas de Arquitetura React & Next.js Migrando um App Legado para React + Next.js Checklist de Auditoria de Produção Next.js + React Checklist de Separação de Conteúdo de Código Highlights Summary

Fluxo de Escolha de Componentes Botão Modal Card Accordion Tabs Toast Dropdown Tooltip Input Avatar Badge Skeleton Sidebar Breadcrumb Paginação Textarea Select Checkbox Radio Group Switch Label Slider Toggle Group Separator AspectRatio ScrollArea Popover Alert Code Group (Multi-Runtime Tabs)Highlights Summary

Noções Básicas de Eventos do React Eventos do Mouse Eventos de Teclado Eventos de Formulário Eventos de Foco Eventos da Área de Transferência Eventos de Drag & Drop Eventos de Toque Eventos de Scroll Eventos de Ponteiro Eventos de Mídia e Animação Melhores Práticas de Eventos do React Highlights Summary

Noções Básicas de Desempenho Prevenindo Re-renderizações Desnecessárias useMemo, useCallback & React.memo React Compiler (React Forget)React DevTools Profiler Detectando e Corrigindo Vazamentos de Memória Otimização do Tamanho do Bundle Server Component Performance Suspense & Streaming Performance Desempenho de Imagens e Fontes Otimização dos Core Web Vitals State Management Performance Desempenho de Busca de Dados Mergulho Profundo em Caching no Next.js Checklist de Auditoria de Performance Melhores Práticas de Performance Highlights Summary

TypeScript + React Basics Noções Básicas de TypeScript para React Tipando Props Typing State Tipagem de Eventos Typing Refs Tipando Contexto Generics em React Discriminated Unions Tipos Utilitários para React Typing API Responses Tipagem de Server Components Tipagem de Route Handlers Padrões de Modo Estrito Type Narrowing Arquivos de Declaração Referência de Expressões Regulares Melhores Práticas de TypeScript + React Highlights Summary

Formulários e Estado

Checklist de Decisão Fundamentos de Formulários e Validação Checklist de Descoberta de Lógica de Campos Inputs Controlados vs. Não Controlados Noções Básicas de Zod Tipos Zod Zod Transforms Zod Infer React Hook Form RHF + Zod Server Action Forms Padrões de Formulário - Básico Form Patterns Complex Form Patterns File Upload Exibição de Erros em Formulários shadcn Form Formulários Otimistas Acessibilidade de Formulários useReducer Multi-Step Forms Highlights Summary

Configuração e Instalação do SWR Busca Básica de Dados com SWR Fetching Condicional e Dependente Mutações e Atualizações Otimistas Paginação com SWR Estratégias de Revalidação Estratégias de Cache Tratamento de Erros SWR com React Suspense TypeScript com SWR SWR com React Server Components SWR Middleware Highlights Summary

Configuração e Uso Básico do Zustand Padrões de Design de Stores Selectors and Performance Ações Assíncronas Padrão de Slice Zustand Middleware Persist Middleware Immer Middleware TypeScript com Zustand Context vs Zustand Zustand com Next.js Testando Stores do Zustand Integração com Redux DevTools Highlights Summary

Next.js

Configuração Básica do Next.js Next.js + Tailwind v4 + shadcn/ui Flags da CLI create-next-app Next.js + Prisma + PostgreSQL Next.js + Auth.js v5 Site de Documentação Next.js + MDX Next.js em um Monorepo Turborepo Next.js SaaS Starter Implantar Next.js no EC2 / Servidor Standalone Implantar Next.js em ECS / EKS (Contêineres)Melhores Práticas de Configuração do Next.js Highlights Summary

Noções Básicas do App Router Layouts Rotas Dinâmicas Grupos de Rotas Carregamento e Tratamento de Erros Middleware Interceptando Rotas Rotas Paralelas Navegação Melhores Práticas de Roteamento do Next.js Highlights Summary

Noções Básicas de Dados do Next.js Busca de Dados em Componentes de Servidor Server Actions Revalidação Streaming & Suspense Caching Search Params Cookies & Headers Promises Paralelas e Promise.all Geradores e Iteradores Assíncronos Utilidade de Fetch Centralizada com SWR Centralized Fetch Utility with Axios Melhores Práticas de Dados do Next.js Highlights Summary

Server Components Client Components Padrões de Composição Static vs Dynamic Rendering Partial Prerendering (PPR)Otimização de Imagens Otimização de Fontes Melhores Práticas de Renderização do Next.js Highlights Summary

Padrões de Autenticação Manipuladores de Rota da API Variáveis de Ambiente Tratamento de Erros Testando Aplicativos Next.js Implantação SEO e Metadados Internacionalização (i18n)Boas Práticas de Padrões Next.js Highlights Summary

Bibliotecas e APIs

Vercel AI SDK Prisma ORM dnd-kit Drag and Drop AWS SDK S3 AWS SDK Lambda AWS SDK Polly Utilitários Lodash Manipulação de Datas com date-fns TanStack Query (React Query)NextAuth.js / Auth.js v5 Melhores Práticas para Bibliotecas React Highlights Summary

Fundamentos do postMessage Padrões Intermediários de postMessage Padrões Avançados de postMessage Segurança do postMessage Highlights Summary

Primeiros Passos com Stripe Sessões do Stripe Checkout Payment Intents (Fluxo de Pagamento Personalizado)Payment Element & Card Element Assinaturas Webhooks do Stripe Portal do Cliente Stripe React Hooks Stripe com Server Actions Construindo uma Página de Preços Tratamento de Erros e Casos de Borda Testando Integração com Stripe Highlights Summary

Estilo e Interface

Configuração do Tailwind CSS v4 Exemplos do Tailwind Tailwind Utilities Exemplos de Grid Design Responsivo Dark Mode Animações Utilitários Personalizados Cores do Tailwind Highlights Summary

Configuração do shadcn/ui Button Dialog Form Data Table Command Toast Sidebar Highlights Summary

Ícones Lucide React Ícones do React Heroicons Otimização de Imagens com Next.js API Unsplash API Pixabay API Pexels Ícones SVG Personalizados em React Placeholders e Carregamento de Imagens Favicons & OG Images Melhores Práticas de Imagens e Ícones Highlights Summary

Testes e Qualidade

Configuração do Vitest com Next.js Jest Setup with Next.js Fundamentos do React Testing Library Testando Componentes React Testando Custom Hooks Mocking em Testes Testando Formulários Testando Comportamento Assíncrono Testando Contexto e Gerenciamento de Estado Testando Componentes e Ações de Servidor Configuração E2E do Playwright Padrões de E2E com Playwright Playwright Avançado Estratégia e Melhores Práticas de Teste Melhores Práticas de Teste Highlights Summary

Gherkin Form Decision Checklist Gherkin para Código Exemplo de Árvore de Arquivos Gherkin para Pipeline de Implantação Highlights Summary

Cenários de Erros de Hydration e SSR Cenários de Bugs de Estado e Re-renderização Cenários de Bugs de Busca de Dados Cenários de Erro de Roteamento e Navegação Cenários de Bugs em Formulários & Inputs Cenários de Erro de Integração de API Cenários de Problemas de Layout e CSS Cenários de Bugs de Debouncing e Throttling Cenários de Exemplo de Refatoração Snippets de Refatoração para Revisão de Código Highlights Summary

Configuração do ESLint para Next.js Regras Essenciais do ESLint Plugins ESLint Configuração do Prettier Integração ESLint + Prettier Biome (Alternativa ao ESLint + Prettier)Husky & lint-staged (Pre-commit Hooks)EditorConfig & Configurações do VS Code Modo Estrito e Verificações do Compilador TypeScript Linting em CI/CD Melhores Práticas de Linting e Formatação Highlights Summary

Ferramentas e Fluxo

Fundamentos de Scripts Node.js Instalando Node.js e npm pnpm vs npm Executando Scripts Node.js em JavaScript Executando Scripts TypeScript ESM vs CommonJS Modules ESLint para Scripts Node.js Padrões de Scripts Utilitários Padrões EventEmitter Criando Servidores HTTP Melhores Práticas de Scripts Node.js Highlights Summary

Skill de Maestria em React 19 Habilidade: Mergulho Profundo em Roteamento Next.js Habilidade de Busca de Dados do Next.js Habilidade de Estratégias de Renderização do Next.js Skill de Padrões React com TypeScript Zustand State Management Skill Skill de Criação de Hooks Personalizados Habilidade de Especialista em Formulários e Validação Skill de Tailwind v4 + shadcn/ui Vercel React Best Practices Skill Node.js Scripts Expert Skill Highlights Summary

Comandos Essenciais do Git Merging & Rebasing Checklist de Resolução de Conflitos de Merge Introdução aos Git Worktrees Exemplos de Git Worktree GitHub CLI Utilitários Git Configuração do Git Highlights Summary

Sysadmin Essentials Pesquisa e Regex Comandos para Desenvolvedores Node.js Produtividade do Shell Melhores Práticas da CLI do Linux Highlights Summary

Checklist de Onboarding de Desenvolvedores

/

/

© 2026 @csjcode|SystemsArchitect.io: Cloud Systems Tools|Termos

Recurso educacional independente e não oficial. Sem afiliação, endosso ou patrocínio dos proprietários ou responsáveis pelas marcas.

Este site está em fase beta e pode conter imprecisões ou erros.

Todos os exemplos de código são genéricos, para aprendizado e apenas para ambientes de desenvolvimento/teste. Nenhuma garantia é fornecida aos usuários. Consulte os termos.

Buscar na documentação

Busque em todas as páginas da documentação

React SME Cookbook

Documentação e folha de referência no estilo receituário para React 19, Next.js, TypeScript e o stack moderno de frontend. Cada tópico inclui uma receita, exemplo funcional, mergulho profundo, armadilhas e alternativas.

🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥

Fundamentos de React

12 pages

Noções Básicas de React, Fluxo de Decisão de Componentes, JSX e TSX, Componentes, Variações de Sintaxe de Componentes de Função, Renderização Condicional, ...

12 pages

JSX and Elements, Components and Props, State with useState, Effects and Side Effects, Refs and DOM Access, Context and Composition, Lists Keys and Conditionals, ...

17 pages

Noções Básicas de Hooks do React, Custom Hooks, Hook useEffect, Hook useState, Hook useContext, Hook useReducer, Hook useMemo, Hook useCallback, Hook useRef, ...

Hooks Personalizados

17 pages

Hooks Personalizados: Guia Passo a Passo, useDebounce, useThrottle, useScrollToTop, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, ...

Padrões de React

14 pages

Fundamentos de Padrões React, Composição em Vez de Herança, Render Props, Higher-Order Components, Componentes Compostos, ...

12 pages

Novidades no React 19, Server Components, Server Actions, Ações de Formulário, Hook use(), useOptimistic, Ref como Prop, Metadados do Documento, ...

Regras de React

7 pages

50 Regras do React & Next.js, 40 Regras do Next.js, 30 Regras de API para Next.js, 30 Regras de UX para React, Problema/Solução, ...

Arquitetura de React

12 pages

Checklist de Decisões de Arquitetura React, Erros Comuns e Armadilhas da Arquitetura React, Decisões de Refatoração de React & TypeScript, ...

Componentes de React

31 pages

Fluxo de Escolha de Componentes, Botão, Modal, Card, Accordion, Tabs, Toast, Dropdown, Tooltip, Input, Avatar, Badge, Skeleton, Sidebar, Breadcrumb, Paginação, ...

Formulários e Validação

20 pages

Checklist de Decisão, Fundamentos de Formulários e Validação, Checklist de Descoberta de Lógica de Campos, Inputs Controlados vs. Não Controlados, ...

Eventos de React

13 pages

Noções Básicas de Eventos do React, Eventos do Mouse, Eventos de Teclado, Eventos de Formulário, Eventos de Foco, Eventos da Área de Transferência, ...

17 pages

Noções Básicas de Desempenho, Prevenindo Re-renderizações Desnecessárias, useMemo, useCallback & React.memo, React Compiler (React Forget), ...

Configuração do Next.js

12 pages

Configuração Básica do Next.js, Next.js + Tailwind v4 + shadcn/ui, Flags da CLI create-next-app, Next.js + Prisma + PostgreSQL, Next.js + Auth.js v5, ...

Roteamento do Next.js

11 pages

Noções Básicas do App Router, Layouts, Rotas Dinâmicas, Grupos de Rotas, Carregamento e Tratamento de Erros, Middleware, Interceptando Rotas, Rotas Paralelas, ...

Dados no Next.js

14 pages

Noções Básicas de Dados do Next.js, Busca de Dados em Componentes de Servidor, Server Actions, Revalidação, Streaming & Suspense, Caching, Search Params, ...

Renderização do Next.js

9 pages

Server Components, Client Components, Padrões de Composição, Static vs Dynamic Rendering, Partial Prerendering (PPR), Otimização de Imagens, ...

Padrões do Next.js

10 pages

Padrões de Autenticação, Manipuladores de Rota da API, Variáveis de Ambiente, Tratamento de Erros, Testando Aplicativos Next.js, Implantação, SEO e Metadados, ...

TypeScript + React

19 pages

TypeScript + React Basics, Noções Básicas de TypeScript para React, Tipando Props, Typing State, Tipagem de Eventos, Typing Refs, Tipando Contexto, ...

13 pages

Configuração e Instalação do SWR, Busca Básica de Dados com SWR, Fetching Condicional e Dependente, Mutações e Atualizações Otimistas, Paginação com SWR, ...

14 pages

Configuração e Uso Básico do Zustand, Padrões de Design de Stores, Selectors and Performance, Ações Assíncronas, Padrão de Slice, Zustand Middleware, ...

Bibliotecas de React

12 pages

Vercel AI SDK, Prisma ORM, dnd-kit Drag and Drop, AWS SDK S3, AWS SDK Lambda, AWS SDK Polly, Utilitários Lodash, Manipulação de Datas com date-fns, ...

APIs do Navegador

5 pages

Fundamentos do postMessage, Padrões Intermediários de postMessage, Padrões Avançados de postMessage, Segurança do postMessage, Highlights Summary

Pagamentos com Stripe

13 pages

Primeiros Passos com Stripe, Sessões do Stripe Checkout, Payment Intents (Fluxo de Pagamento Personalizado), Payment Element & Card Element, Assinaturas, ...

Imagens e Ícones

12 pages

Ícones Lucide React, Ícones do React, Heroicons, Otimização de Imagens com Next.js, API Unsplash, API Pixabay, API Pexels, Ícones SVG Personalizados em React, ...

16 pages

Configuração do Vitest com Next.js, Jest Setup with Next.js, Fundamentos do React Testing Library, Testando Componentes React, Testando Custom Hooks, ...

Testes: Gherkins

5 pages

Gherkin Form Decision Checklist, Gherkin para Código, Exemplo de Árvore de Arquivos, Gherkin para Pipeline de Implantação, Highlights Summary

Cenários - Defeitos

11 pages

Cenários de Erros de Hydration e SSR, Cenários de Bugs de Estado e Re-renderização, Cenários de Bugs de Busca de Dados, ...

Lint e Formatação

12 pages

Configuração do ESLint para Next.js, Regras Essenciais do ESLint, Plugins ESLint, Configuração do Prettier, Integração ESLint + Prettier, ...

Tailwind CSS v4

10 pages

Configuração do Tailwind CSS v4, Exemplos do Tailwind, Tailwind Utilities, Exemplos de Grid, Design Responsivo, Dark Mode, Animações, Utilitários Personalizados, ...

9 pages

Configuração do shadcn/ui, Button, Dialog, Form, Data Table, Command, Toast, Sidebar, Highlights Summary

Scripts Node.js

12 pages

Fundamentos de Scripts Node.js, Instalando Node.js e npm, pnpm vs npm, Executando Scripts Node.js em JavaScript, Executando Scripts TypeScript, ...

12 pages

Skill de Maestria em React 19, Habilidade: Mergulho Profundo em Roteamento Next.js, Habilidade de Busca de Dados do Next.js, ...

9 pages

Comandos Essenciais do Git, Merging & Rebasing, Checklist de Resolução de Conflitos de Merge, Introdução aos Git Worktrees, Exemplos de Git Worktree, GitHub CLI, ...

6 pages

Sysadmin Essentials, Pesquisa e Regex, Comandos para Desenvolvedores Node.js, Produtividade do Shell, Melhores Práticas da CLI do Linux, Highlights Summary

1 page

Checklist de Onboarding de Desenvolvedores

🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥