Pular para conteúdo

Desenvolvimento Frontend com React 💻

Capacite-se para desenvolver aplicações web modernas utilizando React, aplicando as melhores práticas de componentização, gerenciamento de estado, consumo de APIs REST e deploy.

Foco do Curso

Metodologia: Aprendizado prático baseado em projeto (PBL), focado na construção de interfaces performáticas, escaláveis e visualmente atraentes.

🎯 O Que Você Vai Aprender

  • Fundamentos do React --- Domine JSX, componentes funcionais, props e a estrutura de projetos modernos com Vite. Ir para Módulo 1

  • Gerenciamento de Estado --- Aprenda a controlar o fluxo de dados com useState, useEffect, Context API e introdução ao Redux. Ver Estados

  • Navegação SPA --- Implemente rotas dinâmicas, parâmetros e navegação programática com o React Router. Ver Roteamento

  • Consumo de APIs --- Conecte sua aplicação ao mundo real consumindo APIs RESTful com Fetch e Axios, tratando erros e estados de loading. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado para levar você do zero ao deploy de uma aplicação completa.

🧱 Módulo 1: Fundamentos e Essenciais (Aulas 01-04)

🎨 Módulo 2: Estilização e Componentização (Aulas 05-07)

🚀 Módulo 3: Navegação e Gerenciamento de Dados (Aulas 08-11)

🚢 Módulo 4: Qualidade e Integração Final (Aulas 12-16)

Começar Minha Jornada React

Plano de Ensino 📅

Curso: Desenvolvimento Frontend com React

Ementa

  1. Módulo 1: Fundamentos e Essenciais: Evolução do frontend, JSX, componentes funcionais, props e ciclo de vida.
  2. Módulo 2: Estilização e Layout: CSS Modules, Styled Components, Tailwind CSS e organização arquitetural.
  3. Módulo 3: Navegação e Gerenciamento de Dados: React Router, consumo de APIs REST (Fetch/Axios) e estado global (Context/Redux).
  4. Módulo 4: Performance e Qualidade: Otimização (useMemo/useCallback), testes no frontend e deploy em produção.

Cronograma (16 Aulas)

Módulo 1: Fundamentos e Essenciais

  • Aula 01: Introdução ao Frontend Moderno e Ambiente
  • Aula 02: Fundamentos do React e JSX
  • Aula 03: Estado (useState) e Manipulação de Eventos
  • Aula 04: Ciclo de Vida e Hook useEffect

Módulo 2: Estilização e Componentização

  • Aula 05: Estilização em React (CSS, Modules, Tailwind)
  • Aula 06: Componentização Avançada e Arquitetura
  • Aula 07: Listas, Keys e Renderização Condicional

Módulo 3: Navegação e Gerenciamento de Dados

  • Aula 08: React Router e Conceito de SPA
  • Aula 09: Consumo de API REST (Fetch e Axios)
  • Aula 10: Gerenciamento de Estado Global (Context API)
  • Aula 11: Formulários Avançados (React Hook Form)

Módulo 4: Performance e Integração Final

  • Aula 12: Performance, Otimização e Lazy Loading
  • Aula 13: Testes no Frontend (Jest e Testing Library)
  • Aula 14: Integração com Backend e Autenticação JWT
  • Aula 15: Build de Produção e Estratégias de Deploy
  • Aula 16: Projeto Final Integrado

Avaliação

  • Exercícios: 16 listas de exercícios (básicos, intermediários e desafios).
  • Projetos: 16 mini-projetos aplicados por aula.
  • Quizzes: 16 quizzes rápidos para fixação de conceitos.
  • Projeto Integrador: Desenvolvimento de uma aplicação React completa e funcional para portfólio.

Aulas

Aula 01 – Introdução ao Frontend Moderno 🚀

Seja bem-vindo ao curso de Desenvolvimento Frontend com React. Nesta aula inaugural, vamos entender como a web evoluiu até chegarmos às aplicações modernas e dar nossos primeiros passos com o React.

🌍 A Evolução do Desenvolvimento Web

O desenvolvimento web passou por grandes transformações desde o surgimento da WWW.

Conceito: A Evolução

  1. Web Estática: Apenas HTML e CSS. Cada página era um arquivo físico no servidor.
  2. Web Dinâmica (MPA): Páginas geradas no servidor (PHP, Java, ASP.NET). O navegador recarregava a página inteira a cada interação.
  3. Aplicações Modernas (SPA): Onde entra o React. A aplicação carrega uma única vez e as atualizações ocorrem de forma fluida sem recarregar a página.

🔄 SPA vs MPA

Para entender o poder do React, precisamos comparar as Single Page Applications (SPA) com as Multi-Page Applications (MPA).

Diagrama de Fluxo

graph TD
    subgraph MPA_Tradicional ["MPA (Tradicional)"]
    A[Usuário clica] --> B[Requisição ao Servidor]
    B --> C[Servidor processa]
    C --> D[Recarrega PÁGINA INTEIRA]
    end

    subgraph SPA_Moderna ["SPA (Moderna / React)"]
    E[Usuário clica] --> F[JavaScript intercepta]
    F --> G[Requisição AJAX/Fetch]
    G --> H[Atualiza apenas PARTE da página]
    end

📦 O Ecossistema JavaScript

Antes de codar em React, precisamos do ambiente preparado. O React moderno depende de ferramentas essenciais:

  • Node.js: O motor que executa JavaScript fora do navegador.
  • NPM / Yarn: Gerenciadores de pacotes (bibliotecas).
  • Vite: A ferramenta de construção (build tool) mais rápida da atualidade.

Atenção: Pré-requisito

Certifique-se de ter o Node.js instalado (versão LTS recomendada). Você pode verificar com o comando node -v no terminal.

⚛️ Introdução ao React

O React é uma biblioteca JavaScript para construir interfaces de usuário criada pelo Facebook (Meta).

Por que usar React?

  • Componentização: Dividir a interface em pequenas peças reutilizáveis.
  • Declarativo: Você descreve o que quer ver na tela, e o React cuida do como atualizar.
  • Virtual DOM: Uma técnica de otimização que torna as atualizações de interface extremamente rápidas.

💻 Criando o Primeiro Projeto

Vamos utilizar o Vite para criar nosso ambiente React de forma instantânea.

# Criando o projeto
$ npm create vite@latest meu-projeto-react -- --template react

# Entrando na pasta
$ cd meu-projeto-react

# Instalando dependências
$ npm install

# Iniciando o servidor de desenvolvimento
$ npm run dev

Dica: VS Code

Sempre abra a pasta do projeto no VS Code e utilize o terminal integrado para rodar os comandos acima.

🚀 Prática da Aula

  1. Instale o Node.js se ainda não tiver.
  2. Crie seu primeiro projeto usando o comando do terminal acima.
  3. Abra o arquivo App.jsx e tente alterar o texto que aparece na tela.
  4. Veja a mágica do Hot Module Replacement (HMR): a página atualiza instantaneamente ao salvar!

Aula 02 – Fundamentos: JSX, Componentes e Props 🧱

Nesta aula, vamos mergulhar no coração do React. Vamos entender como criar peças reutilizáveis de interface e como passar dados entre elas.

🏗️ O que são Componentes?

Componentes são os blocos de construção de qualquer aplicação React. Pense neles como funções JavaScript que retornam elementos de interface.

Regra de Ouro

Todo componente React deve começar com letra maiúscula (ex: MeuBotao em vez de meubotao). Isso ajuda o React a diferenciar componentes de tags HTML padrão.

⚛️ JSX: JavaScript + XML

O JSX nos permite escrever algo muito parecido com HTML dentro do nosso código JavaScript.

Exemplos de Transpilação

// O que escrevemos (JSX)
const elemento = <h1 className="titulo">Olá!</h1>;

// O que o React entende
const elemento = React.createElement('h1', {className: 'titulo'}, 'Olá!');

Regras do JSX:

  1. Tag Pai Única: Um componente deve retornar apenas um elemento raiz (ou use &lt;&gt; ... &lt;/&gt;).
  2. Fechamento de Tags: Todas as tags devem ser fechadas (ex: &lt;img /&gt;, &lt;br /&gt;).
  3. CamelCase: Atributos HTML viram CamelCase (ex: class vira className, onclick vira onClick).

🎁 Props: Passando Informação

Props (abreviação de properties) são como argumentos que passamos para os componentes para torná-os dinâmicos e reutilizáveis.

// Definindo o componente
function Saudacao(props) {
  return <h1>Olá, {props.nome}!</h1>;
}

// Usando o componente
<Saudacao nome="Maria" />
<Saudacao nome="João" />

Imutabilidade

As Props são somente leitura. Um componente nunca deve tentar modificar as props que recebe.

🧩 Composição de Componentes

Podemos colocar componentes dentro de outros componentes, criando uma hierarquia.

graph TD
    App[App.jsx] --> Header[Header.jsx]
    App --> Main[Main.jsx]
    App --> Footer[Footer.jsx]
    Main --> Card1[Card.jsx]
    Main --> Card2[Card.jsx]

🚀 Prática da Aula

Vamos criar uma lista de "Cards" de produtos.

  1. Crie um novo arquivo src/components/Card.jsx.
  2. Defina o componente Card que recebe titulo, preco e imagem via props.
  3. No seu App.jsx, importe o Card e use-o várias vezes com dados diferentes.
# Exemplo de estrutura de pastas recomendada
src/
  components/
    Card.jsx
    Header.jsx
  App.jsx
  main.jsx

Dica: Destructuring

Em vez de usar props.nome, você pode capturar o dado diretamente: function Saudacao({ nome }) { ... }

Aula 03 – Hooks I: useState e Estado Local 🎣

Nesta aula, vamos aprender como tornar nossas aplicações interativas. O Estado é o que permite ao React lembrar de informações e reagir a ações do usuário.

🧠 O que é o "Estado"?

Diferente das Props (que são passadas de fora), o Estado é uma informação que o próprio componente gerencia internamente.

Conceito: Reatividade

Sempre que o estado de um componente muda, o React "re-renderiza" o componente, atualizando a interface automaticamente para refletir a nova informação.

🎣 O Hook useState

Para adicionar estado a um componente funcional, usamos o hook useState.

import { useState } from 'react';

function Contador() {
  // declarando uma variável de estado 'valor' e a função 'setValor'
  const [valor, setValor] = useState(0);

  return (
    <div>
      <p>Você clicou {valor} vezes</p>
      <button onClick={() => setValor(valor + 1)}>
        Aumentar
      </button>
    </div>
  );
}

Anatomia do useState:

  • valor: O estado atual.
  • setValor: A função para atualizar o estado.
  • 0: O valor inicial.

⚠️ Regras dos Hooks

  1. Apenas no nível superior: Não chame hooks dentro de loops, condições ou funções aninhadas.
  2. Apenas em funções React: Chame hooks apenas em componentes funcionais ou em Hooks Customizados.

🔄 Fluxo de Dados e Estado

O estado pode ser passado para baixo via props, mas nunca para cima (diretamente).

graph TD
    Parent[Componente Pai - Estado: contador] -- passa via props --> Child[Componente Filho - recebe: valor]
    Child -- chama função do pai --> Parent

🚀 Prática da Aula

Vamos criar um interruptor de "Modo Escuro" (Dark Mode) simples.

  1. Crie um componente Tema.
  2. Use o useState para guardar um booleano (true/false).
  3. Ao clicar no botão, altere o estado.
  4. Mude o estilo (background-color) do componente baseado no estado.
# Dica de código
const [isDark, setIsDark] = useState(false);

# No JSX
<div style={{ backgroundColor: isDark ? 'black' : 'white' }}>

Importante

Nunca altere o estado diretamente (valor = valor + 1). Sempre use a função de atualização (setValor).

Aula 04 – Hooks II: useEffect e Ciclo de Vida 🔄

Nesta aula, vamos entender como lidar com efeitos colaterais em nossos componentes, como buscar dados de APIs e sincronizar o React com o mundo exterior.

🛰️ O que são Efeitos Colaterais?

Efeitos colaterais (side effects) são ações que acontecem fora do fluxo de renderização do React. Exemplos: - Buscar dados de uma API (fetch). - Manipular o DOM diretamente (raro, mas acontece). - Configurar um cronômetro (setInterval).

🎣 O Hook useEffect

O useEffect nos permite executar código em momentos específicos do ciclo de vida do componente.

import { useEffect, useState } from 'react';

function ExemploEfeito() {
  useEffect(() => {
    console.log("O componente foi montado!");

    // Opcional: Função de limpeza (cleanup)
    return () => console.log("O componente será desmontado");
  }, []); // Array de dependências

  return <h1>Confira o console!</h1>;
}

📦 O Array de Dependências

O comportamento do useEffect muda drasticamente dependendo do que passamos no segundo argumento:

Array Comportamento
Sem o array Executa a cada renderização (Cuidado!).
Array vazio [] Executa apenas uma vez (quando o componente monta).
Com variáveis [prop, estado] Executa sempre que uma dessas variáveis mudar.

🌐 Buscando Dados de uma API

O uso mais comum do useEffect é para carregar dados assim que a tela abre.

useEffect(() => {
  fetch('https://api.github.com/users/ricardotecpro')
    .then(res => res.json())
    .then(data => setUsuario(data));
}, []);

🚀 Prática da Aula

Vamos criar um buscador de usuários do GitHub.

  1. Crie um estado para o usuario e outro para o nomeUsuario.
  2. Use o useEffect para carregar os dados de um usuário padrão ao iniciar.
  3. Adicione um botão que, ao ser clicado, dispara uma nova busca baseada no input.

Dica: Loading

Sempre crie um estado loading (true/false) para mostrar uma mensagem de "Carregando..." enquanto a API não responde. Isso melhora muito a experiência do usuário (UX).

🧩 Ciclo de Vida do Componente

graph LR
    A[Mounting] --> B[Updating]
    B --> C[Unmounting]
    style A fill:#dfd
    style B fill:#ffd
    style C fill:#fdd
- Mounting: Quando o componente nasce na tela. - Updating: Quando o estado ou as props mudam. - Unmounting: Quando o componente sai da tela.

Aula 05 – Estilização: CSS Modules e Styled Components 🎨

Existem várias formas de estilizar um projeto React. Hoje vamos conhecer as técnicas que evitam conflitos de nomes e tornam o CSS mais dinâmico.

📦 1. CSS Modules

O CSS Modules permite escrever CSS normal, mas garante que os nomes das classes sejam únicos por componente.

Como usar:

  1. Crie um arquivo chamado Botao.module.css.
  2. Importe no seu componente: import styles from './Botao.module.css'.
function Botao() {
  return <button className={styles.btnPrimario}>Clique aqui</button>;
}

Vantagem

O CSS Modules renomeia suas classes no navegador (ex: btnPrimario_abc123), eliminando o risco de um estilo "vazar" para outro componente.

💅 2. Styled Components (CSS-in-JS)

O Styled Components permite escrever CSS diretamente dentro do arquivo JavaScript, usando a sintaxe de Tagged Templates.

Instalação:

$ npm install styled-components

Exemplo de Uso:

import styled from 'styled-components';

const BotaoCustomizado = styled.button`
  background-color: ${props => props.color || 'blue'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    filter: brightness(0.9);
  }
`;

🌈 CSS Condicional

Com React, é fácil mudar o estilo baseado no estado ou em props.

<p className={isActive ? 'text-green' : 'text-red'}>
  Status: {isActive ? 'Ativo' : 'Inativo'}
</p>

🚀 Prática da Aula

Vamos criar uma "Biblioteca de Botões" temática.

  1. Crie um componente Botao usando Styled Components.
  2. Adicione as variantes: success, danger e warning.
  3. O botão deve mudar de cor dependendo da prop recebida.

📊 Comparativo de Técnicas

Técnica Pró Contra
CSS Modules Nativo do Vite, fácil de aprender. Menos dinâmico, arquivos separados.
Styled Components Super dinâmico, CSS vira componente. Precisa de biblioteca extra, curva de aprendizado.
Tailwind CSS Desenvolvimento ultra rápido. HTML fica "poluído" com muitas classes.

Qual escolher?

Em projetos grandes, costuma-se usar uma combinação de Styled Components (para lógica de UI) e classes utilitárias.

Aula 06 – Formulários e Validação (React Hook Form) 📝

Lidar com formulários pode ser trabalhoso. Hoje vamos aprender como simplificar esse processo usando a biblioteca mais popular do ecossistema: o React Hook Form.

🤯 O Problema do "Controlled Components"

No React tradicional, precisamos de um estado para cada campo de input. Em formulários grandes, isso gera muito código repetitivo (boilerplate).

🛠️ Introdução ao React Hook Form

Essa biblioteca foca em performance e simplicidade, permitindo gerenciar o formulário com menos re-renderizações.

Instalação:

$ npm install react-hook-form

Exemplo Básico:

import { useForm } from 'react-hook-form';

function Formulario() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (dados) => {
    console.log(dados);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("nome")} placeholder="Seu nome" />
      <input {...register("email")} placeholder="Seu e-mail" />
      <button type="submit">Enviar</button>
    </form>
  );
}

✅ Validação sem Dor

O React Hook Form já vem com suporte a regras de validação (required, minLength, pattern).

<input 
  {...register("senha", { required: true, minLength: 6 })} 
  type="password" 
/>
{errors.senha && <p>A senha deve ter pelo menos 6 caracteres.</p>}

🚀 Prática da Aula

Vamos criar um formulário de "Cadastro de Usuário" completo.

  1. Campos: Nome, E-mail, Senha e Confirmar Senha.
  2. Regra: Todos os campos são obrigatórios.
  3. Regra: O e-mail deve ser um formato válido.
  4. Ao enviar com sucesso, limpe o formulário e exiba um alerta de "Sucesso!".

📊 Por que usar React Hook Form?

graph TD
    A[Formulário React] --> B{Muitos Inputs?}
    B -- Sim --> C[React Hook Form: Mais rápido e menos código]
    B -- Não --> D[useState: Simples para 1 ou 2 campos]

Dica: Zod

Para validações complexas, você pode integrar o React Hook Form com o Zod, uma biblioteca de esquema de dados sensacional que veremos em breve!

Aula 07 – React Router: Navegação SPA 🗺️

Uma Single Page Application (SPA) não deve recarregar a página ao mudar de link. Hoje vamos aprender a usar o React Router para criar rotas e navegação fluida.

🧭 O que é o React Router?

É a biblioteca padrão para gerenciar a navegação em projetos React. Ela permite mapear URLs (ex: /contato) para componentes específicos.

Instalação:

$ npm install react-router-dom

🏗️ Estrutura Básica

Para ativar as rotas, envolvemos nossa aplicação no componente BrowserRouter.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/sobre">Sobre</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Atenção

Sempre use o componente <Link> do React Router em vez da tag <a>. - <a>: Recarrega a página inteira (mata o estado do React). - <Link>: Intercepta o clique e apenas troca o componente na tela.

parametros de Rota (Params)

Podemos criar rotas dinâmicas, como /perfil/ricardo.

<Route path="/perfil/:username" element={<Perfil />} />

// No componente Perfil
import { useParams } from 'react-router-dom';
const { username } = useParams();

🚀 Prática da Aula

Vamos criar um "Mini Portal de Notícias".

  1. Crie as páginas: Home, Esportes, Tecnologia e Contato.
  2. Crie uma barra de navegação que apareça em todas as páginas.
  3. Implemente uma página de erro 404 para rotas não encontradas.
  4. (Bônus) Use o useNavigate para redirecionar o usuário para a Home após preencher um formulário de contato.

📊 Como funciona a Navegação?

graph LR
    A[URL: /sobre] --> B{Router}
    B -- match --> C[Componente Sobre]
    B -- no match --> D[Componente 404]

Dica: NavLink

Use <NavLink> em vez de <Link> se quiser adicionar uma classe CSS automática (como .active) ao link da página onde o usuário está no momento.

Aula 08 – Consumo de APIs: Fetch e Axios 📡

Já vimos o fetch, mas hoje vamos aprofundar no consumo de dados reais e conhecer o Axios, uma biblioteca poderosa que facilita a vida do desenvolvedor.

🐙 Fetch vs Axios

O fetch é nativo do navegador, mas o Axios oferece recursos extras como cancelamento de requisições, instâncias reutilizáveis e transformação automática para JSON.

Instalação:

$ npm install axios

🛠️ Criando uma Instância Axios

Em vez de repetir a URL base em todo lugar, criamos um arquivo src/services/api.js.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.github.com'
});

export default api;

Usando no Componente:

useEffect(() => {
  api.get('/users/ricardotecpro')
     .then(response => setUsuario(response.data));
}, []);

🛑 Tratamento de Erros e Estados

Sempre que lidamos com internet, as coisas podem falhar. Devemos estar preparados.

try {
  const res = await api.get('/posts');
  setPosts(res.data);
} catch (error) {
  console.error("Ops! Algo deu errado", error);
  setMsgErro("Não foi possível carregar os dados.");
}

🚀 Prática da Aula

Vamos criar um "Dashboard de Criptomoedas".

  1. Use a CoinGecko API (ou qualquer outra pública).
  2. Liste o nome, símbolo e preço atual das 10 principais moedas.
  3. Adicione um botão de "Atualizar" que dispara a busca novamente através do Axios.
  4. Mostre uma mensagem de erro estilizada se a API estiver fora do ar.

📊 Fluxo da Requisição

sequenceDiagram
    participant User as Usuário
    participant React as Componente React
    participant API as Servidor API
    User->>React: Clica em "Carregar"
    React->>API: GET /dados (via Axios)
    API-->>React: 200 OK (JSON)
    React-->>User: Mostra Dados na Tela

Dica: Async/Await

Prefira usar async/await em vez de .then(). O código fica muito mais legível e fácil de dar manutenção.

Aula 09 – Context API: Estado Global Simples 🌐

Às vezes, as Props não são suficientes. Passar dados por 5 ou 6 níveis de componentes (Prop Drilling) é cansativo. Hoje vamos aprender a usar a Context API para compartilhar dados globalmente.

😵 O Problema do Prop Drilling

graph TD
    App --> Pagina
    Pagina --> Sidebar
    Sidebar --> Menu
    Menu --> Item[Item do Menu - Precisa do nome do Usuário]
No exemplo acima, todos os componentes do meio precisam receber o "usuário" apenas para passá-lo adiante. Isso é o Prop Drilling.

💡 A Solução: Context API

O Contexto permite que qualquer componente acesse o dado diretamente, "pulando" os intermediários.

Passo 1: Criar o Contexto

// src/contexts/AuthContext.jsx
import { createContext, useState } from 'react';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState({ nome: 'Convidado' });

  return (
    <AuthContext.Provider value=(Undefined, Undefined)>
      {children}
    </AuthContext.Provider>
  );
}

Passo 2: O Provedor (Provider)

Envolva a aplicação no main.jsx ou App.jsx. 

<AuthProvider>
  <App />
</AuthProvider>

Passo 3: Consumir os Dados

import { useContext } from 'react';
import { AuthContext } from './contexts/AuthContext';

const { user } = useContext(AuthContext);

🚀 Prática da Aula

Vamos criar uma "Loja com Carrinho".

  1. Crie um CarrinhoContext.
  2. O estado global deve ser um array de produtos no carrinho.
  3. Crie componentes em lugares diferentes da tela:
    • Navbar: Deve mostrar a quantidade de itens no carrinho.
    • Vitrine: Deve ter botões para adicionar itens ao contexto.
    • CarrinhoLateral: Deve listar os itens que estão no contexto.

📊 Prop Drilling vs Context

Técnica Quando usar?
Props Para dados que só o filho imediato precisa.
Context API Para dados globais (Tema, Autenticação, Carrinho).
Redux Para aplicações gigantescas com lógica complexa.

Dica de Ouro

Não coloque TUDO no contexto. Use-o apenas para o que realmente precisa ser global, para evitar renderizações desnecessárias.

Aula 10 – Hooks Avançados: useMemo, useCallback e useRef 🏗️

Além dos hooks básicos, o React oferece ferramentas para lidar com performance e referências diretas ao DOM. Hoje vamos aprender a usar o "cérebro" do React de forma mais eficiente.

🏎️ useMemo: Memorizando Valores

O useMemo serve para evitar que cálculos caros (pesados) sejam refeitos em toda renderização se os dados não mudaram.

const calculoPesado = useMemo(() => {
  return operacaoDemorada(valor);
}, [valor]);

Quando usar?

Use apenas se a operação for realmente lenta. Memorizar tudo sem necessidade pode deixar o código mais complexo e até mais lento.

⚡ useCallback: Memorizando Funções

No React, toda vez que um componente renderiza, as funções dentro dele são "recriadas". O useCallback mantém a mesma instância da função entre as renderizações.

const handleClick = useCallback(() => {
  console.log("Cliquei!");
}, []); // Função memorizada para sempre

📍 useRef: Acesso Direto e Memória Silenciosa

O useRef serve para duas coisas principais: 1. Acessar o DOM: Focar um input, rolar a página, etc. 2. Variável de Instância: Guardar um valor que NÃO dispara re-renderização quando muda.

const inputRef = useRef();

const focarInput = () => {
  inputRef.current.focus(); // Acesso direto ao elemento HTML
};

return <input ref={inputRef} />;

🚀 Prática da Aula

Vamos criar uma lista filtrável ultra-performática.

  1. Gere uma lista de 500 nomes (ou use um array estático grande).
  2. Crie um input de busca.
  3. Use o useMemo para filtrar a lista apenas quando o termo de busca mudar.
  4. Use o useRef para que, ao carregar a página, o cursor já comece dentro do campo de busca.

📊 Comparativo de Hooks

Hook Objetivo Principal
useMemo Guardar o resultado de um cálculo.
useCallback Guardar a referência de uma função.
useRef Guardar uma referência a um elemento ou valor mutável (sem re-render).

Cuidado com a Otimização Prematura

"Otimização prematura é a raiz de todo mal". Só use esses hooks se você notar que a tela está lenta ou se precisar passar funções para componentes otimizados com React.memo.

Aula 11 – Performance: React.memo e Lazy Loading 🚀

Uma aplicação profissional deve ser rápida e leve. Hoje vamos aprender como evitar renderizações inúteis e carregar apenas o necessário para o usuário.

🧠 1. React.memo: Evitando Re-renders

Por padrão, quando um componente pai renderiza, todos os seus filhos renderizam também. O React.memo impede isso se as props do filho não mudaram.

import { memo } from 'react';

const FilhoPesado = memo(({ dado }) => {
  return <div>{dado}</div>;
});

😴 2. Code Splitting e Lazy Loading

Por que carregar o código da página de "Configurações" se o usuário está na "Home"? O Lazy Loading divide seu código em pedaços menores.

import { lazy, Suspense } from 'react';

const PaginaConfig = lazy(() => import('./PaginaConfig'));

function App() {
  return (
    <Suspense fallback={<div>Carregando página...</div>}>
      <PaginaConfig />
    </Suspense>
  );
}

📸 3. Otimização de Imagens

Imagens pesadas matam a performance. No React, devemos: - Usar formatos modernos (WebP). - Adicionar o atributo loading="lazy" nas tags img. - Usar tamanhos adequados para cada tela.

🚀 Prática da Aula

Vamos otimizar uma aplicação "pesada".

  1. Crie um componente pai que tem um contador.
  2. Crie um componente filho que apenas exibe um texto estático.
  3. Use o console.log para ver o filho renderizando sem necessidade.
  4. Aplique o React.memo e veja a mágica acontecer.
  5. Implemente o lazy e Suspense em uma das rotas do seu projeto anterior.

📊 Ferramentas de Análise

  • React DevTools (Profiler): Para ver quanto tempo cada componente leva para renderizar.
  • Lighthouse: Ferramenta do Chrome para medir a performance geral do site.

Dica: Virtualização

Para listas com milhares de itens, não use apenas .map. Procure sobre Windowing ou Virtualização (libs como react-window).

Aula 12 – Estado Global Avançado: Redux Toolkit 🏪

Quando a aplicação cresce demais, a Context API pode se tornar confusa. Para sistemas complexos de nível Enterprise, utilizamos o Redux Toolkit (RTK).

🏗️ O que é o Redux?

O Redux funciona como um "Banco de Dados compartilhado" para o frontend. Ele segue um fluxo de dados rigoroso e previsível.

Instalação:

$ npm install @reduxjs/toolkit react-redux

🍰 O Conceito de Slice

No Redux moderno, dividimos nosso estado em "fatias" (Slices). Cada slice contém o estado e as funções que o alteram.

// src/store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

🎣 Hooks do Redux

Para interagir com o Redux nos componentes funcionais, usamos dois hooks principais: - useSelector: Para ler dados da Store. - useDispatch: Para "disparar" uma ação de mudança.

const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

<button onClick={() => dispatch(increment())}>+</button>

🚀 Prática da Aula

Vamos criar uma lista de "Favoritos" global.

  1. Crie um favoritesSlice.
  2. O estado deve ser uma lista de IDs de produtos.
  3. Ao clicar no " ❤️ " em qualquer lugar da aplicação, o ID deve ser adicionado ao Redux.
  4. Crie uma página de "Favoritos" que lê esses IDs e exibe os produtos correspondentes.

📊 Context API vs Redux

Recurso Context API Redux Toolkit
Curva de Aprendizado Baixa Média/Alta
Performance Boa Excelente (em larga escala)
Ferramentas de Debug Limitadas Redux DevTools (Incrível)

Dica: Redux DevTools

Instale a extensão do Chrome Redux DevTools. Ela permite que você "viaje no tempo", vendo exatamente o que mudou no estado a cada segundo!

Aula 13 – Testes Unitários: Vitest e React Testing Library 🧪

Escrever testes garante que seu código continue funcionando após mudanças e refatorações. Hoje vamos aprender a testar nossos componentes da forma correta.

🛠️ O que testar?

Não precisamos testar tudo, mas devemos focar em: - Lógica de Negócio: Funções que fazem cálculos ou transformações. - Interação do Usuário: O botão clicado disparou a ação correta? - Renderização: O componente exibiu o dado esperado?

🏗️ Ferramentas Modernas

  • Vitest: O sucessor do Jest, extremamente rápido e nativo do Vite.
  • React Testing Library (RTL): Foca em testar o componente como o usuário o vê (testando acessibilidade e texto, não a implementação interna).

Instalação:

$ npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

📝 Escrevendo seu Primeiro Teste

import { render, screen } from '@testing-library/react';
import { test, expect } from 'vitest';
import Saudacao from './Saudacao';

test('deve renderizar o nome do usuário corretamente', () => {
  render(<Saudacao nome="Ricardo" />);
  const elemento = screen.getByText(/Olá, Ricardo/i);
  expect(elemento).toBeInTheDocument();
});

🚀 Prática da Aula

Vamos criar testes para o componente Contador.

  1. Crie o componente Contador com um estado inicial zero.
  2. Escreva um teste que verifica se o valor "0" aparece na tela.
  3. Escreva um teste que simula o clique no botão de "Incrementar" e verifica se o valor mudou para "1".
  4. Use o userEvent para simular as interações de forma mais realista.

📊 Por que testar?

graph TD
    A[Mudança no Código] --> B{Tem Testes?}
    B -- Sim --> C[Testes rodam e dão segurança]
    B -- Não --> D[Rezamos para não quebrar nada em produção]
    C --> E[Deploy Tranquilo]
    D --> F[Bugs inesperados]

Dica: TDD

Tente o Test Driven Development: escreva o teste ANTES de escrever o código do componente. Isso ajuda a pensar melhor na arquitetura da sua solução!

Aula 14 – Integração com Backend: Firebase e Supabase ☁️

Muitas vezes não queremos criar um servidor do zero. Hoje vamos conhecer o BaaS (Backend as a Service) e como eles facilitam a vida do desenvolvedor frontend.

🔥 O que é Firebase?

O Firebase (do Google) oferece: - Authentication: Login fácil (Google, GitHub, E-mail). - Firestore: Banco de dados NoSQL em tempo real. - Storage: Armazenamento de imagens e vídeos.

⚡ O que é Supabase?

O Supabase é a alternativa de código aberto ao Firebase, baseada em PostgreSQL. Ele permite usar SQL real no seu banco de dados na nuvem.

🔐 Configurando o Firebase

Normalmente colocamos as credenciais em um arquivo .env para segurança:

// firebase.config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: "...firebaseapp.com",
  projectId: "...",
  // ...
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

🚀 Prática da Aula

Vamos criar um "Caderno de Notas" online.

  1. Crie um projeto no console do Firebase.
  2. Configure o Firestore (Database).
  3. No React, crie um formulário que salva uma nota no banco.
  4. Use o onSnapshot (Firebase) para ver a nota aparecer na sua lista segundos após ser criada em outro dispositivo!

📊 Comparativo

Recurso Firebase Supabase
Banco de Dados NoSQL (Documentos) SQL (Tabelas)
Facilidade Muito Alta Alta
Preço Grátis até certo ponto Grátis até certo ponto

Segurança

Nunca suba suas chaves de API (apiKey) para o GitHub público! Use sempre o arquivo .gitignore para esconder seu .env.

Aula 15 – PWA e Deploy: Colocando no Ar! 🚀

Seu app está pronto, mas onde ele vai morar? Hoje vamos aprender a transformar seu site em um "Aplicativo Instalável" e fazer o deploy profissional.

📱 O que é PWA (Progressive Web App)?

Uma PWA permite que seu site se comporte como um App Nativo: - Instalação: Link "Adicionar à tela de início" no celular. - Offline: Funciona mesmo sem internet (via Service Workers). - Velocidade: Carregamento instantâneo.

🚢 Fazendo o Deploy

Existem plataformas fantásticas que automatizam o processo de colocar seu código no ar direto do GitHub.

1. Vercel (Recomendado para Next.js e Vite)

  1. Conecte sua conta do GitHub.
  2. Escolha o repositório.
  3. Clique em "Deploy". Pronto!

2. Netlify

Semelhante à Vercel, excelente para sites estáticos e SPAs.

🔍 SEO e Meta Tags

Para que seu app apareça bem no Google e tenha uma imagem bonita quando compartilhado no WhatsApp, configure o index.html:

<title>Meu App Incrível</title>
<meta name="description" content="A melhor descrição de todas">
<meta property="og:image" content="https://meuapp.com/capa.jpg">

🚀 Prática da Aula

Vamos colocar seu projeto no ar HOJE!

  1. Crie uma conta na Vercel ou Netlify.
  2. Suba seu código final para o GitHub.
  3. Configure o deploy automático (Continuous Deployment).
  4. Teste o link gerado no seu celular.
  5. (Desafio) Configure o manifesto da PWA para que o Chrome peça para instalar o site.

📊 Ciclo do Deploy Automático

graph LR
    A[Código Local] -->|git commit| B[GitHub]
    B -->|Webhook| C[Vercel/Netlify]
    C -->|Build| D[Site Online 🎉]

Comemoração

Parabéns! Você saiu do zero e agora tem uma aplicação React rodando na nuvem para o mundo todo ver!

Aula 16 – Projeto Final: Dashboard Completo 🏆

Chegou o grande dia! Vamos unir todo o conhecimento das últimas 15 aulas para construir uma aplicação completa, do design ao deploy.

🎯 O Desafio Final

Você deve construir um Dashboard de Gestão Profissional. Pode ser: - Um Gestor de Projetos (estilo Trello/Asana). - Um E-commerce Completo com Checkout. - Uma Rede Social de Nicho. - Um Sistema de Gestão de Clínica/Academia.

🛠️ O que deve haver no Projeto?

Para ser aprovado com distinção, seu app precisa de: 1. Rotas: Múltiplas páginas bem estruturadas. 2. Estado Global: Uso de Redux Toolkit ou Context API. 3. Consumo de API: Dados reais ou do Firebase/Supabase. 4. Formulários: Validação com React Hook Form. 5. Estilização: Styled Components ou Tailwind CSS. 6. Performance: Uso de memo, lazy e Suspense. 7. Qualidade: Pelo menos 3 testes unitários principais.

📝 Cronograma de Entrega

  1. Manhã: Definição do Escopo e Prototipagem (Figma/Rascunho).
  2. Tarde: Mão na massa! Desenvolvimento das funcionalidades core.
  3. Noite: Ajustes de Design, Testes e Deploy Final.

🏁 Apresentação

Prepare um "Pitch" de 5 minutos sobre seu projeto: - Qual problema ele resolve? - Qual foi o maior desafio técnico? - O que você aprendeu de mais importante?

Mensagem Final

O desenvolvimento frontend é uma jornada constante. Este curso foi apenas o primeiro passo. Continue estudando, construindo projetos e compartilhando conhecimento. O mundo do React é gigante! ⚛️🚀

Aulas – Trilha de Aprendizado React ⚛️

Nesta seção, você encontrará o conteúdo teórico e prático detalhado de cada aula. Siga a ordem recomendada para uma melhor evolução.

📚 Módulos do Curso

Parte 1: Fundamentos Modernos

  1. Aula 01 – Introdução ao Frontend Moderno: Evolução da web, SPAs e primeiros passos.
  2. Aula 02 – JSX, Componentes e Props: O coração do React e reutilização.
  3. Aula 03 – Hooks I: useState: Adicionando interatividade e estado.
  4. Aula 04 – Hooks II: useEffect: Ciclo de vida e sincronização.

Parte 2: Estilização e Ecossistema

  1. Aula 05 – CSS Modules e Styled Components: Estilização profissional e escopo local.
  2. Aula 06 – Formulários com React Hook Form: Validação e experiência do usuário.
  3. Aula 07 – React Router e Navegação: Criando múltiplas páginas no frontend.
  4. Aula 08 – Consumo de APIs (Fetch e Axios): Conectando com o mundo externo.

Parte 3: Estado Global e Performance

  1. Aula 09 – Context API: Resolvendo o Prop Drilling de forma nativa.
  2. Aula 10 – Hooks Avançados (useMemo/Ref): Otimização e acesso ao DOM.
  3. Aula 11 – Performance: lazy e memo: Carregamento inteligente e velocidade.
  4. Aula 12 – Redux Toolkit: Gestão de estado em nível Enterprise.

Parte 4: Qualidade e Cloud

  1. Aula 13 – Testes Unitários (Vitest): Qualidade de código e segurança.
  2. Aula 14 – Integração com Firebase/Supabase: Backend as a Service.
  3. Aula 15 – PWA e Deploy: Colocando sua app no bolso do usuário.
  4. Aula 16 – Projeto Final: Dashboard Completo.

Exercícios

Exercícios de Fixação 📝

Reforce seu aprendizado com desafios práticos para cada aula.

🟢 Nível: Iniciante

🟡 Nível: Intermediário

🔵 Nível: Avançado

🔴 Nível: Expert

Exercícios de Fixação – Aula 01 ✍️

Estes exercícios visam consolidar os conceitos iniciais sobre o ambiente React e a evolução do desenvolvimento web.

🟢 Nível: Básico (Conceitual)

Exercício 01: SPA vs MPA

Explique, com suas palavras, qual a principal diferença de experiência para o usuário final entre uma Multi-Page Application (MPA) tradicional e uma Single Page Application (SPA) moderna.

Exercício 02: O Papel do Node.js

O React é uma biblioteca que roda no navegador. Por que, então, precisamos instalar o Node.js em nossa máquina para desenvolver aplicações React profissionais?

🟡 Nível: Intermediário (Mão na Massa)

Exercício 03: Primeiros Passos com Vite

Utilizando o terminal, crie um novo projeto React chamado laboratorio-01 utilizando o Vite. Descreva quais pastas foram criadas na raiz do projeto e qual a função da pasta src.

Exercício 04: Estrutura do App.jsx

Abra o arquivo App.jsx do seu novo projeto e identifique onde o HTML (ou melhor, JSX) é retornado. Adicione um novo parágrafo <p> com seu nome e a data atual abaixo do título principal.

🔴 Nível: Desafio (Pesquisa e Aplicação)

Exercício 05: Hot Module Replacement (HMR)

Um dos grandes diferenciais do Vite é o HMR. 1. Pesquise e explique brevemente como essa tecnologia funciona. 2. Faça um teste: com o servidor de desenvolvimento rodando (npm run dev), altere o estilo CSS de um elemento no arquivo App.css e observe se a página recarrega inteira ou apenas aplica a mudança visual instantaneamente. Descreva sua observação.

Exercícios de Fixação – Aula 02 🧱

Consolide seus conhecimentos sobre JSX e a criação de Componentes Reutilizáveis.

🟢 Nível: Básico

Exercício 01: Sintaxe JSX

Corrija o código abaixo para que ele seja um JSX válido: 

function MeuComponente() {
  return (
    <h1 class="sucesso">Título</h1>
    <p>Descrição</p>
    <img src="foto.jpg">
  )
}

Exercício 02: Letra Maiúscula

Por que o código <botao>Clique aqui</botao> pode não funcionar como esperado se o objetivo for renderizar um componente React personalizado chamado Botao?

🟡 Nível: Intermediário

Exercício 03: Passando Props

Crie um componente chamado Equipe que recebe uma prop quantidade. O componente deve exibir a frase: "Nossa equipe possui [quantidade] especialistas". No seu App.jsx, chame este componente duas vezes com valores diferentes.

Exercício 04: Destructuring de Props

Reescreva a função abaixo utilizando a técnica de destructuring para capturar nome e idade diretamente nos parâmetros da função: 

function Perfil(props) {
  return (
    <div>
      <h3>Nome: {props.nome}</h3>
      <p>Idade: {props.idade}</p>
    </div>
  );
}

🔴 Nível: Desafio

Exercício 05: Composição de Cards

Crie um componente chamado VideoCard. Ele deve receber as props: thumbnail, titulo, canal e visualizacoes. 1. Estilize o card usando CSS simples (pode ser no App.css). 2. Tente usar o componente dentro de uma lista (mesmo que estática por enquanto) no App.jsx.

Exercícios de Fixação – Aula 03 🎣

Aprenda a lidar com o estado e a reatividade do React através destes exercícios práticos sobre o useState.

🟢 Nível: Básico

Exercício 01: Contador de Cliques

Crie um componente chamado Contador. Utilize o useState para iniciar um valor em 0. Exiba esse valor na tela e adicione dois botões: um para incrementar (+1) e outro para decrementar (-1).

Exercício 02: Campo de Texto (Input)

Crie um componente que tenha um campo de input de texto. Utilize o estado para capturar o que o usuário digita e exiba em tempo real logo abaixo em um parágrafo: "Você está digitando: [valor do input]".

🟡 Nível: Intermediário

Exercício 03: Mostrar/Esconder (Toggle)

Crie um componente que exiba um título "Informação Secreta". Adicione um botão "Mostrar Detalhes". Quando clicado, ele deve exibir um parágrafo com um texto qualquer. Quando clicado novamente, o texto deve sumir.

Exercício 04: Lista de Tarefas Simples

Crie um estado que comece como uma string vazia (para o input) e outro estado que seja um array vazio (para a lista). 1. Ao clicar em um botão "Adicionar", pegue o texto do input e adicione ao array da lista. 2. Exiba a lista de tarefas usando .map().

🔴 Nível: Desafio

Exercício 05: Simulador de Semáforo

Crie um componente que simule um semáforo. 1. O estado deve guardar a cor atual ("verde", "amarelo" ou "vermelho"). 2. Crie um botão "Próximo Passo" que altera a cor seguindo a ordem lógica. 3. Altere o estilo visual de três círculos (divs com border-radius) baseado no estado atual (ex: se o estado for "verde", apenas o círculo de cima fica verde, os outros ficam cinzas).

Exercícios de Fixação – Aula 04 🔄

Exercício 01: Mensagem de Boas-vindas

Crie um componente que use useEffect para exibir um alert("Bem-vindo ao sistema!") apenas uma vez, quando a página for carregada pela primeira vez.

Exercício 02: Título do Documento Reativo

Crie um estado contador. Use o useEffect para que, toda vez que o contador mudar, o título da aba do navegador (document.title) seja atualizado para: "Cliques: [valor]".

Exercício 03: Relógio Digital

Crie um estado hora e use useEffect com setInterval para atualizar a hora a cada segundo. Atenção: Não esqueça de retornar uma função de limpeza para dar o clearInterval quando o componente for destruído.

🟡 Nível: Intermediário

Exercício 04: Buscador de CEP

  1. Crie um input para o CEP.
  2. Escreva um useEffect que dispara uma busca na API https://viacep.com.br/ws/[cep]/json/ sempre que o CEP digitado completar 8 dígitos.
  3. Exiba o endereço (Rua, Bairro, Cidade) na tela.

Exercícios de Fixação – Aula 05 🎨

Exercício 01: CSS Modules

Crie um componente Botao e um arquivo Botao.module.css. 1. Aplique uma classe que mude a cor de fundo para "teal" e aumente o padding. 2. Verifique no navegador como o nome da classe foi alterado para evitar conflitos.

Exercício 02: Styled Components Básico

Instale o styled-components e crie um componente chamado Titulo que seja um h1 com cor azul, fonte em itálico e margem inferior de 20px.

Exercício 03: Estilo Dinâmico (Props)

Crie um componente Box usando Styled Components que recebe uma prop bg. A cor de fundo da div deve ser o valor passado nessa prop. Teste criando três boxes com cores diferentes no App.jsx.

🔴 Nível: Desafio

Exercício 04: Botão Tematizável

Crie um componente BotaoCoringa usando Styled Components que muda completamente de estilo (cores, bordas, sombras) baseado em uma prop tipo (que pode ser 'primario', 'perigo' ou 'sucesso').

Exercícios de Fixação – Aula 06 📝

Exercício 01: Setup do Form

Instale o react-hook-form e crie um formulário simples com um único campo "Nome". 1. Use a função handleSubmit para capturar o envio. 2. Exiba o nome em um alerta ou no console.

Exercício 02: Validação Required

Adicione uma regra de validação que impeça o envio do formulário se o campo "E-mail" estiver vazio. 1. Exiba uma mensagem de erro abaixo do input: "O e-mail é obrigatório". 2. Use o objeto errors do useForm.

🟡 Nível: Intermediário

Exercício 03: Validação de Senha

Crie um campo "Senha" e "Confirmar Senha". 1. A senha deve ter entre 8 e 20 caracteres. 2. (Bônus) Tente validar se as duas senhas são iguais antes de permitir o envio.

Exercício 04: Select Dinâmico

Crie um campo select com as opções: "Dúvida", "Sugestão", "Reclamação". Certifique-se de que o valor selecionado seja capturado corretamente pelo react-hook-form.

Exercícios de Fixação – Aula 07 🗺️

Exercício 01: Setup das Rotas

Crie um projeto novo e configure o BrowserRouter. 1. Crie duas rotas: / (Home) e /contato (Contato). 2. Crie um componente de Navegação com <Link> para ambas. 3. Certifique-se de que a mudança de URL não recarrega a página.

Exercício 02: Rota 404 (Not Found)

Adicione uma rota coringa (path="*") que exiba uma mensagem amigável: "Ops! Essa página não existe. [Voltar para Home]". Teste digitando uma URL inexistente no navegador.

Use o <NavLink> no seu menu de navegação. 1. Crie uma classe CSS chamada .active no seu App.css. 2. Essa classe deve deixar o link em negrito e com uma cor de destaque quando for a página atual.

🟡 Nível: Intermediário

Exercício 04: Redirecionamento Programático

Crie um formulário simples na página de Contato. 1. Use o hook useNavigate. 2. Após o usuário clicar em "Enviar", simule um envio e use o navigate("/") para mandá-lo de volta para a Home automaticamente.

Exercícios de Fixação – Aula 08 📡

Exercício 01: Fetch Básico

Crie um componente que use useEffect e a função fetch para buscar uma piada aleatória na API: https://official-joke-api.appspot.com/random_joke. Exiba a piada (setup) e a resposta (punchline) na tela.

Exercício 02: Introdução ao Axios

Instale o Axios (npm install axios) e refaça o exercício anterior utilizando o axios.get(). Observe a diferença na forma como os dados são recebidos.

🟡 Nível: Intermediário

Exercício 03: Lista de Fotos (Placeholder)

  1. Use a API https://jsonplaceholder.typicode.com/photos.
  2. Liste as primeiras 10 fotos da API.
  3. Exiba o título e a imagem em miniatura (thumbnailUrl).
  4. Use o Axios e tente usar uma função async/await.

Exercício 04: Tratamento de Erro Visual

Modifique o exercício anterior para que ele exiba uma mensagem de erro na tela caso você troque a URL da API para algo incorreto. Use o bloco try/catch.

Exercícios de Fixação – Aula 09 🌐

Exercício 01: Criando um Contexto de Tema

  1. Crie um arquivo ThemeContext.js.
  2. Configure um contexto que guarde o valor 'light' ou 'dark'.
  3. Use o Provider para envolver sua aplicação.

Exercício 02: Consumindo o Tema

Crie um componente Cabecalho que use o hook useContext para ler o tema atual e mudar a cor de fundo do header (ex: preto para dark, branco para light).

🟡 Nível: Intermediário

Exercício 03: Alterando o Contexto

Adicione uma função toggleTheme ao seu contexto. No componente Configuracoes, crie um botão que, ao ser clicado, alterna o tema globalmente. Observe como todos os componentes que usam o contexto mudam de cor ao mesmo tempo.

Exercício 04: Contexto de Autenticação (Simulado)

  1. Crie um AuthContext que guarde um objeto usuario (inicialmente null).
  2. Crie uma função login que define um objeto { nome: 'Admin', logado: true }.
  3. Na Navbar, mostre "Bem-vindo, Admin" se houver usuário, ou um botão "Entrar" se estiver null.

Exercícios de Fixação – Aula 10 🏗️

Exercício 01: useRef e Foco Automático

Crie um componente que tenha um formulário de login (E-mail e Senha). 1. Ao carregar a página, o campo de E-mail deve receber foco automaticamente usando useRef. 2. Adicione um botão "Limpar e Focar" que limpa os campos e volta o cursor para o e-mail.

Exercício 02: useMemo para Filtros

Crie uma lista de nomes (pelo menos 20 nomes). 1. Adicione um input de busca. 2. Use o useMemo para filtrar a lista conforme o usuário digita. 3. Coloque um console.log dentro do filtro para provar que ele não roda sem necessidade.

🟡 Nível: Intermediário

Exercício 03: useCallback e Componente Memoizado

  1. Crie um componente filho que recebe uma função via prop.
  2. Memoize o filho com React.memo.
  3. No pai, use o useCallback para passar a função para o filho.
  4. Verifique se o filho para de renderizar quando outros estados do pai mudam.

Exercício 04: Contador Silencioso com useRef

Crie um botão que incrementa uma variável salva dentro de um useRef. 1. Exiba o valor atual no console. 2. Verifique que o valor muda, mas o número na tela (se você usar um h1 estático) não é atualizado. 3. Adicione um botão de "Forçar Render" (usando um useState bobo) e veja o valor do ref aparecendo.

Exercícios de Fixação – Aula 11 🚀

Exercício 01: React.memo

Crie um componente CardEstatico que recebe apenas um título. 1. No componente pai, crie um contador que atualiza a cada segundo. 2. Use o React.memo no CardEstatico para garantir que ele não renderize novamente em cada segundo, já que o título não muda.

Exercício 02: Lazy Loading de Rotas

No seu projeto com React Router: 1. Transforme as páginas Sobre e Contato em componentes carregados via lazy. 2. Use o Suspense para mostrar a mensagem "Carregando Página..." enquanto elas são baixadas.

🟡 Nível: Intermediário

Exercício 03: Diferindo o Carregamento de Imagens

Crie uma galeria de 10 imagens. 1. Adicione o atributo loading="lazy" em todas elas. 2. Use imagens de alta resolução do Unsplash. 3. Observe no Inspetor de Elementos (aba Network) que as imagens só são baixadas quando você faz scroll e se aproxima delas.

Exercício 04: Análise com Profiler

  1. Abra o React DevTools no seu navegador.
  2. Vá na aba "Profiler" e clique em gravar.
  3. Realize algumas interações na sua lista filtrável da aula anterior.
  4. Pare a gravação e identifique qual componente está levando mais tempo para renderizar.

Exercícios de Fixação – Aula 12 🏪

Exercício 01: Configurando a Store

Instale o Redux Toolkit e o React Redux. Crie um arquivo store.js e configure uma store vazia. Envolva sua aplicação no <Provider store={store}>.

Exercício 02: Meu Primeiro Slice

Crie um slice chamado userSlice. 1. Estado inicial: { name: 'Visitante', isLogged: false }. 2. Adicione uma action login que muda o nome para 'Ricardo' e isLogged para true. 3. Adicione uma action logout que reseta os valores.

🟡 Nível: Intermediário

Exercício 03: useSelector e useDispatch

No seu componente Header: 1. Use o useSelector para exibir o nome do usuário que está na store. 2. No botão de login, use o useDispatch para disparar a action login. 3. Verifique se o nome muda na aplicação toda sem usar Context ou Props.

Exercício 04: Slice de Lista (Favoritos)

Crie um favoritesSlice que guarda um array de strings (IDs de filmes). 1. Action addFavorite: Adiciona um ID ao array. 2. Action removeFavorite: Remove um ID do array. 3. Exiba o contador de favoritos no seu menu de navegação.

Exercícios de Fixação – Aula 13 🧪

Exercício 01: Primeiro Teste

Instale o Vitest e o React Testing Library. 1. Crie um componente Titulo que apenas exibe um h1 com o texto "Olá Mundo". 2. Escreva um teste que verifica se o texto "Olá Mundo" está presente no documento.

Exercício 02: Testando Props

Crie um componente Card que recebe a prop nome. 1. Escreva um teste que passa um nome específico e verifica se ele é renderizado corretamente. 2. Use o screen.getByText com uma Expressão Regular (Regex) para ser insensível a maiúsculas/minúsculas.

🟡 Nível: Intermediário

Exercício 03: Testando Interação (Clique)

Crie um componente Contador. 1. O valor inicial deve ser 0. 2. Ao clicar no botão "Aumentar", o valor deve ir para 1. 3. Use o fireEvent.click ou userEvent.click para simular o clique no teste.

Exercício 04: Testando Estado Condicional

Crie um componente Mensagem que tem um botão de "Mostrar/Esconder". 1. Escreva um teste que verifica que a mensagem está oculta por padrão. 2. Simule o clique e verifique se a mensagem apareceu. 3. Verifique se ela some ao clicar novamente.

Exercícios de Fixação – Aula 14 ☁️

Exercício 01: Configuração do Projeto Cloud

Acesse o console do Firebase ou do Supabase. 1. Crie um novo projeto chamado "MeuProjetoReact". 2. Ative o Banco de Dados (Firestore ou PostreSQL). 3. Copie as chaves de configuração.

Exercício 02: Inserção de Dados

No seu componente React: 1. Instale o SDK (ex: npm install firebase). 2. Crie uma função que salve um objeto { nome: 'Teste', data: new Date() } no banco ao clicar em um botão. 3. Verifique no console da nuvem se o dado apareceu.

🟡 Nível: Intermediário

Exercício 03: Listagem em Tempo Real

  1. Use a função de escuta (ex: onSnapshot no Firebase ou subscribe no Supabase).
  2. Exiba uma lista de itens vinda do banco.
  3. Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar.

Exercício 04: Upload de Imagem (Storage)

Configure o Storage na sua plataforma cloud. 1. Crie um campo de input do tipo file. 2. Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso.

Exercícios de Fixação – Aula 15 🚀

Exercício 01: Meta Tags de Redes Sociais

No arquivo index.html do seu projeto final: 1. Altere o <title> para o nome do seu projeto. 2. Adicione uma meta tag description. 3. Adicione as tags Open Graph (og:title e og:description) para que o link fique bonito ao ser compartilhado no Discord ou WhatsApp.

Exercício 02: Criando a Conta de Deploy

  1. Crie uma conta na Vercel ou Netlify usando seu login do GitHub.
  2. Conecte seu repositório do curso.

🟡 Nível: Intermediário

Exercício 03: Lighthouse Check

  1. No Chrome, abra seu site (mesmo que localmente).
  2. Vá em Inspecionar -> Lighthouse.
  3. Gere um relatório focado em "Performance" e "SEO".
  4. Tente corrigir pelo menos um item sugerido (ex: adicionar alt em uma imagem ou mudar o contraste de uma cor).

Exercício 04: PWA Básico

  1. No seu projeto Vite, instale o plugin vite-plugin-pwa.
  2. Configure um manifesto básico com nome, cor e um ícone.
  3. Teste se, ao rodar o projeto, o navegador exibe o ícone de "Instalar Aplicativo" na barra de endereços.

Exercícios de Fixação – Aula 16 🏆

Exercício 01: Definição de Escopo

  1. Escolha o tema do seu projeto final.
  2. Liste as 5 funcionalidades principais (Features) que seu app terá.
  3. Desenhe um rascunho (Wireframe) das 3 telas principais: Home, Dashboard e Detalhes.

Exercício 02: Configuração da Store Global

  1. Desenhe a estrutura do seu estado global.
  2. Quais dados precisam estar no Redux? Quais podem ficar no useState local?
  3. Crie os arquivos iniciais da sua Store.

🟡 Nível: Intermediário

Exercício 03: Checklist de Performance

Antes de finalizar o projeto, verifique: 1. Todas as imagens possuem loading="lazy"? 2. Existem componentes pesados que poderiam usar React.memo? 3. As rotas estão usando lazy e Suspense?

Exercício 04: Preparação do Pitch

Escreva um pequeno texto (ou tópicos) para sua apresentação final: 1. Qual foi o maior "bug" que você resolveu durante o curso? 2. Como você organizou as pastas do seu projeto final? 3. Se tivesse mais uma semana, o que você adicionaria de novo?

Projetos

Projetos e Portfólio 🎨

Aplique o conhecimento em cenários reais para turbinar seu portfólio.

🚀 Lista de Projetos

Módulo Inicial

Módulo Intermediário

Módulo Avançado

Módulo Final

Projeto 01 – Meu Primeiro Universo React 🚀

Neste projeto inicial, você vai configurar seu ambiente de desenvolvimento profissional e criar sua primeira aplicação React personalizada.

🎯 Objetivo

Configurar o ambiente (Node, VS Code, Vite), rodar a aplicação e realizar as primeiras modificações estruturais no código.

🛠️ Requisitos

  1. Node.js LTS instalado.
  2. VS Code com as extensões:
    • ES7+ React/Redux/React-Native snippets.
    • Prettier - Code formatter.

📝 Passo a Passo

1. Criação do Boilerplate

No seu terminal, navegue até a pasta onde guarda seus cursos e execute:

$ npm create vite@latest primeiro-app-react -- --template react

2. Instalação e Execução

Entre na pasta e instale os pacotes:

$ cd primeiro-app-react
$ npm install
$ npm run dev

Acesse o link gerado (geralmente http://localhost:5173).

3. Personalização

Abra o projeto no VS Code e faça as seguintes alterações: - No arquivo App.jsx, remova todo o conteúdo dentro da return ( ... ) do componente App. - Crie uma estrutura simples com um <h1> (Seu Nome), um <h2> (Sua Profissão/Objetivo) e uma lista <ul> com 3 tecnologias que você deseja aprender neste curso.

✅ Critérios de Entrega

  • O projeto deve estar rodando sem erros no console.
  • A interface deve exibir as informações personalizadas solicitadas no passo 3.
  • O aluno deve ser capaz de explicar o que o comando npm run dev faz.

Projeto Concluído

Parabéns! Você acaba de quebrar a barreira inicial e já tem um ambiente React funcional e pronto para as próximas aulas.

Projeto 02 – Galeria de Componentes Dinâmicos 🎨

Neste projeto, você vai aplicar a componentização para criar uma galeria de produtos (como um e-commerce simplificado).

🎯 Objetivo

Desenvolver componentes reutilizáveis, organizar o projeto em pastas e utilizar props para exibir diferentes conteúdos na mesma estrutura visual.

🛠️ Requisitos

  • Uso de Props para passar dados.
  • Organização de componentes em uma pasta própria (src/components).
  • Uso de CSS para estilização básica.

📝 Passo a Passo

1. Preparação

No seu projeto criado na Aula 01, crie uma pasta chamada components dentro da src.

2. Criação do Componente Item

Crie o arquivo src/components/CardProduto.jsx. Ele deve exibir: - Uma imagem (pode usar https://via.placeholder.com/150). - Nome do produto. - Preço. - Um botão "Comprar".

3. Implementação

No arquivo App.jsx, importe o CardProduto e chame-o pelo menos 4 vezes, simulando produtos diferentes (ex: Teclado, Mouse, Monitor, Headset).

4. Estilização

Crie um arquivo Card.css (ou use o App.css) para garantir que os cards fiquem um ao lado do outro e tenham uma borda ou sombra elegante.

✅ Critérios de Entrega

  • O código deve estar limpo e sem avisos no terminal.
  • A interface deve mostrar os 4 produtos diferentes de forma organizada.
  • O aluno deve demonstrar que as informações mudam através das props, sem duplicar o código HTML inteiro do card.

Dica: Imagens Reais

Você pode usar o site Unsplash Source para carregar imagens reais de tecnologia nos seus cards!

Projeto 03 – O Gestor de Finanças Pessoal 💰

Neste projeto, você vai aplicar o useState para criar um mini sistema de controle financeiro que permite adicionar ganhos e gastos.

🎯 Objetivo

Gerenciar múltiplos estados, lidar com arrays no React e criar uma interface reativa que responde a inputs do usuário.

🛠️ Requisitos

  • Uso de useState para o saldo total.
  • Uso de useState para a lista de transações (array).
  • Renderização de listas com .map().
  • Estilização condicional (ex: valores negativos em vermelho).

📝 Passo a Passo

1. Estrutura do Estado

No seu App.jsx, crie dois estados principais: - transacoes: Um array de objetos { id, texto, valor }. - inputTexto e inputValor: Para capturar os dados do formulário.

2. Formulário de Entrada

Crie um formulário com dois campos e um botão "Adicionar Transação". - Dica: Use o evento onChange para atualizar os estados dos inputs.

3. Lógica de Adição

Crie uma função adicionarTransacao que: - Evita o comportamento padrão do form (e.preventDefault()). - Cria um novo objeto de transação. - Usa o spread operator para adicionar ao array: setTransacoes([...transacoes, novaTransacao]).

4. Exibição e Saldo

  • Crie um componente Resumo que calcula a soma de todas as transações e exibe o saldo atual.
  • Liste as transações abaixo do formulário.

✅ Critérios de Entrega

  • O saldo total deve atualizar automaticamente ao adicionar uma nova transação.
  • A lista deve exibir o nome e o valor de cada item.
  • O código não deve realizar mutações diretas no array (usar funções que retornam novos arrays).

Bônus

Adicione um botão "Remover" em cada transação que filtre o array para deletar o item selecionado!

Projeto 04 – Explorador de Repositórios do GitHub 🐙

Neste projeto, você vai construir uma aplicação real que consome a API oficial do GitHub para listar os projetos de qualquer usuário.

🎯 Objetivo

Dominar o consumo de APIs (Fetch), manipular estados assíncronos e utilizar o useEffect para sincronização de dados.

🛠️ Requisitos

  • Uso de useEffect para busca inicial.
  • Uso de fetch para chamada de API.
  • Gerenciamento de estados de: loading, error e data.
  • Interface organizada para exibir os repositórios.

📝 Passo a Passo

1. Preparação da API

A URL base será: https://api.github.com/users/[NOME_USUARIO]/repos.

2. Estados Iniciais

No seu componente principal, crie: 

const [repos, setRepos] = useState([]);
const [loading, setLoading] = useState(true);

3. Chamada Assíncrona

Crie uma função carregarRepositorios dentro do useEffect. - Use try/catch para capturar erros de rede. - Converta a resposta para JSON. - Salve no estado repos e mude loading para false.

4. Interface Reativa

  • Exiba um spinner ou texto "Carregando..." enquanto o estado for true.
  • Use o .map para listar repo.name e repo.html_url.
  • Estilize a lista usando CSS Grid ou Flexbox.

✅ Critérios de Entrega

  • A página deve carregar repositórios reais do seu próprio GitHub ao abrir.
  • Deve haver um tratamento básico de erro (ex: Usuário não encontrado).
  • A lista deve ser clicável e levar para o repositório original.

Limite de Taxa

A API do GitHub tem um limite de requisições por hora para usuários não autenticados. Se parar de funcionar, aguarde alguns minutos!

Projeto 05 – Landing Page Tematizável 🌈

Nesta aula, você vai construir uma página que demonstra o poder da estilização dinâmica com Styled Components.

🎯 Objetivo

Implementar um sistema de "Troca de Temas" (Theming) básico e utilizar componentes estilizados que reagem a props.

🛠️ Requisitos

  • Uso de Styled Components.
  • Implementação de um botão que alterna entre tema "Claro" e "Escuro" (ou outros temas criativos).
  • Nenhum arquivo .css externo deve ser usado, apenas CSS-in-JS.

📝 Passo a Passo

1. Instalação

No terminal:

$ npm install styled-components

2. Criação dos Componentes Estilizados

Crie um arquivo src/styles.js e defina: - Container: Uma div que ocupa a tela toda com transição suave de cor. - BotaoTema: Um botão que muda de estilo visual dependendo do tema. - Texto: Um parágrafo estilizado.

3. Lógica de Alternância

No App.jsx, use um useState para controlar qual tema está ativo. Passe essa informação via props para seus componentes estilizados.

4. Conteúdo da Página

Adicione uma seção de Hero (título grande), uma breve descrição e o botão de toggle centralizado.

✅ Critérios de Entrega

  • A troca de tema deve ser instantânea e sem recarregamento da página.
  • As cores devem ser harmoniosas em ambos os temas.
  • O código deve demonstrar o uso de props dentro dos template literals do Styled Components.

Desafio Extra

Tente usar o ThemeProvider do próprio Styled Components para gerenciar as cores de forma global!

Projeto 06 – Central de Atendimento ao Cliente 🎧

Neste projeto, você vai aplicar o react-hook-form para criar um sistema de tickets de suporte profissional e validado.

🎯 Objetivo

Gerenciar formulários complexos, tratar erros de validação em tempo real e garantir que apenas dados válidos sejam enviados para o "servidor".

🛠️ Requisitos

  • Uso de react-hook-form.
  • Validação de formato de e-mail (Regex).
  • Mensagens de erro personalizadas e visuais (estilizadas em vermelho).
  • Estado de "Enviando..." após o clique no botão.

📝 Passo a Passo

1. Instalação

No terminal:

$ npm install react-hook-form

2. Estrutura do Formulário

Crie um componente FormSuporte com os campos: - Nome Completo (Obrigatório, min 3 letras). - E-mail de Contato (Obrigatório, formato válido). - Assunto (Select: Técnico, Financeiro, Outros). - Mensagem (Textarea, obrigatório, min 20 caracteres).

3. Tratamento de Erros

Mostre as mensagens de erro logo abaixo de cada campo assim que o foco sair dele ou ao clicar em enviar.

4. Simulação de Envio

Na função onSubmit, use um setTimeout de 2 segundos para simular uma resposta de rede antes de exibir a mensagem final de "Ticket aberto com sucesso!".

✅ Critérios de Entrega

  • O botão de enviar deve estar desabilitado ou dar feedback visual se houver erros.
  • O objeto de dados final deve ser exibido no console no formato JSON correto.
  • O código deve utilizar o spread operator {...register("campo")} corretamente.

Dica Pro

Use a biblioteca react-toastify para mostrar as mensagens de sucesso de forma elegante no canto da tela!

Projeto 07 – Minha Primeira Rede Social (Navegação) 📱

Neste projeto, você vai construir a estrutura de navegação de uma rede social simplificada, lidando com perfis dinâmicos e rotas protegidas por lógica.

🎯 Objetivo

Dominar a estruturação de rotas complexas, parâmetros de URL e navegação programática.

🛠️ Requisitos

  • Uso de BrowserRouter, Routes e Route.
  • Criação de uma rota dinâmica para o perfil do usuário (/perfil/:username).
  • Uso de Link e useNavigate.

📝 Passo a Passo

1. Estrutura de Páginas

Crie os componentes/páginas: - Feed: Onde aparecem as postagens (Home). - Explorar: Uma lista de usuários sugeridos. - Perfil: Mostra o nome do usuário vindo da URL.

2. Menu de Navegação

Crie um componente SideBar que fique visível em todas as rotas e contenha links para Feed e Explorar.

3. Rota Dinâmica

Configure a rota do Perfil. Dentro do componente Perfil, use o useParams para mostrar na tela: "Você está visualizando o perfil de: [username]".

4. Navegação Programática

Na página de Explorar, adicione um botão "Logoff". Ao clicar, o sistema deve usar o useNavigate para mandar o usuário para uma página de Login (que você também deve criar).

✅ Critérios de Entrega

  • Ao navegar entre Feed e Explorar, o componente Sidebar não deve sumir da tela.
  • Ao acessar /perfil/ricardo, a tela deve mostrar "ricardo".
  • Ao acessar uma URL inexistente, a página de erro 404 deve ser exibida.

Dica de UI

Use o NavLink para que o ícone ou texto do menu mude de cor quando o usuário estiver naquela aba específica!

Projeto 08 – Dashboard de Criptomoedas 📉

Neste projeto, você vai construir um painel financeiro que consome dados reais do mercado de moedas digitais.

🎯 Objetivo

Dominar o Axios, instâncias de API, tratamento de erros e renderização condicional de dados externos.

🛠️ Requisitos

  • Uso de Axios para as requisições.
  • Criação de uma instância centralizada de API (api.js).
  • Uso de Async/Await.
  • Tratamento de estados de Erro e Loading.

📝 Passo a Passo

1. Escolha da API

Utilize a API pública da CoinGecko: https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1

2. Service API

Crie a pasta src/services e o arquivo api.js configurando a URL base da CoinGecko.

3. Componente Lista

No componente principal: - Dispare a busca no useEffect. - Mapeie o array de moedas para exibir: Nome, Logotipo, Preço Atual e Variação nas últimas 24h.

4. Refinamento de UX

  • Crie um botão "Atualizar Dados" que chama a função de busca novamente.
  • Estilize a tabela ou os cards para que fiquem com aspecto profissional (use Tailwind ou Styled Components).

✅ Critérios de Entrega

  • A aplicação deve mostrar dados reais de pelo menos 10 criptomoedas.
  • Se o usuário estiver sem internet, uma mensagem clara de erro capturada pelo catch deve aparecer.
  • O código deve estar organizado seguindo o padrão de Services.

Bônus

Adicione um input de busca para filtrar a lista localmente por nome da moeda!

Projeto 09 – Sistema de Preferências do Usuário (Multilíngue) 🌍

Neste projeto, você vai construir um sistema onde o usuário pode escolher o idioma e o tema do site, e essas escolhas serão refletidas em toda a aplicação instantaneamente.

🎯 Objetivo

Implementar a Context API para gerenciar configurações globais, entender o papel do Provider e criar uma aplicação multi-componente sincronizada.

🛠️ Requisitos

  • Criação de um SettingsContext.
  • Gerenciamento global de Idioma (PT/EN) e Tema (Light/Dark).
  • Uso de pelo menos 3 componentes consumidores em níveis diferentes de hierarquia.

📝 Passo a Passo

1. Criando o Contexto

Crie o arquivo src/contexts/SettingsContext.jsx. O estado inicial deve ter: - linguagem: 'pt' - tema: 'light'

2. O Power Provider

Envolva sua aplicação no App.jsx com o SettingsProvider. Certifique-se de passar tanto os valores quanto as funções de alteração (ex: setLinguagem).

3. Componentes Consumidores

  • Header: Mostra o título no idioma selecionado.
  • Conteúdo: Um texto longo que também traduz entre PT e EN.
  • Footer: Contém os botões (Selects ou Toggles) para mudar as configurações globais.

4. Dicionário de Tradução

Crie um objeto simples para as traduções: 

const frases = {
  pt: { saudacao: 'Olá', subtitulo: 'Bem-vindo ao sistema' },
  en: { saudacao: 'Hello', subtitulo: 'Welcome to the system' }
}

✅ Critérios de Entrega

  • Ao mudar o idioma no Footer, o texto do Header deve mudar instantaneamente.
  • A escolha do tema deve afetar as cores de fundo de toda a página.
  • Não deve haver "Prop Drilling" (passagem manual de props entre os componentes intermediários).

Dica: localStorage

Como desafio extra, tente salvar a escolha do usuário no localStorage do navegador para que, ao recarregar a página, as preferências sejam mantidas!

Projeto 10 – Analytics Dashboard Otimizado 📊

Neste projeto, você vai construir um painel de dados que lida com grandes volumes de informação simulada, aplicando hooks avançados para garantir 60 FPS (quadros por segundo).

🎯 Objetivo

Identificar gargalos de performance, aplicar useMemo e useCallback corretamente e gerenciar o DOM de forma imperativa com useRef.

🛠️ Requisitos

  • Uso de useMemo para processamento de dados.
  • Uso de useRef para focar elementos ou controlar bibliotecas externas (ex: Charts).
  • Implementação de uma lista filtrável com mais de 100 itens.

📝 Passo a Passo

1. Mock de Dados

Crie uma função que gera 500 objetos de "Vendas" com: id, vendedor, valor e data.

2. Painel de Estatísticas

Crie 3 cards que mostram: Total de Vendas, Média de Valor e Maior Venda. - Regra: Esses cálculos devem estar dentro de um useMemo que depende apenas da lista de vendas.

3. Filtro de Vendedores

Crie um input de busca por nome de vendedor. - A filtragem deve ser otimizada para não rodar se o usuário estiver apenas mudando o tema do site, por exemplo.

4. Foco Instantâneo

Ao clicar em um botão "Novo Filtro", o input de busca deve ser limpo e focado automaticamente através de uma ref.

✅ Critérios de Entrega

  • O componente não deve "travar" ao digitar no campo de busca.
  • Deve ser possível provar que as funções de cálculo não rodam fora de hora (via console.logs).
  • O código deve estar limpo e bem documentado sobre o porquê de cada otimização.

Dica de Mestre

Use o Profiler do React DevTools para gravar uma interação e comprove que os componentes memorizados não estão renderizando sem necessidade!

Projeto 11 – Galeria de Mídia de Próxima Geração ⚡

O objetivo deste projeto é construir uma aplicação de mídia que carregue instantaneamente, mesmo com centenas de itens, utilizando todas as técnicas de performance aprendidas.

🎯 Objetivo

Reduzir o "Tamanho do Bundle", evitar re-renderizações desnecessárias e otimizar o carregamento de recursos externos.

🛠️ Requisitos

  • Uso de React.lazy e Suspense para rotas.
  • Uso de React.memo em componentes de card.
  • Otimização de carregamento de imagens (Lazy Load nativo).
  • Divisão de componentes em "pedaços" (Splitting).

📝 Passo a Passo

1. Roteamento Inteligente

Configure pelo menos 3 rotas (Home, Galeria, Sobre). As rotas Galeria e Sobre devem ser carregadas via lazy.

2. Cards Memorizados

Crie um componente FotoCard. Ele deve ser envolvido em memo. Passe um ID e uma URL de imagem. Adicione um contador no componente pai e prove que os cards não renderizam quando o contador muda.

3. Esqueleto de Carregamento (Skeleton)

Em vez de um texto "Carregando...", crie um componente de Skeleton (uma div cinza animada) para mostrar enquanto as fotos ou as páginas não carregam.

4. Análise de Build

Rode o comando npm run build e observe o terminal para ver o tamanho dos arquivos gerados antes e depois do lazy loading.

✅ Critérios de Entrega

  • A aplicação deve pontuar alto no Lighthouse (aba Performance).
  • Não deve haver "piscadas" bruscas de conteúdo ao trocar de página.
  • O uso de memo e lazy deve ser justificado no código através de comentários.

Bônus

Use a biblioteca react-intersection-observer para criar uma animação de "surgimento" das imagens conforme entram na tela!

Projeto 12 – E-commerce Pro com Redux Toolkit 🛒

Neste projeto de nível profissional, você vai gerenciar todo o estado de um e-commerce (Carrinho, Autenticação e Favoritos) usando Redux.

🎯 Objetivo

Arquitetar uma store global escalável, lidar com múltiplas fatias de estado (slices) e garantir a sincronia entre diferentes partes da aplicação.

🛠️ Requisitos

  • Uso de Redux Toolkit (@reduxjs/toolkit).
  • Pelo menos 3 Slices: cart, auth e products.
  • Persistência básica ou feedback visual de mudanças globais.

📝 Passo a Passo

1. Configuração da Store

Crie o arquivo src/store/index.js e combine pelo menos os reducers de cart e auth.

2. O Carrinho de Compras

No cartSlice, crie as lógicas de: - addItem: Adiciona item (se já houver, aumenta a quantidade). - removeItem: Remove item completamente. - clearCart: Limpa tudo.

3. Sistema de Login

No authSlice, gerencie se o usuário está logado. - Regra: O botão "Adicionar ao Carrinho" na vitrine só deve funcionar se o usuário estiver logado no Redux.

4. Integração Visual

  • Navbar: Mostra a quantidade total de itens no carrinho e o nome do usuário.
  • Página de Carrinho: Lista os itens, mostra o valor total e permite alterar quantidades.

✅ Critérios de Entrega

  • O estado deve ser consistente (ex: ao deletar um item no carrinho, o número na Navbar deve diminuir na mesma hora).
  • Uso correto dos hooks useSelector e useDispatch.
  • A Store deve estar bem organizada na pasta store/ do projeto.

Bônus: Redux Persist

Tente integrar a biblioteca redux-persist para que os itens do carrinho não sumam mesmo se o usuário der F5 na página!

Projeto 13 – Biblioteca de Componentes Testada 🧪

Neste projeto, você vai criar uma pequena biblioteca de componentes UI (Botão, Input, Modal) e garantir que todos funcionem perfeitamente através de testes automatizados.

🎯 Objetivo

Configurar o ambiente de testes do zero, escrever suítes de teste para diferentes cenários e garantir 100% de confiança nas interações críticas.

🛠️ Requisitos

  • Uso de Vitest e React Testing Library.
  • Implementação de testes para: Renderização, Props e Eventos de Clique.
  • Uso de jest-dom para asserções amigáveis.

📝 Passo a Passo

1. Configuração do Vitest

Crie o arquivo vitest.config.js e configure o ambiente para jsdom.

2. Componente de Botão

Crie um componente MeuBotao que aceita as props children, onClick e disabled. - Teste se ele renderiza o texto passado em children. - Teste se a função onClick é disparada ao clicar. - Teste se ele fica desabilitado quando a prop disabled for verdadeira.

3. Componente de Input de Busca

Crie um componente que tenha um input e um botão de limpar. - Teste se o valor do input muda ao digitar. - Teste se o campo fica vazio ao clicar no botão "Limpar".

4. Rodando os Testes

Use o comando npm test para visualizar o relatório de sucesso no terminal.

✅ Critérios de Entrega

  • Todos os testes devem passar (ficar verdes).
  • Os arquivos de teste devem ter a extensão .test.jsx ou .spec.jsx.
  • O código deve estar livre de "warnings" de act() (comum em testes assíncronos).

Bônus

Tente habilitar a visualização de Coverage (Cobertura) para ver quanto por cento do seu código está sendo testado!

Projeto 14 – Meu Diário na Nuvem ✍️☁️

Neste projeto, você vai construir uma aplicação de diário pessoal ou notas onde as informações são salvas com segurança no Firebase ou Supabase.

🎯 Objetivo

Dominar a integração de SDKs externos, gerenciar credenciais de ambiente e lidar com persistência de dados real.

🛠️ Requisitos

  • Integração com Firebase Firestore ou Supabase.
  • Uso de variáveis de ambiente (.env).
  • Lógica de CRUD (Create, Read, Update, Delete).

📝 Passo a Passo

1. Ambiente Virtual

Crie o arquivo .env na raiz do seu projeto Vite e adicione suas chaves: VITE_FIREBASE_KEY=sua_chave_aqui

2. Configuração do SDK

Crie o arquivo src/services/firebase.js (ou supabase.js) e inicialize o serviço exportando o objeto de conexão com o banco.

3. Criando Notas

Crie um formulário com título e conteúdo da nota. Ao clicar em "Salvar", envie para a coleção notas no banco de dados.

4. Gestão de Notas

  • Liste todas as notas salvas.
  • Adicione um botão de "Lixeira" em cada nota para deletá-la do banco de dados global.

✅ Critérios de Entrega

  • As notas devem persistir (ficar salvas) mesmo se você fechar o navegador e abrir de novo.
  • Não deve haver chaves expostas no código principal (usar as variáveis de ambiente).
  • A interface deve mostrar um feedback visual de "Salvando..." durante a operação.

Bônus

Adicione Autenticação! Permita que o usuário faça login com o Google para ver apenas as notas que ELE criou!

Projeto 15 – Portfolio Profissional no Ar 🚀🌐

Neste projeto, você vai consolidar sua identidade como desenvolvedor, criando um portfólio pessoal e fazendo o deploy oficial para o mundo todo ver.

🎯 Objetivo

Configurar SEO, transformar o site em PWA e dominar o fluxo de Continuous Integration/Continuous Deployment (CI/CD).

🛠️ Requisitos

  • Uso de Meta Tags completas.
  • Configuração de Vite PWA Plugin.
  • Deploy realizado na Vercel ou Netlify.

📝 Passo a Passo

1. Polimento de Conteúdo

Crie uma página com: - Sua Bio. - Lista de tecnologias que domina. - Links para seus outros 14 projetos do curso (pode usar os links do GitHub).

2. Configuração PWA

Configure o plugin PWA para que seu portfólio possa ser instalado no celular: - Ícone 512x512. - Nome curto e cor de tema.

3. O Grande Deploy

Conecte seu GitHub à plataforma de deploy escolhida. - Configure as variáveis de ambiente (se houver, ex: chaves do Firebase). - Rode o primeiro deploy e verifique o link público.

4. Teste de Acessibilidade

Rode o Lighthouse e garanta que sua nota de SEO e Acessibilidade esteja acima de 90.

✅ Critérios de Entrega

  • O site deve estar acessível por uma URL pública (ex: meunome.vercel.app).
  • O compartilhamento do link no WhatsApp deve exibir título e imagem corretos.
  • O site deve permitir ser "Adicionado à tela de início" em dispositivos Android/iOS.

Dica Final

Coloque o link do seu portfólio no seu perfil do LinkedIn! É o primeiro passo para conseguir sua primeira oportunidade no mundo dev!

Projeto 16 – O Grande Dashboard 🏆⚛️

Este é o seu trabalho de conclusão de curso! Você vai mostrar tudo o que aprendeu construindo uma aplicação robusta e pronta para o mercado.

🎯 Objetivo

Integrar Rotas, Estado Global (Redux/Context), Consumo de API real, Validação de Formulários e Otimizações de Performance em um único projeto profissional.

🛠️ Requisitos Obrigatórios

  1. SPA com React Router: Pelo menos 4 rotas protegidas.
  2. Redux Toolkit: Gestão centralizada de pelo menos uma fatia de estado (ex: Carrinho ou User).
  3. Axios/Fetch: Consumo de dados externos.
  4. React Hook Form: Formulário de entrada de dados com validações.
  5. Design Premium: Uso de Tailwind ou Styled Components com foco em UX.
  6. Deploy: Site online e funcional.

📝 Sugestões de Temas

  • Dashboard de Cripto/Ações: Gráficos, histórico e favoritos.
  • Plataforma de E-learning: Lista de aulas, progresso e perfil.
  • Sistema de RH: Cadastro de funcionários, filtros e estatísticas.
  • E-commerce de Eletrônicos: Filtros, carrinho, checkout e histórico.

🚀 Passo a Passo

1. Planejamento

Defina seu tema e as rotas. Configure o projeto com o plugin de PWA.

2. Infraestrutura

Configure o Redux e o Axios. Se for usar Firebase, configure a conexão.

3. UI/UX

Construa os componentes reutilizáveis primeiro (Botões, Inputs, Layout). Depois monte as páginas.

4. Testes e Otimização

Escreva 3 testes críticos. Rode o Lighthouse e otimize as imagens e o bundle (Lazy load).

✅ Critérios de Avaliação

  • Funcionalidade: O app faz o que se propõe sem erros no console?
  • Código: Está limpo, modular e bem organizado?
  • Performance: A navegação é fluida e o site carrega rápido?
  • Apresentação: Você consegue explicar as decisões técnicas que tomou?

Gran Finale

Este projeto é o seu cartão de visitas. Capriche nos detalhes, adicione animações (Framer Motion é uma dica!) e mostre que você é agora um Desenvolvedor React de verdade!

Quizzes

Quizzes Interativos 🧠

Teste seus conhecimentos em tempo real com nossos quizzes.

📝 Lista de Avaliações

  1. Quiz 01: Fundamentos Web
  2. Quiz 02: JSX e Componentes
  3. Quiz 03: Hooks e useState
  4. Quiz 04: useEffect e Ciclo de Vida
  5. Quiz 05: Estilização Moderna
  6. Quiz 06: Formulários Digitais
  7. Quiz 07: Rotas e Navegação
  8. Quiz 08: Consumo de APIs
  9. Quiz 09: Context API
  10. Quiz 10: Hooks Avançados
  11. Quiz 11: Performance e Otimização
  12. Quiz 12: Redux Toolkit
  13. Quiz 13: Testes Unitários
  14. Quiz 14: Integração Cloud
  15. Quiz 15: PWA e Deploy
  16. Quiz 16: Revisão Final

Quiz 01 - Introdução

1. Qual a principal característica de uma Single Page Application (SPA)?
O servidor recarrega a página inteira a cada clique do usuário.
O conteúdo é atualizado dinamicamente via JavaScript sem recarregar a página.
Ela só funciona se o usuário tiver o Node.js instalado no navegador.
É uma aplicação que possui apenas uma única linha de código. *Explicação: Em uma SPA, o JavaScript intercepta as navegações e atualiza o DOM dinamicamente, evitando o "piscar" do recarregamento total da página.*
2. O que significa a sigla JSX utilizada no React?
Java Syntax eXtension.
JavaScript XML.
JSON Service eXchange.
JavaScript eXtended. *Explicação: JSX é uma extensão de sintaxe para o JavaScript que permite escrever estruturas que se parecem com HTML dentro do código JS.*
3. Qual ferramenta é utilizada para gerenciar as bibliotecas e dependências em um projeto React?
Vite.
Virtual DOM.
NPM ou Yarn.
Chrome DevTools. *Explicação: NPM (Node Package Manager) e Yarn são os gerenciadores de pacotes padrão do ecossistema Node.js/React.*
4. Qual o comando correto para criar um projeto React usando Vite?
`npm create vite@latest`
`npm install react`
`vite start project`
`create-react-app my-app` *Explicação: O Vite recomenda o uso do comando `create vite@latest` seguido das opções de template.*
5. O que é o Virtual DOM no React?
É o código HTML que vemos ao inspecionar a página.
Uma representação leve do DOM real mantida em memória pelo React.
Um navegador virtual para testes de performance.
O servidor onde a aplicação fica hospedada. *Explicação: O Virtual DOM permite ao React comparar mudanças e atualizar o DOM real de forma otimizada (Diffing algorithm).*
6. Qual destes é um benefício da "Componentização"?
Deixa o código mais difícil de ler.
Impede que o CSS seja aplicado.
Facilita a reutilização de código e a manutenção da interface.
Aumenta o tempo de carregamento da página. *Explicação: Componentes permitem isolar lógica e estilo, facilitando a reutilização em diferentes partes da aplicação.*
7. Para que serve o comando `npm install` (ou apenas `npm i`) em um projeto recém-criado?
Para iniciar o servidor de desenvolvimento.
Para baixar e instalar as pastas `node_modules` com as dependências do `package.json`.
Para publicar o site na internet.
Para apagar o código antigo do projeto. *Explicação: Esse comando lê as dependências listadas no `package.json` e as instala localmente.*
8. O que acontece quando você salva um arquivo em um projeto rodando com Vite?
O computador reinicia.
Você precisa rodar `npm install` novamente.
O navegador atualiza apenas o módulo alterado via HMR.
O projeto é deletado automaticamente. *Explicação: O Hot Module Replacement (HMR) do Vite permite atualizações instantâneas durante o desenvolvimento.*
9. O React é considerado:
Um Sistema Operacional.
Uma Biblioteca para construção de interfaces de usuário.
Uma Linguagem de Programação nova.
Um Banco de Dados. *Explicação: O React é oficialmente definido como uma biblioteca JavaScript para criar interfaces de usuário baseadas em componentes.*
10. Qual a versão do Node.js geralmente recomendada para produção e estudos?
Versão Alpha.
Versão Beta.
Versão LTS (Long Term Support).
Última versão experimental. *Explicação: Versões LTS são mais estáveis e possuem suporte garantido por mais tempo.*

Quiz 02 - Introdução

1. O que é um Componente no React?
Uma função JavaScript que retorna elementos de interface.
Um banco de dados embutido no navegador.
Um arquivo CSS que estiliza o projeto todo.
Um erro que acontece quando o código quebra. *Explicação: Componentes são as peças reutilizáveis de UI que juntas formam a aplicação.*
2. Quais destas regras é obrigatória ao escrever JSX?
Todas as tags devem estar em minúsculo.
Deve haver sempre um elemento pai único retornando do componente.
Não é permitido usar parênteses no `return`.
Deve-se usar `class` para definir classes CSS. *Explicação: O JSX exige um único nó raiz; múltiplos elementos devem ser envolvidos em uma `div` ou ``.*
3. Como passamos informações de um componente pai para um componente filho?
Através de variáveis globais do sistema.
Usando o comando `npm send-data`.
Através de Props (propriedades).
Editando o arquivo `index.html` diretamente. *Explicação: Props são o canal padrão de comunicação descendente no React.*
4. Qual o motivo de utilizarmos "className" em vez de "class" no JSX?
"class" é uma palavra reservada no JavaScript para criar classes de objetos.
"className" é mais curto de escrever.
O React foi criado por falantes de latim.
"class" só funciona em navegadores antigos. *Explicação: Como o JSX é transformado em JavaScript puro, precisamos evitar colisões com palavras reservadas da linguagem.*
5. O que são Fragments (`<> ... `)?
Pedaços de código quebrado.
Tags sugeridas para imagens.
Uma forma de agrupar múltiplos elementos sem adicionar uma tag extra no HTML final.
Comentários que o React ignora. *Explicação: Fragments permitem retornar vários elementos sem poluir o DOM com `divs` desnecessárias.*
6. Sobre as Props, é correto afirmar:
O componente filho pode alterar o valor das props recebidas.
Props são somente leitura (imutáveis) para o componente que as recebe.
Props só podem ser do tipo String.
Props são salvas automaticamente no banco de dados. *Explicação: No fluxo de dados do React, as props são imutáveis; o componente pai as controla.*
7. Por que componentes devem começar com letra Maiúscula?
Para o CSS carregar mais rápido.
Para o programador não ter preguiça.
Para o React diferenciar componentes customizados de tags nativas do HTML.
Não é necessário, é apenas uma sugestão. *Explicação: O React identifica tags em minúsculo como elementos HTML comuns (div, span, button).*
8. Como injetamos uma expressão JavaScript dentro do JSX?
Entre parênteses `( )`.
Entre chaves `{ }`.
Entre aspas `" "`.
Usando a tag `

Quiz 03 - Introdução

1. Para que serve o Hook `useState` no React?
Para conectar o projeto a um banco de dados SQL.
Para adicionar estado (memória) a um componente funcional.
Para mudar a cor do VS Code.
Para importar imagens de outros sites. *Explicação: O useState permite que componentes funcionais mantenham e atualizem informações internamente.*
2. O que acontece com a interface quando o Estado de um componente muda?
Nada, o navegador precisa ser atualizado manualmente.
O React "re-renderiza" o componente, atualizando apenas o que mudou na tela.
O projeto é deletado automaticamente.
A conexão com a internet cai. *Explicação: A reatividade é a alma do React; mudanças no estado disparam atualizações visuais automáticas.*
3. Qual a forma correta de declarar um estado para um contador que começa em 10?
`const contador = 10;`
`const [contador, setContador] = useState(10);`
`useState(contador) = 10;`
`const setContador = useState(10);` *Explicação: O useState retorna um par: o valor atual e a função que o altera.*
4. É permitido alterar o estado diretamente, como em `estado = 5`?
Sim, é a forma mais rápida.
Sim, desde que seja dentro de um botão.
Não, devemos sempre usar a função de atualização (ex: `setEstado(5)`).
Depende da versão do Node.js. *Explicação: Alterar diretamente não avisa ao React que houve mudança, logo, a tela não atualiza.*
5. Onde os Hooks (como useState) devem ser chamados dentro de um componente?
Dentro de um loop `for`.
Dentro de uma condição `if`.
No nível superior da função do componente (antes do return).
No final do arquivo, após o export. *Explicação: Hooks possuem regras de ordem de chamada; não podem ser condicionais.*
6. O que o parâmetro passado para `useState(X)` representa?
O valor final que o estado terá.
O valor inicial do estado ao carregar o componente.
O nome da variável no CSS.
O tempo de espera para atualizar. *Explicação: O argumento inicial define o ponto de partida do dado (texto, número, booleano, etc).*
7. Como o React garante que o novo valor do estado apareça na tela?
Através do Hot Module Replacement.
Através do processo de Reconciliação (Diffing).
Reiniciando o servidor local.
Pedindo permissão ao usuário. *Explicação: O React compara a nova árvore de elementos com a antiga e aplica as mudanças mínimas necessárias.*
8. Qual hook você usaria para saber se um modal está "aberto" ou "fechado"?
`useEffect`
`useHistory`
`useState`
`useRedux` *Explicação: Estados booleanos (true/false) são ideais para controlar visibilidade de elementos.*
9. O que acontece se chamarmos um Hook dentro de uma função JavaScript comum (que não é um componente)?
O código funciona perfeitamente.
O React lançará um erro de "Invalid Hook Call".
O computador trava.
O programa é convertido em Python. *Explicação: Hooks só funcionam dentro de Componentes Funcionais ou Hooks Customizados.*
10. Ao usar `const [nome, setNome] = useState('')`, o que é `setNome`?
Uma variável contendo o nome do usuário.
Uma função que serve para atualizar o valor da variável `nome`.
Um comando do terminal.
O nome do componente pai. *Explicação: O segundo elemento do array retornado pelo useState é sempre a função setter.*

Quiz 04 - Introdução

1. Qual o uso mais comum do Hook `useEffect`?
Mudar a cor do texto no CSS.
Lidar com efeitos colaterais como busca de dados em APIs.
Declarar uma nova variável numérica.
Criar um novo componente de botão. *Explicação: O useEffect é usado para "sincronizar" o componente com sistemas externos (APIs, timers, etc).*
2. O que acontece se omitirmos o array de dependências no `useEffect`?
O componente não carrega.
O efeito roda apenas uma vez.
O efeito roda em TODA renderização do componente.
O React lança um erro fatal. *Explicação: Sem o array [], o React executa o efeito após cada ciclo de renderização.*

Quiz 05 - Introdução

1. Qual a principal vantagem do CSS Modules?
Deixa o site mais rápido.
Evita conflitos de nomes de classes ao gerar nomes únicos automaticamente.
Transforma o CSS em JavaScript automaticamente.
Não permite o uso de cores. *Explicação: CSS Modules gera escopos locais para as classes, resolvendo o problema de cascata global do CSS.*
2. No Styled Components, como passamos uma prop para mudar a cor de um componente?
Usando a tag `

Quiz 06 - Introdução

1. Por que usar `react-hook-form` em vez do `useState` tradicional para formulários grandes?
Porque ele é mais colorido.
Por performance (evita re-renderizações a cada tecla digitada).
Porque ele apaga o banco de dados.
Porque ele não precisa de JavaScript. *Explicação: Ele utiliza referências (uncontrolled components) para gerenciar dados sem carregar o componente o tempo todo.*
2. Para que serve a função `register`?
Para criar um login para o usuário.
Para conectar um input do formulário ao gerenciamento da biblioteca.
Para mudar o estilo do botão.
Para sair do aplicativo. *Explicação: O `register` vincula o campo ao schema de dados do formulário.*
3. Como exibimos uma mensagem de erro específica para um campo obrigatório?
Usando um `alert()`.
Acessando o objeto `errors` retornado pelo hook `useForm`.
Reiniciando a página.
O React Hook Form faz um alerta sonoro automático. *Explicação: O objeto `errors` contém detalhes de cada campo que falhou na validação.*
4. Qual dessas é uma regra de validação válida no `register`?
`required: true`
`color: 'blue'`
`speed: 'fast'`
`debug: true` *Explicação: Podemos passar um objeto de opções como `required`, `minLength`, `pattern`, etc.*
5. O que faz a função `handleSubmit`?
Limpa o formulário automaticamente.
Previne o comportamento padrão do navegador e valida os dados antes de chamar sua função personalizada.
Fecha a aba do navegador.
Envia os dados para o Facebook. *Explicação: É o "porteiro" que garante que tudo está válido antes de processar o envio.*

Quiz 07 - Introdução

1. Por que usamos o componente `` em vez da tag `` no React Router?
Porque `` é mais curto de digitar.
Para evitar que o navegador recarregue a página inteira (SPA behavior).
Porque a tag `` foi removida do HTML5.
Para que os links fiquem azuis automaticamente. *Explicação: O Link intercepta o evento de clique e atualiza o estado da rota sem disparar um novo request ao servidor.*
2. Qual componente é usado para envolver toda a aplicação e habilitar o roteamento?
``
``
``
`` *Explicação: O BrowserRouter utiliza a API de Histórico do HTML5 para manter a UI sincronizada com a URL.*
3. Como definimos uma rota dinâmica que aceita um ID de produto, como `/produto/123`?
``
``
``
`` *Explicação: O prefixo `:` indica que aquela parte da URL é um parâmetro variável.*
4. Qual hook usamos para acessar o parâmetro `:id` dentro de um componente?
`useRoute()`
`useParams()`
`getId()`
`useState()` *Explicação: useParams retorna um objeto com todos os parâmetros dinâmicos da rota atual.*
5. Para que serve o componente ``?
Para renderizar todos os links da página.
Para agrupar as definições de rotas e garantir que apenas uma seja renderizada por vez.
Para conectar o projeto ao Google Maps.
Para criar animações de transição. *Explicação: O Routes olha para a URL atual e renderiza o primeiro componente que der "match".*

Quiz 08 - Introdução

1. Qual a principal vantagem do Axios sobre o Fetch nativo?
Ele é mais colorido no console.
Ele converte automaticamente a resposta para JSON e permite criar instâncias reutilizáveis.
Ele é a única forma de acessar a internet.
Ele não precisa de internet para funcionar. *Explicação: O Axios abstrai tarefas repetitivas como o `.json()` do fetch e configurações de headers.*
2. Dentro de qual hook do React geralmente colocamos as chamadas de API que devem acontecer ao carregar a página?
`useState`
`useContext`
`useEffect`
`useMemo` *Explicação: O useEffect permite sincronizar o carregamento dos dados com o ciclo de vida de montagem do componente.*
3. Para que serve o bloco `try/catch` em uma requisição assíncrona?
Para acelerar a internet.
Para capturar e tratar erros (como falha na conexão ou servidor fora do ar) sem que a aplicação trave.
Para mudar a senha do usuário.
É um comando do CSS. *Explicação: O try tenta executar o código; se falhar, o catch assume o controle para tratar o erro com elegância.*
4. O que é uma "Base URL" no Axios?
O endereço onde o site fica hospedado.
Uma parte comum de todas as URLs da API (ex: `https://api.site.com`) configurada em um único lugar.
O nome do computador do desenvolvedor.
Uma senha de acesso. *Explicação: Configurar a baseURL evita repetir o endereço completo em cada componente.*
5. O que significa o estado de "Loading" em uma aplicação?
Que o código terminou de rodar.
O período de espera entre o pedido dos dados e a resposta da API, onde devemos mostrar um sinal visual ao usuário.
Que o computador está desligando.
Um tipo de erro fatal. *Explicação: Mostrar um "Carregando..." melhora drasticamente a experiência do usuário (UX).*

Quiz 09 - Introdução

1. O que é o "Prop Drilling" no React?
Uma ferramenta para perfurar o banco de dados.
O problema de passar Props por muitos componentes intermediários que não precisam delas.
Uma técnica avançada de animação.
Quando o código do projeto fica muito grande. *Explicação: O Prop Drilling torna o código difícil de manter e seguir o fluxo de dados.*
2. Qual a principal função da Context API?
Armazenar imagens globalmente.
Compartilhar estados entre componentes sem precisar passar Props manualmente em cada nível.
Criar novas rotas para o site.
Acelerar a renderização do Virtual DOM. *Explicação: O Contexto cria uma "nuvem" de dados acessível por qualquer componente "filho" do Provedor.*
3. Qual o papel do `Provider` (Provedor) no contexto?
Ele deleta os dados antigos.
Ele "envolve" os componentes e disponibiliza o valor para eles através da prop `value`.
Ele é um tipo de banco de dados SQL.
Ele serve apenas para estilização. *Explicação: Sem o Provider, os componentes filhos não conseguem acessar as informações do contexto.*
4. Qual hook usamos para "pegar" as informações de um contexto dentro de um componente funcional?
`useState`
`useContext`
`useContextAPI`
`useProvider` *Explicação: O useContext recebe o objeto de contexto e retorna o valor atual definido no Provider.*
5. Quando devemos evitar o uso da Context API?
Sempre que possível, pois ela é proibida pelo Facebook.
Para dados que mudam com extrema frequência (centenas de vezes por segundo), pois isso pode causar re-renderizações em excesso.
Para guardar o nome do usuário.
Em projetos pequenos. *Explicação: Mudanças no contexto fazem TODOS os consumidores re-renderizarem; para dados ultra-frequentes, outras libs de estado podem ser melhores.*

Quiz 10 - Introdução

1. O que o hook `useMemo` retorna?
Uma função que pode ser chamada depois.
O valor resultante da função memorizada.
Um booleano indicando se o dado mudou.
Um erro caso o cálculo demore demais. *Explicação: useMemo executa a função e guarda o valor retornado na memória.*
2. Para que serve o `useCallback`?
Para memorizar o resultado de um cálculo matemático.
Para evitar que uma função seja recriada (com uma nova referência na memória) em cada renderização.
Para chamar uma API a cada segundo.
Para deletar o estado do componente. *Explicação: É essencial quando passamos funções para componentes otimizados com React.memo.*
3. Como acessamos o valor atual de uma referência criada com `useRef`?
`minhaRef.value`
`minhaRef.current`
`minhaRef.get()`
`minhaRef()` *Explicação: O objeto retornado pelo useRef tem sempre uma propriedade .current.*
4. Qual dessas afirmações sobre o `useRef` é VERDADEIRA?
Ele dispara uma nova renderização sempre que seu valor muda.
Ele persiste o valor entre as renderizações, mas não dispara o fluxo de atualização visual.
Só pode ser usado para guardar elementos HTML (DOM).
Ele expira após 5 minutos. *Explicação: O useRef é como uma "caixa" que guarda dados durante toda a vida do componente de forma silenciosa.*
5. Quando devemos usar `useMemo`?
Em todos os cálculos do componente, por segurança.
Apenas em operações computacionalmente caras ou para garantir integridade referencial de objetos/arrays.
Apenas quando usamos Styled Components.
Para buscar dados de uma API. *Explicação: O custo de gerenciar a memorização pode ser maior que o ganho de performance em funções simples.*

Quiz 11 - Introdução

1. Por que o Lazy Loading é importante para a performance?
Porque ele apaga o histórico do navegador.
Porque ele diminui o tamanho do pacote (bundle) inicial, carregando o código das páginas apenas quando necessário.
Porque ele muda a cor das imagens.
Porque ele duplica a velocidade da CPU. *Explicação: Menos código carregado no início significa um tempo de carregamento (LCP) muito menor.*
2. O que o `React.memo` faz?
Memoriza uma senha.
Impede que um componente renderize novamente se suas Props forem as mesmas.
Aumenta o brilho da tela.
Salva o projeto no Git automaticamente. *Explicação: Ele é uma Ferramenta de Higher-Order Component para otimizar componentes funcionais puros.*
3. Para que serve o componente ``?
Para criar um clima de mistério no site.
Para fornecer uma UI de "reserva" (fallback) enquanto componentes Lazy estão sendo carregados.
Para pausar a execução do JavaScript por 5 segundos.
Para deletar arquivos temporários. *Explicação: Sem o Suspense, o React não sabe o que mostrar enquanto o arquivo .js da página vizinha não termina de baixar.*
4. Qual o benefício do atributo `loading="lazy"` na tag ``?
Deixa a imagem em preto e branco.
Adia o carregamento da imagem até que o usuário role a página para perto dela.
Aumenta a resolução da imagem.
Faz a imagem piscar. *Explicação: Economiza banda de internet e processamento, especialmente em dispositivos móveis.*
5. Qual ferramenta do Chrome é recomendada para medir a velocidade geral da sua aplicação?
Paint
Lighthouse
Notepad
Task Manager *Explicação: O Lighthouse gera um relatório detalhado de performance, SEO e acessibilidade.*

Quiz 12 - Introdução

1. O que é o Redux Toolkit?
Uma ferramenta para editar imagens no React.
A forma moderna e simplificada de escrever Redux, reduzindo o "boilerplate".
Um substituto para o Node.js.
Um tema escuro para o VS Code. *Explicação: O RTK facilita a criação de stores, reducers e ações em um único lugar (Slices).*
2. Para que serve o componente `` no Redux?
Para fornecer internet ao projeto.
Para injetar a Store global do Redux em toda a árvore de componentes.
Para criar novas páginas.
Para deletar o estado antigo. *Explicação: Sem o Provider, os hooks do Redux não conseguem encontrar a Store.*
3. Qual a função do hook `useSelector`?
Criar um novo estado.
Selecionar e ler um pedaço do estado global armazenado na Store.
Enviar dados para o banco de dados.
Estilizar o componente. *Explicação: O useSelector permite "pescar" apenas o dado necessário para aquele componente específico.*
4. Como alteramos o estado no Redux moderno?
Alterando a variável diretamente: `state.value = 10`.
Disparando uma "Action" através do hook `useDispatch`.
Reiniciando o servidor dev.
Editando o arquivo `index.html`. *Explicação: O fluxo do Redux é unidirecional; ações disparam mudanças nos reducers.*
5. O que é um "Slice" no Redux Toolkit?
Um pedaço de código quebrado.
Uma estrutura que agrupa o estado inicial, as ações e os reducers de uma funcionalidade específica.
Uma função que serve apenas para deletar dados.
O nome do logo do Redux. *Explicação: Slices organizam a lógica de estado por módulos (ex: userSlice, cartSlice).*

Quiz 13 - Introdução

1. O que é o Vitest?
Um editor de vídeo para programadores.
Um executor de testes moderno e rápido, substituto do Jest no ecossistema Vite.
Uma nova linguagem de programação.
Um plugin para mudar o tema do site. *Explicação: Vitest é o motor que roda os testes em projetos que usam Vite.*
2. Qual a filosofia da React Testing Library (RTL)?
Testar a implementação interna das funções.
Testar os componentes da forma como o usuário interage com eles (testando o DOM).
Testar apenas o código CSS.
Testar a velocidade da internet. *Explicação: A RTL evita testar detalhes de implementação, o que torna os testes mais robustos contra refatorações.*
3. Para que serve a função `render()` da RTL?
Para desenhar imagens na tela.
Para simular a renderização de um componente em um ambiente de DOM virtual para que possamos testá-lo.
Para enviar o código para produção.
Para salvar o arquivo. *Explicação: Render coloca o componente no "jsdom" para que possamos buscar elementos dentro dele.*
4. Qual dessas é a forma mais recomendada de buscar um elemento em um teste?
`document.getElementById('id-secreto')`
`screen.getByText('Texto visível ao usuário')`
`component.find('div')`
`querySelector('.classe-css')` *Explicação: Buscar por texto ou papéis (roles) garante que seu teste valide a acessibilidade e a experiência do usuário.*
5. O que faz o comando `expect(elemento).toBeInTheDocument()`?
Salva o documento no Word.
Verifica (faz uma asserção) se o elemento realmente apareceu na tela durante o teste.
Deleta o elemento se ele for inválido.
Imprime o código no papel. *Explicação: É uma asserção fundamental para validar o sucesso da renderização.*

Quiz 14 - Introdução

1. O que significa a sigla BaaS?
Base as a Service.
Backend as a Service (Backend como Serviço).
Binary as a System.
Button as a Service. *Explicação: BaaS são plataformas que oferecem banco de dados, autenticação e storage prontos para uso no frontend.*
2. Qual a principal vantagem de usar Firestore (Firebase) ou Supabase?
Eles são mais rápidos que o CSS.
Permitem ter um backend profissional sem precisar escrever códigos complexos de servidor (Node, Python, etc).
Eles aumentam a resolução da tela.
Eles desligam o computador automaticamente. *Explicação: Essas ferramentas abstraem a complexidade da infraestrutura de servidor.*
3. Por que não devemos subir o arquivo `.env` com nossas chaves de API para o GitHub?
Porque o arquivo é muito pesado.
Para evitar que qualquer pessoa use nossos créditos ou acesse nossos dados privados (Segurança).
Porque o GitHub não aceita arquivos que começam com ponto.
Porque as chaves mudam de cor se forem publicadas. *Explicação: Publicar chaves de segurança é uma falha grave que pode resultar em invasões ou cobranças indevidas.*
4. Qual a diferença entre Firestore (Firebase) e Supabase em relação ao banco de dados?
Firestore usa SQL e Supabase usa NoSQL.
Firestore é NoSQL (Documentos) e Supabase é SQL (Tabelas PostgreSQL).
Nenhum dos dois usa banco de dados.
Eles são exatamente a mesma coisa. *Explicação: O Supabase foca em bancos relacionais (SQL), enquanto o Firebase foca em documentos flexíveis (NoSQL).*
5. O que faz a função de "Snapshot" ou "Realtime Subscription"?
Tira uma foto da tela.
Mantém uma conexão aberta com o banco, avisando o React sempre que um dado muda para que a tela atualize na hora.
Deleta o banco de dados após 10 minutos.
Aumenta o brilho da imagem. *Explicação: Essa é a "mágica" das apps modernas onde as informações aparecem instantaneamente para todos os usuários.*

Quiz 15 - Introdução

1. O que é uma PWA?
Um tipo de vírus de computador.
Um site que possui características de aplicativo nativo (offline, instalação, ícone).
Um programa que só roda em computadores da Apple.
Uma forma de deletar o CSS. *Explicação: PWAs buscam unir o melhor do alcance da web com a experiência dos aplicativos.*
2. Qual a principal vantagem de usar Vercel ou Netlify para o deploy?
Eles dão dinheiro ao desenvolvedor.
Eles automatizam o processo de build e publicação sempre que você faz um `git push`.
Eles aumentam a memória RAM do computador.
Eles criam o código por você. *Explicação: O Continuous Deployment garante que a versão online seja sempre a mesma que você terminou de codar.*
3. Para que servem as meta tags `og:image` e `og:title`?
Para mudar a cor do site.
Para controlar como o site aparece quando o link é compartilhado em redes sociais.
Para acelerar o download do JavaScript.
Elas não servem para nada no React. *Explicação: São o padrão Open Graph, usado por quase todas as plataformas sociais.*
4. Qual o comando para gerar a versão de produção (otimizada) de um projeto Vite?
`npm start`
`npm run build`
`npm delete`
`npm install` *Explicação: O build cria uma pasta `dist` com arquivos minificados e otimizados para o navegador.*
5. O que é o "Lighthouse" do Chrome?
Um jogo de computador.
Uma ferramenta de auditoria que mede performance, acessibilidade e SEO do seu site.
Um chat para falar com outros desenvolvedores.
O nome do logo do Chrome. *Explicação: Ele gera notas de 0 a 100 e dá dicas de como melhorar seu projeto.*

Quiz 16 - Introdução

1. Qual o fluxo correto de dados no React (Unidirecional)?
O filho manda dados para o pai através de Props.
O pai passa dados para o filho via Props; o filho avisa o pai via funções (Callbacks).
Todos os componentes mudam o dado de todos.
O dado flui de baixo para cima. *Explicação: O "One-Way Data Flow" torna a aplicação previsível e fácil de debugar.*
2. Por que o Virtual DOM é mais rápido que o DOM Real?
Porque ele é feito de eletricidade pura.
Porque ele calcula as diferenças mínimas (Diffing) antes de atualizar a tela real, evitando re-trabalho do navegador.
Porque ele apaga o HTML do site.
Porque ele só roda em computadores novos. *Explicação: O DOM real é lento; manipular uma árvore de objetos em memória (Virtual) é instantâneo.*
3. Sobre Hooks, qual a principal vantagem?
Eles permitem usar Estado e Ciclo de Vida em Componentes Funcionais, de forma mais limpa que as antigas Classes.
Eles substituem o CSS.
Eles travam o navegador se houver erro.
Eles são usados apenas para cores. *Explicação: Hooks simplificaram o React e facilitam o compartilhamento de lógica (Custom Hooks).*
4. O que é o JSX?
Uma nova linguagem de banco de dados.
Uma extensão de sintaxe que permite escrever algo parecido com HTML dentro do JavaScript.
O nome do criador do React.
Um tipo de imagem. *Explicação: JSX é o que torna a escrita de interfaces no React tão declarativa e fácil de ler.*
5. Qual o sentimento final de quem conclui o curso de React?
Medo de códigos complexos.
Confiança para construir aplicações SPA modernas, rápidas e profissionais! 🚀
Vontade de usar apenas HTML puro.
Cansaço sem aprendizado. *Explicação: Você agora domina a ferramenta mais requisitada do mercado frontend mundial!*

Slides

Slides 📺

Material visual para acompanhamento das vídeo-aulas.

Aula 01 🚀

Introdução ao Frontend Moderno e React

O que vamos aprender hoje? 📚

  1. Evolução do Desenvolvimento Web
  2. O que é uma SPA?
  3. O Ecossistema JavaScript
  4. Introdução ao React
  5. Criando seu primeiro projeto

1. Evolução da Web 🌍

Web Estática (Anos 90) 🕸️

  • Apenas HTML
  • Sem interação dinâmica
  • Cada página era um arquivo .html físico

Web Dinâmica / MPA (Anos 2000) ⚙️

  • Multi-Page Applications
  • Servidor gera o HTML (PHP, Java, ASP)
  • Recarregamento total da página a cada clique

A "Piscada" da Web 😖

  • Ao clicar em um link, a tela fica branca por um instante
  • O navegador refaz o download de tudo
  • Sensação de interrupção

2. O conceito de SPA 🔄

Single Page Application (SPA)

  • Aplicação de Página Única
  • O HTML é carregado uma única vez
  • Apenas os dados mudam

Por que SPA? 🤔

  • Experiência de Aplicativo Nativo
  • Fluidez na navegação
  • Menos carga no servidor (envia apenas JSON)

SPA vs MPA 📊

graph LR
    A[MPA] --> B[Recarrega Tudo]
    C[SPA] --> D[Atualiza Peças]

3. Ecossistema JavaScript 📦

Node.js 🟢

  • Motor JavaScript V8 fora do navegador
  • Essencial para ferramentas de desenvolvimento

Gerenciadores de Pacote 📦

  • NPM: O padrão
  • Yarn: Alternativa rápida
  • Servem para instalar bibliotecas (como o React!)

Vite ⚡

  • A ferramenta de build da nova geração
  • Ultra rápido
  • Substituiu o antigo Create React App

4. Introdução ao React ⚛️

O que é React?

  • Biblioteca JavaScript criada pelo Facebook
  • Focada em Interfaces de Usuário (UI)
  • Declarativa e Baseada em Componentes

Pensando em Componentes 🧱

  • Imagine a interface como peças de LEGO
  • Cabeçalho, Botão, Card, Rodapé...
  • Cada um é um componente independente

O Virtual DOM 🧠

  • O segredo da performance
  • O React cria uma cópia da interface na memória
  • Atualiza apenas o que mudou no DOM Real

5. Mão na Massa! 💻

Criando com Vite 🛠️

npm create vite@latest

Scripts Principais 📜

  • npm install: Instala as peças
  • npm run dev: Inicia o laboratório
  • npm run build: Prepara para o mundo

Estrutura de Pastas 📂

  • node_modules: Onde as peças moram
  • src: Seu código fonte
  • App.jsx: O coração da aplicação

Dica de Ouro! 💡

  • Abra sempre a pasta RAIZ do projeto no VS Code
  • Use o terminal integrado (Ctrl + `)

Fim da Aula 01 🎓

Próximo passo: Projeto Prático!

Aula 02 🧱

Fundamentos: JSX, Componentes e Props

O que vamos construir hoje? 🛠️

  1. Entender o que são Componentes
  2. Dominar a sintaxe JSX
  3. O poder das Props
  4. Composição de interfaces

1. Componentes 🧩

O que é um Componente? 🤔

  • Uma função JavaScript...
  • Que retorna um pedaço de UI.
  • É reutilizável e independente.

Analogia: LEGO 🧱

  • Imagine cada peça como um componente.
  • Juntos, formam uma estrutura complexa.
  • Se uma peça quebra, você só troca ela.

Regra Crucial! ⚠️

  • Componentes PRECISAM começar com letra Maiúscula.
  • Header ✅
  • header ❌ (o React acha que é HTML nativo)

2. Sintaxe JSX ⚛️

HTML dentro do JS? 🤯

  • JSX = JavaScript XML
  • Facilita a visualização da estrutura.
  • Mas cuidado: não é HTML puro!

Regras de Sobrevivência 🛡️

  1. Nó pai único (ou use Fragment)
  2. Atributos em camelCase (Ex: onClick)
  3. class vira className

Por que className? 🧐

  • class já é usado pelo JavaScript para classes de objetos.
  • Evita que o navegador se confunda.

3. O Segredo das Props 🎁

O que são Props?

  • Abreviação de Properties.
  • Forma de enviar dados do "Pai" para o "Filho".
  • Deixam seus componentes dinâmicos.

Exemplo Prático 💻

<Botao texto="Entrar" cor="azul" />
<Botao texto="Sair" cor="vermelho" />

Imutabilidade 🧊

  • As Props são somente leitura.
  • O componente filho nunca deve alterar o que recebeu.

4. Melhores Práticas ✨

Destructuring 📂

  • Em vez de props.nome...
  • Use { nome } diretamente nos argumentos.
  • Código mais limpo e elegante!

Fragmentos <> </> 👻

  • Agrupe elementos sem criar uma div extra no HTML final.
  • Mantém o DOM limpo e performático.

🚀 Desafio Prático!

  • Criar um componente de Card de Produto.
  • Passar nome, preço e imagem via props.
  • Renderizar em lista no App.jsx.

Fim da Aula 02 🎓

Próxima Aula: Hooks e Estado!

Aula 03 🎣

Hooks I: useState e Estado Local

O que vamos aprender hoje? 📚

  1. O que é o Estado (State)
  2. Introdução aos Hooks
  3. Praticando com useState
  4. Regras dos Hooks

1. O que é o Estado? 🧠

Props vs State ⚖️

  • Props: Vêm de fora (Pai). Imutáveis para o componente.
  • State: Vem de dentro. Gerenciado pelo próprio componente.

O Poder da Reatividade ⚡

  • Mudou o estado?
  • O React atualiza a tela!
  • Sem document.getElementById
  • Sem innerHTML

2. Conhecendo os Hooks 🎣

O que são Hooks? 🤔

  • Funções especiais do React.
  • Permitem "fisgar" (hook into) recursos do React em componentes funcionais.
  • Criados na versão 16.8.

useState 🔢

  • O Hook mais básico e essencial.
  • Permite que o componente "lembre" de dados.

Anatomia do Código 💻

const [valor, setValor] = useState(0);
  • valor: O dado atual
  • setValor: A função de atualização
  • 0: O ponto de partida

3. Regras de Ouro 🛡️

1. Top Level Only 🔝

  • Nunca chame hooks dentro de:
  • if
  • for
  • while

2. Apenas Funções React ⚛️

  • Chame hooks apenas em:
  • Componentes React
  • Hooks Customizados

4. Prática e Fluxo 🔄

Mudando o Estado 🖱️

<button onClick={() => setValor(valor + 1)}>
  Clique aqui
</button>
  • IMPORTANTE: Nunca faça valor = valor + 1

🚀 Desafio da Aula

  • Criar um sistema de "Like" (Curtir).
  • Um botão que incrementa um contador.
  • Um botão de "Reset".

Fim da Aula 03 🎓

Próxima Aula: useEffect e Ciclo de Vida!

Aula 04 🔄

Hooks II: useEffect e Ciclo de Vida

O que vamos aprender hoje? 📚

  1. Efeitos Colaterais (Side Effects)
  2. O Hook useEffect
  3. Array de Dependências
  4. Buscando dados de APIs (Fetch)

1. Efeitos Colaterais 🛸

O que são? 🤔

  • Ações fora do controle do React.
  • Mudança de título da aba.
  • Chamadas de API.
  • Timers e Intervalos.

2. O Hook useEffect 🎣

Sincronização Perfeita 🕰️

  • Permite executar código em momentos chave.
  • Quando o componente nasce.
  • Quando o componente morre.
  • Quando algo muda.

Sintaxe do Código 💻

useEffect(() => {
  // O código do efeito aqui
}, [dependencias]);

3. As Dependências 📦

Os 3 Cenários 📊

  1. Sem array: Roda TODA HORA.
  2. Array vazio []: Roda UMA VEZ (Mount).
  3. Com variáveis [counter]: Roda quando elas mudam.

O Cleanup (Limpeza) 🧹

  • Função de retorno do useEffect.
  • Serve para parar timers e cancelar assinaturas.
  • Evita vazamento de memória!

4. Consumo de API 🌐

Fetch API 📡

fetch('url')
  .then(res => res.json())
  .then(data => setEstado(data));

Boa Experiência (UX) ✨

  • Sempre use um estado de Loading.
  • Informe ao usuário que algo está acontecendo!

🚀 Desafio da Aula

  • Criar um buscador de clima ou de usuários do GitHub.
  • Usar useEffect para carregar dados iniciais.
  • Mostrar "Carregando..." enquanto espera.

Fim da Aula 04 🎓

Próxima Aula: Estilização Avançada!

Aula 05 🎨

Estilização: CSS Modules e Styled Components

O que vamos aprender hoje? 📚

  1. Limitações do CSS Global
  2. CSS Modules: Segurança e Escopo
  3. Styled Components: CSS-in-JS
  4. Estilos Dinâmicos e Temas

1. O Fim da Cascata Caótica 🌊

O Problema do CSS Global 🤔

  • Nomes de classes iguais em arquivos diferentes.
  • Um estilo apaga o outro.
  • Dificuldade de manutenção em projetos grandes.

2. CSS Modules 📦

Como funciona? ⚙️

  • O Vite renomeia as classes no build.
  • .botao vira .botao_xyz123
  • Conflito ZERO!

Código Prático 💻

import styles from './App.module.css';

<button className={styles.btn}>Botão</button>

3. Styled Components 💅

O que é CSS-in-JS? 🤔

  • Escrever CSS dentro do JavaScript.
  • Usar variáveis JS para mudar o estilo.
  • Componentes estilizados e prontos.

Exemplo 💻

const Titulo = styled.h1`
  color: ${props => props.cor || 'black'};
`;

4. Dinamismo Total 🌈

Estilo baseado em Props 🎁

  • Se o botão é do tipo perigo, fica vermelho.
  • Se é sucesso, fica verde.
  • Tudo controlado pelo React!

🚀 Desafio da Aula

  • Criar um botão com Styled Components.
  • Ele deve aceitar uma prop variant ('outline' ou 'filled').
  • Mudar o estilo visual conforme a variante.

Fim da Aula 05 🎓

Próxima Aula: Formulários!

Aula 06 📝

Formulários e Validação

O que vamos aprender hoje? 📚

  1. Controlled vs Uncontrolled Components
  2. React Hook Form
  3. Validação de dados em tempo real
  4. Melhorando a UX de formulários

1. Controlled vs Uncontrolled ⚖️

Controlled (useState) 🎮

  • React controla cada tecla.
  • Bom para formulários pequenos.
  • Lento em formulários gigantes.

Uncontrolled (Ref/Library) 🚀

  • O navegador guarda o valor.
  • O React só pega no final.
  • Muito mais performático!

2. React Hook Form 🛠️

Por que usar? 🤔

  • Menos código (Boilerplate).
  • Re-renderizações mínimas.
  • Fácil integração com validação.

O básico do Código 💻

const { register, handleSubmit } = useForm();

<input {...register("email")} />

3. Validação 🛡️

Regras Simples ✅

  • required (Obrigatório)
  • minLength / maxLength
  • pattern (Regex para e-mail/telefone)

4. Experiência do Usuário (UX) ✨

Dê Feedback! 📣

  • Nunca deixe o usuário na dúvida.
  • Mostre mensagens de erro claras.
  • Mude o estilo do input (borda vermelha).

🚀 Desafio da Aula

  • Criar um formulário de login.
  • Validar se o e-mail é válido.
  • Validar se a senha tem 6 caracteres.
  • Mostrar erros abaixo dos campos.

Fim da Aula 06 🎓

Próxima Aula: React Router e Navegação!

Aula 07 🗺️

React Router: Navegação SPA

O que vamos aprender hoje? 📚

  1. O que é uma SPA? (Revisão)
  2. Introdução ao React Router
  3. Rotas Dinâmicas (Params)
  4. Navegação Programática

1. Por que Router? 🤔

Fim do Reload 🔄

  • Navegação tradicional: Recarrega TUDO.
  • Navegação SPA: Troca apenas o componente.
  • Usuário nem percebe que mudou de URL!

2. React Router DOM 🏗️

Componentes Chave 🔑

  • BrowserRouter: Liga o roteamento.
  • Routes: O "cérebro" que decide qual rota mostrar.
  • Route: A regra de mapeamento (Caminho -> Componente).
  • <a> = Mata o Estado (Recarrega).
  • <Link> = Mantém o Estado (Mágico).
  • Use sempre <Link> ou <NavLink>!

3. Rotas Dinâmicas 🛸

URL com Parâmetros 🆔

  • Exemplo: /produto/:id
  • Útil para perfis, posts, produtos.
  • Acessamos via hook useParams().

4. Navegação via Código 🖱️

useNavigate 🚀

  • Redirecionar após um login.
  • Voltar para a página anterior.
  • Simples: const navigate = useNavigate();

🚀 Desafio da Aula

  • Criar um portfólio com 3 páginas.
  • Usar rotas dinâmicas para mostrar detalhes de projetos.
  • Implementar uma página de erro 404 personalizada.

Fim da Aula 07 🎓

Próxima Aula: Consumo de APIs!

Aula 08 📡

Consumo de APIs: Fetch e Axios

O que vamos aprender hoje? 📚

  1. Fetch vs Axios
  2. Async / Await
  3. Tratamento de Erros
  4. Services e Organização

1. Ferramentas de Rede 🛠️

Axios: O Padrão Ouro 🥇

  • Mais simples que o fetch.
  • JSON automático.
  • Suporte a instâncias e interceptadores.

Comparação ⚖️

// Fetch: 2 passos
.then(res => res.json())

// Axios: 1 passo direto
const res = await axios.get(url);

2. Async / Await 🕰️

Chega de "Callback Hell" 🤯

  • Código assíncrono que parece síncrono.
  • Mais fácil de ler.
  • Ideal para usar dentro do useEffect.

3. Lidando com Problemas 🛑

try / catch 🛡️

  • A internet falhou?
  • Use catch para não quebrar o site.
  • Mostre um erro amigável ao usuário.

4. Arquitetura Pro 🏗️

Services 📂

  • Não coloque URLs de API dentro do componente.
  • Crie uma pasta services e centralize tudo.
  • Facilita mudar a URL do servidor no futuro!

🚀 Desafio da Aula

  • Consumir a API do GitHub ou Weather API.
  • Criar uma instância do Axios configurada.
  • Mostrar Loading e Erros visuais.

Fim da Aula 08 🎓

Próxima Aula: Context API!

Aula 09 🌐

Context API: Estado Global Simples

O que vamos aprender hoje? 📚

  1. O Problema do Prop Drilling
  2. Conceito de Contexto
  3. Provider e Consumer
  4. Quando usar (e quando não usar)

1. O Pânico das Props 😵

Prop Drilling 🧗

  • Passar dados por 10 componentes apenas para chegar no destino.
  • Dificulta a manutenção.
  • Polui o código.

2. A Solução: Contexto 💡

Uma Nuvem de Dados ☁️

  • Os dados ficam disponíveis para todos.
  • Qualquer componente "fisga" o que precisar.
  • Ideal para: Temas, Autenticação, Idiomas.

3. Como Implementar? 🛠️

Os 3 Pilares 🏗️

  1. createContext: Cria a sala de dados.
  2. Provider: O proprietário que distribui os segredos.
  3. useContext: O segredo sendo revelado ao componente.

Exemplo 💻

const { user } = useContext(UserContext);

4. Melhores Práticas ✨

Use com Moderação! ⚠️

  • Nem tudo deve ser global.
  • Context API causa re-render em todos os inscritos.
  • Mantenha o estado local sempre que puder.

🚀 Desafio da Aula

  • Criar um contexto de Autenticação.
  • Mostrar o nome do usuário no Header.
  • Permitir fazer "Login" e "Logout" global.

Fim da Aula 09 🎓

Próxima Aula: Hooks Avançados!

Aula 10 🏗️

Hooks Avançados: useMemo, useCallback e useRef

O que vamos aprender hoje? 📚

  1. Memorização de Valores (useMemo)
  2. Memorização de Funções (useCallback)
  3. Acesso ao DOM e Referências (useRef)
  4. Quando Otimizar?

1. useMemo 🏎️

Pense antes de Calcular 🧠

  • Serve para evitar cálculos caros desnecessários.
  • "Gasta" memória para ganhar processamento.
  • Só recalcula se as dependências mudarem.

2. useCallback ⚡

Estabilidade Referencial ⚓

  • No React, tudo é recriado a cada render.
  • Funções mudam de "identidade".
  • O useCallback mantém a função "viva" e estável.

3. useRef 📍

A Ponte para o Mundo Real 🌉

  • Acesso direto a elementos HTML (foco, scroll).
  • Variáveis que não disparam re-render.
  • É uma "caixa" persistente.

4. Prática e Performance 📊

Regra de Ouro 🛡️

  • Não otimize por medo. Otimize por necessidade!
  • Excesso de Hooks Avançados deixa o código complexo demais.

🚀 Desafio da Aula

  • Criar uma lista filtrada com useMemo.
  • Focar o input automaticamente com useRef.

Fim da Aula 10 🎓

Próxima Aula: Performance e Lazy Loading!

Aula 11 🚀

Performance: React.memo e Lazy Loading

O que vamos aprender hoje? 📚

  1. React.memo
  2. Code Splitting (lazy / Suspense)
  3. Otimização de Ativos (Imagens)
  4. Medindo com Profiler

1. React.memo 🧠

Pura Inteligência 🤖

  • Só renderiza o componente se as Props mudaram.
  • Essencial para componentes de lista pesados.

2. Lazy Loading 😴

Não carregue tudo de uma vez! 📦

  • Divide seu site em pedaços (Chunks).
  • O usuário só baixa o que vai usar.
  • Site carrega muito mais rápido em mobiles.

Suspense ⏳

  • O "enquanto isso" do React.
  • Mostra um loading enquanto o código viaja pela rede.

3. Imagens e Mídia 📸

O Peso da Web 🏋️

  • Use lazy-loading nativo nas imagens.
  • Formatos modernos (WebP).
  • Economize banda e bateria do seu usuário!

🚀 Desafio da Aula

  • Implementar lazy loading nas rotas principais.
  • Usar React.memo em cards repetitivos.

Fim da Aula 11 🎓

Próxima Aula: Redux Toolkit!

Aula 12 🏪

Estado Global: Redux Toolkit

O que vamos aprender hoje? 📚

  1. Por que Redux?
  2. Conceito de Store e Slices
  3. Actions e Reducers
  4. Redux DevTools

1. O Gestor de Estado 🏛️

Do Caos à Ordem 📦

  • Context API é boa, mas o Redux é melhor para escala.
  • Estado centralizado e imutável.
  • Depuração profissional (Time Travel).

2. Redux Toolkit (RTK) 🍰

Slices 🍕

  • Agrupam dado + lógica em um só lugar.
  • Acaba com a confusão de arquivos separados.

3. Hooks do Redux 🎣

Como falar com a Store? 🤔

  • useSelector: Captura dados.
  • useDispatch: Envia ordens.

4. Ferramentas Divinas 🛠️

Redux DevTools 🕵️

  • Veja cada mudança acontecer.
  • Volte no tempo.
  • Exporte o estado para testes.

🚀 Desafio da Aula

  • Criar um carrinho de compras com Redux.
  • Sincronizar produtos entre vitrine e navbar.

Fim da Aula 12 🎓

Próxima Aula: Testes Unitários!

Aula 13 🧪

Testes Unitários: Vitest e RTL

O que vamos aprender hoje? 📚

  1. Por que testar seu código?
  2. Vitest vs Jest
  3. React Testing Library
  4. Simulação de Interações

1. Qualidade e Segurança 🛡️

Dormir tranquilo no Deploy 😴

  • Mudou algo? O teste avisa se quebrou o resto.
  • Documentação viva do seu código.
  • Facilita refatorações ousadas.

2. Vitest 🏎️

Velocidade da Luz ⚡

  • Nativo do Vite.
  • Compatível com a API do Jest.
  • Instantâneo para rodar milhares de testes.

3. React Testing Library 🏗️

Foco no Usuário 👥

  • Não teste se o state mudou.
  • Teste se o texto apareceu na tela!
  • Garante acessibilidade por padrão.

🚀 Desafio da Aula

  • Criar testes para um componente de Contador.
  • Verificar se o botão de aumentar realmente muda o número na tela.

Fim da Aula 13 🎓

Próxima Aula: Integração Cloud!

Aula 14 ☁️

Integração Cloud: Firebase e Supabase

O que vamos aprender hoje? 📚

  1. O que é BaaS?
  2. Configurando o Firebase
  3. Banco de Dados em Tempo Real
  4. Segurança e Env Vars

1. Backend as a Service (BaaS) 🏗️

Menos Servidor, Mais Código 🚀

  • Banco de Dados, Auth e Storage prontos.
  • Escala automaticamente.
  • Ideal para MVPs e projetos rápidos.

2. Firebase vs Supabase 📊

NoSQL vs SQL ⚖️

  • Firebase: Flexível, do Google, tempo real nativo.
  • Supabase: Open source, baseado em Postgres (SQL).

🚀 Desafio da Aula

  • Conectar seu app ao Firestore.
  • Salvar e ler dados em tempo real.
  • Esconder suas chaves no .env.

Fim da Aula 14 🎓

Próxima Aula: PWA e Deploy!

Aula 15 🚀

PWA e Deploy Profissional

O que vamos aprender hoje? 📚

  1. PWAs: O site que vira App
  2. Deploy na Vercel e Netlify
  3. SEO e Meta Tags
  4. Auditoria com Lighthouse

1. Progressive Web Apps 📱

Características 🌟

  • Instalável na tela de início.
  • Funciona offline (Service Workers).
  • Notificações Push.

2. Deploy Contínuo 🚢

Git Push -> Site Online 🏎️

  • Conecte o GitHub à Vercel.
  • Cada commit gera um novo link de teste.

🚀 Desafio da Aula

  • Fazer o deploy do seu portfólio.
  • Configurar as meta tags para WhatsApp/Discord.
  • Conseguir nota 90+ no Lighthouse.

Fim da Aula 15 🎓

Próxima Aula: Projeto Final!

Aula 16 🏆

Projeto Final: O Grande Dashboard

Chegou a Hora! 🏁

  • Unir todo o conhecimento do curso.
  • Criar algo real e publicável.
  • Seu cartão de visitas para o mercado.

Requisitos do Mestre 💎

  1. Router & Navegação
  2. Redux ou Context API
  3. Consumo de API Real
  4. Validação de Formulários
  5. Performance & Otimização

🚀 O Desafio

  • Escolha um tema.
  • Planeje seu estado global.
  • Codifique com paixão!

Parabéns! ⚛️🎓

Você agora é um Desenvolvedor React!

Continue escalando! 🚀

Configuração

Guia de Configuração do Ambiente 🛠️

Para desenvolver com React de forma profissional, precisamos preparar nosso "laboratório" com as ferramentas certas. Siga os guias abaixo na ordem recomendada.

📋 Roteiro de Instalação

1. Node.js e NPM

O motor que roda o JavaScript no seu computador e o gerenciador de pacotes para baixar as bibliotecas do React.

2. VS Code e Extensões

O editor de código preferido dos desenvolvedores React, turbinado com extensões para produtividade.

🚀 Próximos Passos

Após concluir as instalações, você estará pronto para criar seu primeiro projeto usando o Vite.

Suporte

Em caso de dúvidas durante a instalação, consulte a comunidade no Discord do curso ou abra uma Issue no repositório oficial.

Setup 01: Node.js e Gerenciadores de Pacote 🟢

O Node.js é indispensável para o desenvolvimento frontend moderno. Ele nos permite rodar ferramentas de construção, servidores locais e gerenciar milhões de bibliotecas.

📥 Download e Instalação

Windows e macOS

  1. Acesse o site oficial: nodejs.org.
  2. Escolha a versão LTS (Long Term Support). Ela é a mais estável e recomendada para produção.
  3. Siga o instalador "Next, Next, Finish".

Linux (Ubuntu/Debian)

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ sudo apt-get install -y nodejs

✅ Verificando a Instalação

Abra seu terminal (PowerShell, CMD ou Terminal do Linux/Mac) e digite:

# Verificar versão do Node
$ node -v
v20.x.x

# Verificar versão do NPM
$ npm -v
10.x.x

Tudo pronto!

Se as versões aparecerem, o motor está ligado!

📦 NPM vs Yarn vs PNPM

Embora o NPM venha instalado com o Node, você ouvirá falar de outros gerenciadores: - NPM: O padrão da indústria. - Yarn: Criado pelo Facebook, focado em velocidade. - PNPM: Focado em economia de espaço em disco.

Neste curso, utilizaremos o NPM por ser o padrão nativo.

Setup 02: VS Code e Extensões React 💻

O Visual Studio Code é o melhor amigo do desenvolvedor React. Vamos configurá-lo para que ele ajude você a escrever código mais rápido e com menos erros.

🛠️ Extensões Recomendadas

Procure por estas extensões na loja do VS Code (Ctrl+Shift+X):

  1. ES7+ React/Redux/React-Native snippets: Atalhos poderosos (ex: digite rfce para criar um componente inteiro).
  2. Prettier - Code formatter: Deixa seu código alinhado e bonito automaticamente ao salvar.
  3. Tailwind CSS IntelliSense: (Se for usar Tailwind) Ajuda com o autocompletar das classes.
  4. Auto Close Tag: Fecha as tags JSX automaticamente para você.

⚙️ Configurações Sugeridas (Settings)

Para o Prettier funcionar bem, adicione isso ao seu settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.suggest.autoImports": true
}

⌨️ Atalhos Essenciais

Atalho Ação
Ctrl + ' Abre o terminal integrado
Ctrl + P Busca rápida de arquivos
Alt + Up/Down Move a linha de código
Ctrl + / Comenta a linha selecionada

Dica de Produtividade

Aprenda a usar o terminal integrado do VS Code para rodar os comandos npm run dev sem precisar sair do editor.

Setup 03: Ferramentas de Apoio 🛠️

Além da IDE, você precisará de ferramentas para gerenciar código e testar dados.

1. Git e GitHub

Essencial para versionamento. * Download: git-scm.com. * Configuração Inicial: 

git config --global user.name "Seu Nome"
git config --global user.email "seu@email.com"

2. Postman ou Insomnia

Para testar as APIs REST antes de escrever código Kotlin/Swift. * Postman: postman.com. * Insomnia: insomnia.rest.

3. Vysor (Opcional)

Para espelhar a tela do seu celular real no computador (via cabo USB). * Acesso: vysor.io.

4. ADB (Android Debug Bridge)

Já vem com o Android Studio, mas é útil no PATH do sistema. * Permite instalar APKs via terminal: adb install app.apk. * Permite ver logs detalhados: adb logcat.

5. Flipper (Meta)

Uma ferramenta avançada para debugar bancos de dados SQLite e chamadas de rede direto na interface visual. * Acesso: fbflipper.com.

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com React

Este curso foi projetado para transformar iniciantes em desenvolvedores frontend capazes de construir aplicações web profissionais, reativas e escaláveis utilizando a biblioteca mais popular do mercado.

🎯 Objetivos do Curso

  • Fundamentos Sólidos --- Compreender os princípios do React, como reconciliação, virtual DOM e o paradigma declarativo.

  • Domínio de Estados --- Gerenciar dados de forma eficiente, desde fluxos locais simples até arquiteturas de estado global complexas.

  • Interfaces Profissionais --- Criar designs modernos e responsivos utilizando CSS Modules, Styled Components e Tailwind CSS.

  • Conexão com Realidade --- Integrar aplicações frontend com backends reais, lidando com autenticação, segurança e performance.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos e Essenciais

  • Ecossistema JavaScript moderno
  • Estrutura de projetos com Vite
  • JSX e Componentização funcional
  • Hooks essenciais (useState, useEffect)

Módulo 2 – Estilização e Componentização

  • Bibliotecas de estilização modernas
  • Composição e padrões de componentes
  • Renderização de listas e formulários
  • Organização e arquitetura de pastas

Módulo 3 – Navegação e Gerenciamento de Dados

  • Roteamento dinâmico com React Router
  • Integração com APIs via Axios
  • Gerenciamento de estado global com Context API
  • Validação robusta de formulários

Módulo 4 – Performance e Qualidade

  • Otimização de renderização e memoização
  • Testes unitários e de componentes
  • Autenticação JWT e proteção de rotas
  • Build e estratégias de Deploy

🛠️ Metodologia

Foco direto na prática através da Metodologia Baseada em Projetos (PBL). Você aprenderá cada conceito aplicando-o imediatamente em mini-desafios e no desenvolvimento incremental de uma aplicação completa.

Pronto para dominar o Frontend? Começar Agora

Roadmap do Projeto: Desenvolvimento Frontend com React 🚀

Este documento rastreia a evolução da refatoração do curso.

✅ Fase 1: Planejamento (Concluído)

  • [x] Reestruturação da ementa (16 Aulas de React)
  • [x] Definição da stack tecnológica (Vite, React Router, Tailwind)
  • [x] Configuração visual e de navegação no MkDocs Material

🏗️ Fase 2: Refatoração de Conteúdo (Em Andamento)

  • [/] Atualização das 16 Aulas (Markdown)
  • [/] Atualização dos 16 Quizzes (Interativos)
  • [/] Atualização dos 16 Conjuntos de Exercícios
  • [/] Atualização dos 16 Slides (RevealJS)

🚀 Fase 3: Validação e Qualidade (Pendente)

  • [ ] Revisão ortográfica e técnica (100% PT-BR)
  • [ ] Verificação de acessibilidade e design responsivo
  • [ ] Testes de build estrito (mkdocs build --strict)

🚢 Fase 4: Launch e Deploy

  • [ ] Deploy automatizado no GitHub Pages
  • [ ] Criação de guia de configuração de ambiente para o aluno
  • [ ] Publicação do projeto final modelo

Status Atual: Em Refatoração Última Atualização: 21/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com React. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos e modernos.

  • Exercícios

    • Pratique a criação de componentes e gerenciamento de estados.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por aula.

  • Projetos

    • Construa aplicações reais do básico ao avançado para seu portfólio.

  • Ambiente

    • Guias de instalação (Node.js, VS Code, extensões essenciais).

Exercícios de Fixação – Aula 05 🎨

Exercício 01: CSS Modules

Crie um componente Botao e um arquivo Botao.module.css. Aplique uma classe que mude a cor de fundo e o arredondamento das bordas. Verifique no navegador como o nome da classe foi alterado (inspecionar elemento).

Exercício 02: Styled Components Básico

Instale o styled-components e crie um componente chamado Titulo que seja um h1 com cor azul e fonte em itálico.

Exercício 03: Estilo Dinâmico (Props)

Crie um componente Box usando Styled Components que recebe uma prop bg. A cor de fundo da div deve ser o valor passado nessa prop.

Quiz – Aula 05 🧠

  1. Qual a principal vantagem do CSS Modules?
  2. [ ] Deixa o site mais rápido.
  3. [ ] Evita conflitos de nomes de classes entre componentes diferentes.
  4. [ ] Transforma o CSS em JavaScript automaticamente.

  5. [ ] Não precisa de arquivos .css. Explicação: CSS Modules gera escopos locais para as classes CSS.

  6. Como instalamos o Styled Components em um projeto?

  7. [ ] npm install styled-components
  8. [ ] npm get styled
  9. [ ] Já vem instalado no Windows.
  10. [ ] Copiando o arquivo .exe. Explicação: É uma biblioteca de terceiros baixada via NPM.

Projeto 05 – Landing Page Tematizável 🌈

Objetivo: Criar uma página com troca dinâmica de temas usando Styled Components. - Use ThemeProvider ou apenas estilos dinâmicos baseados em props. - Crie um botão que alterna entre tema "Verão" e tema "Inverno". - Use Styled Components para todos os elementos principais.

Exercícios de Fixação – Aula 06 📝

Exercício 01: Setup do Form

Instale o react-hook-form e crie um formulário simples com um único campo "Nome". Ao submeter, exiba o nome em um alerta.

Exercício 02: Validação Required

Adicione uma regra de validação que impeça o envio do formulário se o campo "E-mail" estiver vazio. Exiba uma mensagem de erro em vermelho.

Exercício 03: Validação de Tamanho

Crie um campo "Senha". O formulário só deve ser válido se a senha tiver entre 8 e 20 caracteres.

Quiz – Aula 06 🧠

  1. O que o register faz no React Hook Form?
  2. [ ] Cria uma conta no site.
  3. [ ] Conecta um input ao gerenciamento da biblioteca.
  4. [ ] Salva os dados no banco.

  5. [ ] Abre o terminal. Explicação: Register é a função que "registra" o input para que a lib possa observar suas mudanças.

  6. Qual a principal diferença de performance do React Hook Form?

  7. [ ] Ele usa menos internet.
  8. [ ] Ele evita re-renderizações desnecessárias em cada tecla digitada (uncontrolled).
  9. [ ] Ele apaga o cache.
  10. [ ] Ele só funciona no Chrome. Explicação: Ao contrário do useState, ele não faz o componente renderizar em cada mudança de letra.

Projeto 06 – Formulário de Suporte ao Cliente 🎧

Objetivo: Criar um formulário completo com validações. - Campos: Nome, E-mail, Assunto (Select) e Mensagem (Textarea). - Use react-hook-form. - Exiba mensagens de erro claras para cada campo inválido. - Bloqueie o botão de envio enquanto o formulário for inválido.

Versão para Impressão

Esta página foi gerada automaticamente para impressão.