Stackovia · Vol. 02

Appearance

StackoviaVol. 02 — Frontend Profissional com React e Next.js

Do site estático ao app React/Next.js com componentes, rotas e portfólio publicado.

Começar pelo Cap. 01
Guia do Volume
Hub da Série

Cap. 01 — Da intranet estática ao app

A diferença entre site estático e app frontend: componentes, rotas, estado e build pipeline como instrumentos do trabalho profissional.

Ler capítulo →

Cap. 02 — React: componentes, JSX e props

Componente como unidade de interface reutilizável: recebe props, renderiza JSX. Props são o contrato entre quem usa e quem define o componente.

Ler capítulo →

Cap. 03 — Estado e hooks

Estado é a memória do componente. Quando o estado muda, o React re-renderiza o componente. O DOM atualiza como consequência — não como causa.

Ler capítulo →

Cap. 04 — Next.js App Router

Cada pasta com page.tsx vira uma rota; layout.tsx define o wrapper compartilhado; Link mantém o estado da aplicação durante a navegação.

Cap. 05 — TypeScript pragmático

TypeScript é feedback antecipado: transforma erros de runtime em erros de compilação. any desativa o feedback — é dívida com juros diários.

Cap. 06 — Tailwind e shadcn/ui

Design tokens como fonte única da verdade visual: cores, espaçamentos e tipografia definidos em um lugar, usados em todo o código.

Cap. 07 — Dados mockados e estado assíncrono

Dado assíncrono tem 4 estados: loading, error, empty e success. A UI precisa representar cada um deles explicitamente.

Cap. 08 — Formulários tipados e validação

Validação em tempo real como ajuda ao usuário, não punição. Zod como contrato de dados tipado; React Hook Form como gerenciador de estado.

Cap. 09 — Acessibilidade real

Acessibilidade não é decoração — é contrato com o usuário. ARIA complementa a semântica nativa quando o HTML não é suficiente.

Cap. 10 — Performance web

Core Web Vitals medem o que o usuário percebe — carregamento, estabilidade e interatividade. next/image e next/font são as correções de maior impacto.

Cap. 11 — Testes com Vitest e Playwright

Teste bom verifica o que o usuário vê e faz, não detalhes internos. Se o teste não falha quando o código está errado, não é teste.

Cap. 12 — Segurança frontend

CORS protege o usuário do browser. CSP instrui o browser a bloquear scripts e recursos não autorizados. Ambos são linhas de defesa, não balas de prata.

Cap. 13 — Build, lint e prettier

Pipeline local é a primeira linha de qualidade que o desenvolvedor controla. Build, lint e type check antes de commitar evitam surpresas no CI.

Cap. 14 — Fechamento do V02

Fechamento profissional: métricas reais (Lighthouse, testes verdes, checklist a11y) como portfólio. Honestidade sobre limitações é credibilidade.

Status dos capítulos ​

CapítuloTítuloStatus
Cap. 01Da intranet estática ao app: onboarding do V02✅ Preview
Cap. 02React: componentes, JSX e props✅ Preview
Cap. 03Estado e hooks: o IntraStack se torna interativo✅ Preview
Cap. 04Next.js App Router: rotas, layouts e navegação🚧 Em produção
Cap. 05TypeScript pragmático: tipar sem paralisar🚧 Em produção
Cap. 06Tailwind e shadcn/ui: UI consistente e sistemática🚧 Em produção
Cap. 07Dados mockados e estado assíncrono: fetch, loading, erro🚧 Em produção
Cap. 08Formulários tipados e validação🚧 Em produção
Cap. 09Acessibilidade real: ARIA, foco e leitor de tela🚧 Em produção
Cap. 10Performance web: Lighthouse antes/depois🚧 Em produção
Cap. 11Testes com Vitest e Playwright🚧 Em produção
Cap. 12Segurança frontend: CORS, CSP e OWASP web🚧 Em produção
Cap. 13Build, lint e prettier: pipeline local saudável🚧 Em produção
Cap. 14Fechamento do V02: release IntraStack App e ponte para V03🚧 Em produção

Conteúdo em construção. Este site é atualizado progressivamente à medida que os capítulos passam pela revisão editorial. Veja o repositório para o status mais recente.

Licença ​

Conteúdo sob CC BY 4.0. Código sob MIT.

Stackovia Learning Series