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
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)

🎯 1. Objetivos do Curso

  • Compreender os fundamentos conceituais e arquiteturais de Desenvolvimento Frontend com React.
  • Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
  • Desenvolver soluções completas através de exercícios práticos e desafios de projeto.

📚 2. Cronograma de Aulas (Matriz de 20 Semanas)

Aula Tema Central Atividades e Entregas
01 Introdução ao Frontend Moderno Teoria, Prática Guiada, Quiz e Exercícios
02 Fundamentos: JSX, Componentes e Props Teoria, Prática Guiada, Quiz e Exercícios
03 Hooks I: useState e Estado Local Teoria, Prática Guiada, Quiz e Exercícios
04 Hooks II: useEffect e Ciclo de Vida Teoria, Prática Guiada, Quiz e Exercícios
05 Estilização: CSS Modules e Styled Components Teoria, Prática Guiada, Quiz e Exercícios
06 Formulários e Validação (React Hook Form) Teoria, Prática Guiada, Quiz e Exercícios
07 React Router: Navegação SPA ️ Teoria, Prática Guiada, Quiz e Exercícios
08 Consumo de APIs: Fetch e Axios Teoria, Prática Guiada, Quiz e Exercícios
09 Context API: Estado Global Simples Teoria, Prática Guiada, Quiz e Exercícios
10 Hooks Avançados: useMemo, useCallback e useRef ️ Teoria, Prática Guiada, Quiz e Exercícios
11 Performance: React.memo e Lazy Loading Teoria, Prática Guiada, Quiz e Exercícios
12 Estado Global Avançado: Redux Toolkit Teoria, Prática Guiada, Quiz e Exercícios
13 Testes Unitários: Vitest e React Testing Library Teoria, Prática Guiada, Quiz e Exercícios
14 Integração com Backend: Firebase e Supabase ️ Teoria, Prática Guiada, Quiz e Exercícios
15 PWA e Deploy: Colocando no Ar! Teoria, Prática Guiada, Quiz e Exercícios
16 Projeto Final: Dashboard Completo Teoria, Prática Guiada, Quiz e Exercícios
17 Hooks Customizados Avançados e Contexto Isolado Teoria, Prática Guiada, Quiz e Exercícios
18 Otimização de Renderização com Memoização e Suspense Teoria, Prática Guiada, Quiz e Exercícios
19 Gerenciamento de Estado Global Desacoplado Teoria, Prática Guiada, Quiz e Exercícios
20 Projeto Capstone: Aplicação React SPA Autônoma Completa Teoria, Prática Guiada, Quiz e Exercícios

🧠 3. Metodologia de Ensino

  • Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
  • Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
  • Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.

💼 4. Competências e Perfil Desenvolvido

  • Dominar as ferramentas e fluxos de desenvolvimento de Desenvolvimento Frontend com React.
  • Resolver problemas técnicos de alta complexidade com código limpo e performático.
  • Construir portfólio prático com 20 projetos aplicados.

📊 5. Critérios de Avaliação

  • 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
  • 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
  • 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.

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
{% raw %}<div style={{ backgroundColor: isDark ? 'black' : 'white' }}>{% endraw %}

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={{ user, setUser }}>
      {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! ⚛️🚀

Aula 17 - Hooks Customizados Avançados e Contexto Isolado ⚛️

Objetivo Pedagógico

Objetivo: Arquitetura e composição de Custom Hooks avançados, isolamento de escopo com Context API modular e regras estritas de renderização.

📑 1. Fundamentos Teóricos & Análise Técnica

Os Custom Hooks no React representam o principal mecanismo para compartilhamento de lógica com estado (stateful logic) entre componentes sem a necessidade de alterar a hierarquia visual da árvore de renderização. Ao contrário dos componentes de classe legados baseados em Mixins ou Higher-Order Components (HOCs), os Custom Hooks compõem primitivas fundamentais (useState, useReducer, useEffect, useRef, useCallback) em funções puras e coesas.

O uso ingênuo de Context API, contudo, introduz problemas graves de desempenho. Quando um valor em um Context.Provider sofre mutação, todos os componentes consumidores que chamam useContext são forçados a re-renderizar, independentemente de estarem utilizando a propriedade específica que mudou.

Para solucionar esse gargalo em aplicações profissionais: 1. Separação de Contextos: Divisão de estados em dois contextos paralelos — um para o Estado (StateContext) e outro para os Despachantes de Ação (DispatchContext). 2. Contextos Isolados por Feature: Em vez de um único contexto global monolítico, instanciar provedores locais escopados aos limites do módulo. 3. Seletores Granulares: Implementação de hooks customizados que extraem apenas fatias necessárias do estado.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    subgraph ArquiteturaContexto ["Padrão de Contexto Isolado em React"]
        Provider["OrderProvider (Provedor Escopado)"] --> StateCtx["OrderStateContext (Dados)"]
        Provider --> DispatchCtx["OrderDispatchContext (Funções de Ação)"]
    end
    StateCtx --> HookState["useOrderState() -> Lê Dados do Pedido"]
    DispatchCtx --> HookDispatch["useOrderDispatch() -> Dispara Ações (Nunca re-renderiza por dados!)"]
    HookState --> CompViewer["ViewComponent (Re-renderiza apenas se dados mudarem)"]
    HookDispatch --> CompButton["ActionButton (Zero re-renderizações desnecessárias!)"]
    style ArquiteturaContexto fill:#e3f2fd,stroke:#1565c0
    style CompViewer fill:#fff3e0,stroke:#e65100
    style CompButton fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Composição Funcional de Hooks: Encapsulamento de efeitos colaterais, sincronização com APIs e ciclo de vida. - Desacoplamento State vs. Dispatch: Componentes que apenas disparam ações não devem assinar as atualizações de estado. - Regras Estritas de Hooks: Chamadas restritas ao nível superior de componentes ou outros custom hooks. - Abstração Limpa de Efeitos: Ocultação de detalhes de implementação como AbortController dentro de hooks especializados.

🛠️ 2. Implementação Prática em React 18+ Hooks e Context API

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// use-fetch-abortable.ts (Custom Hook com Cancelamento Automático)
import { useState, useEffect, useRef } from 'react';

export function useFetchAbortable<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);

    fetch(url, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
        return res.json() as Promise<T>;
      })
      .then(resData => {
        setData(resData);
        setError(null);
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      })
      .finally(() => setLoading(false));

    // Cleanup: cancela a requisição se o componente desmontar
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

💡 Análise Passo a Passo do Código

  1. AbortController Dedicado: A cada mudança da prop url, uma nova instância de AbortController é criada para monitorar a requisição.
  2. Cleanup Eficiente: A função retornada pelo useEffect aborta requisições pendentes se o usuário trocar de página rapidamente.
  3. Tratamento de AbortError: Erros de cancelamento proposital são ignorados para não poluir o estado visual do componente.

🎯 3. Próximos Passos & Sequência Didática

Aula 18 - Otimização de Renderização com Memoização e Suspense 🚀

Objetivo Pedagógico

Objetivo: Eliminação de re-renderizações desnecessárias com React.memo, useMemo e useCallback, integrando carregamento declarativo com Suspense e Concurrent Features.

📑 1. Fundamentos Teóricos & Análise Técnica

No modelo mental do React, sempre que o estado de um componente sofre mutação, aquele componente e toda a sua subárvore descendente são reavaliados pelo algoritmo de reconciliação (Fiber reconciler). Em árvores de componentes densas, essas re-renderizações em cascata desperdiçam preciosos milissegundos de CPU na thread principal.

As ferramentas de memoização resolvem esses gargalos através de igualdade referencial: 1. React.memo: Higher-Order Component que compara superficialmente (shallow compare) as props recebidas. Se forem idênticas às da renderização anterior, o React pula a execução do componente. 2. useMemo: Guarda em cache o resultado de computações matemáticas ou transformações de coleções custosas. 3. useCallback: Preserva a identidade referencial de funções passadas como callbacks para componentes filhos memoizados.

Paralelamente, o React Suspense revoluciona o gerenciamento de estados assíncronos ao permitir que componentes pausem declarativamente sua renderização enquanto aguardam a resolução de recursos assíncronos (código via React.lazy ou dados de rede), delegando a exibição de skeletons a limites superiores (Suspense Boundaries).

📐 Arquitetura Conceitual & Diagrama de Fluxo

sequenceDiagram
    autonumber
    participant App as Componente Pai
    participant Boundary as <Suspense fallback={<Skeleton />}>
    participant AsyncComp as Componente Assíncrono (React.lazy)
    participant Fiber as React Fiber Reconciler

    App->>Boundary: Dispara Renderização
    Boundary->>AsyncComp: Tenta Renderizar Filho
    AsyncComp-->>Fiber: Lança Promise (Carregando Chunk JS)
    Fiber-->>Boundary: Captura Promise
    Boundary-->>App: Renderiza Instantaneamente o Fallback (Skeleton)
    AsyncComp->>Fiber: Promise Resolvida (Chunk Pronto)
    Fiber->>Boundary: Troca Declarativa para o Componente Real

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Igualdade Referencial Estrita: Compreensão de que {} e [] literais criam novas referências a cada render. - Custo vs. Benefício da Memoização: Aplicação cirúrgica de useMemo apenas quando o custo do cálculo supera o overhead da comparação de dependências. - Fronteiras de Suspense Declarativas: Isolamento de falhas e estados de carregamento sem poluir a lógica dos componentes com if (loading). - Transições Concorrentes (useTransition): Marcação de atualizações de baixa prioridade para não congelar o campo de digitação do usuário.

🛠️ 2. Implementação Prática em React Profiler, useMemo e React Suspense

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// memoized-dashboard.tsx (Memoização Cirúrgica e Suspense Boundary)
import React, { useState, useMemo, useCallback, Suspense, lazy } from 'react';

// Lazy loading do componente gráfico pesado
const AnalyticsChart = lazy(() => import('./AnalyticsChart'));

interface Item { id: number; value: number; name: string; }

// Componente filho memoizado
const ListItem = React.memo(({ item, onSelect }: { item: Item; onSelect: (id: number) => void }) => {
  return (
    <div onClick={() => onSelect(item.id)} className="item-row">
      <span>{item.name}</span>
    </div>
  );
});

export function Dashboard({ rawData }: { rawData: Item[] }) {
  const [filter, setFilter] = useState('');

  // 1. Memoização de cálculo pesado
  const filteredList = useMemo(() => {
    return rawData.filter(d => d.name.toLowerCase().includes(filter.toLowerCase()));
  }, [rawData, filter]);

  // 2. Preservação de referência de função
  const handleSelect = useCallback((id: number) => {
    console.log('Item selecionado:', id);
  }, []);

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filtrar..." />
      {filteredList.map(item => (
        <ListItem key={item.id} item={item} onSelect={handleSelect} />
      ))}
      <Suspense fallback={<div class="skeleton">Carregando Gráficos...</div>}>
        <AnalyticsChart data={filteredList} />
      </Suspense>
    </div>
  );
}

💡 Análise Passo a Passo do Código

  1. React.memo no Filho: ListItem evita re-renderizar caso suas props item e onSelect mantenham a mesma referência em memória.
  2. useCallback Estável: handleSelect não é recriado quando o usuário digita no input filter, preservando a memoização do ListItem.
  3. Suspense Declarativo: O componente pesado AnalyticsChart exibe o fallback sem bloquear a interface de digitação.

🎯 3. Próximos Passos & Sequência Didática

Aula 19 - Gerenciamento de Estado Global Desacoplado 🌐

Objetivo Pedagógico

Objetivo: Arquitetura de estado global moderno com bibliotecas atômicas/baseadas em seletor (Zustand), eliminando boilerplate e otimizando subscrições.

📑 1. Fundamentos Teóricos & Análise Técnica

O gerenciamento de estado global em React passou por ciclos de evolução marcados por diferentes filosofias. O modelo histórico do Redux clássico, embora previsível e determinístico, impunha uma sobrecarga massiva de boilerplate (actions, action-types, action-creators, reducers, selectors e dependência de connect ou provedores contextuais).

Bibliotecas modernas como Zustand adotam uma abordagem desacoplada baseada no padrão Publish-Subscribe (Pub/Sub) fora da árvore React: 1. O estado reside em uma store independente em memória JavaScript pura, sem exigir um <Provider> encapsulando a aplicação. 2. A sincronização com o React utiliza a API interna useSyncExternalStore (introduzida no React 18), prevenindo leituras inconsistentes (tearing) durante renderizações concorrentes. 3. Os componentes se inscrevem na store através de Seletores Granulares (useStore(state => state.property)), garantindo que o componente re-renderize exclusivamente quando a propriedade selecionada sofrer mutação.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph LR
    subgraph ZustandStore ["Zustand Store (Fora da Árvore React)"]
        State["Estado Central: { user, cart, theme }"]
        Actions["Ações: { login(), addToCart() }"]
    end
    ZustandStore -->|Seletor: s => s.cart| CompCart["HeaderCartBadge (Re-renderiza apenas ao alterar cart)"]
    ZustandStore -->|Seletor: s => s.theme| CompTheme["ThemeSwitcher (Re-renderiza apenas ao alterar theme)"]
    CompCart -.->|Dispara Ação| Actions
    style ZustandStore fill:#e3f2fd,stroke:#1565c0
    style CompCart fill:#e8f5e9,stroke:#2e7d32
    style CompTheme fill:#fff3e0,stroke:#e65100

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Zero Provider Overhead: A store pode ser acessada tanto dentro de componentes React quanto em funções utilitárias ou interceptores HTTP fora do React. - Seletores de Estado Estritos: Redução drástica do número de re-renderizações em comparação com Context API. - Middlewares Nativos: Suporte imediato a persistência em localStorage (persist) e depuração visual no Redux DevTools. - Imutabilidade sem Verbosismo: Possibilidade de mutações declarativas simples sem necessidade de bibliotecas externas.

🛠️ 2. Implementação Prática em Zustand e Gerenciamento de Estado

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// use-cart-store.ts (Store Zustand com Seletor e Persistência)
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartItem { id: string; title: string; price: number; }

interface CartState {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
  totalPrice: () => number;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
      removeItem: (id) => set((state) => ({ items: state.items.filter(i => i.id !== id) })),
      clearCart: () => set({ items: [] }),
      totalPrice: () => get().items.reduce((acc, curr) => acc + curr.price, 0)
    }),
    { name: 'app-shopping-cart-storage' }
  )
);

// Exemplo de consumo em componente:
// const itemsCount = useCartStore((state) => state.items.length); // Seletor granular!

💡 Análise Passo a Passo do Código

  1. Criação da Store Desacoplada: create<CartState>() instancia a store tipada com estado e métodos em uma única estrutura limpa.
  2. Middleware de Persistência: persist armazena e reidrata os dados automaticamente no localStorage do navegador.
  3. Assinatura Seletiva: state.items.length garante que o componente que exibe a contagem de itens não re-renderize se os preços forem atualizados.

🎯 3. Próximos Passos & Sequência Didática

Aula 20 - Projeto Capstone: Aplicação React SPA Autônoma Completa 🏆

Objetivo Pedagógico

Objetivo: Desenvolvimento do projeto prático integrador em React 18, unindo TypeScript estrito, roteamento com React Router, Zustand, Suspense e design system.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone da Especialização em React representa a consolidação profissional do estudante no framework mais utilizado pelo mercado de trabalho global. O objetivo é construir uma aplicação web autônoma, completa e pronta para produção (production-ready), aplicando as mais modernas convenções arquiteturais.

A aplicação a ser desenvolvida consiste em um Hub de Gestão de Projetos e Tarefas Colaborativas, contemplando: 1. Tipagem Estrita de Ponta a Ponta: Ausência total de tipos any, com interfaces para entidades de domínio, props e stores. 2. Arquitetura de Estado com Zustand: Gerenciamento desacoplado de autenticação, preferências de usuário e listas de tarefas. 3. Roteamento Moderno (React Router v6+): Uso de rotas declarativas baseadas em objetos (createBrowserRouter), com carregamento assíncrono via lazy e limites de erro (Error Boundaries). 4. Resiliência e Desempenho: Pontuação superior a 90 em métricas Core Web Vitals, com virtualização de listas em telas de grande volume de dados.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Entry["index.tsx (React 18 createRoot)"] --> Router["RouterProvider (createBrowserRouter)"]
    Router --> ErrorB["ErrorBoundary (Captura Falhas de Render)"]
    ErrorB --> Susp["Suspense Boundary (Skeleton Loaders)"]
    Susp --> Pages["Rotas Lazy Loaded (Dashboard, Projetos, Config)"]
    Pages --> Zustand["Zustand Global Stores (Auth & Projects)"]
    Pages --> Services["Camada de Serviços HTTP (Axios/Fetch + Tipagem)"]
    style Entry fill:#e3f2fd,stroke:#1565c0
    style Router fill:#fff3e0,stroke:#e65100
    style Zustand fill:#e8f5e9,stroke:#2e7d32
    style Services fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Separação de Responsabilidades: Camada de apresentação (UI), camada de lógica de estado (Hooks/Stores) e camada de dados (Services). - Resiliência a Falhas de Rede: Feedback visual amigável e captura de exceções em Error Boundaries sem quebrar a tela inteira. - Divisão Estratégica de Pacotes (Code-Splitting): Nenhum módulo da rota de administração é baixado na página de login. - Padrão de Componentes Limpos: Funções com menos de 100 linhas focadas estritamente em seu propósito visual.

🛠️ 2. Implementação Prática em React 18+, TypeScript e Zustand

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// router-app.tsx (Configuração do Router e Error Boundaries)
import React, { Suspense, lazy } from 'react';
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';

const DashboardView = lazy(() => import('./views/DashboardView'));
const ProjectDetailsView = lazy(() => import('./views/ProjectDetailsView'));

const RootLayout = () => (
  <div class="app-layout">
    <header class="app-header"><h1>TaskManager Pro</h1></header>
    <main>
      <Suspense fallback={<div class="page-spinner">Carregando Módulo...</div>}>
        <Outlet />
      </Suspense>
    </main>
  </div>
);

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <div class="error-screen">Ops! Ocorreu uma falha inesperada na rota.</div>,
    children: [
      { index: true, element: <DashboardView /> },
      { path: 'projects/:id', element: <ProjectDetailsView /> }
    ]
  }
]);

💡 Análise Passo a Passo do Código

  1. createBrowserRouter Nativo: Habilita o novo motor de roteamento orientado a loaders e actions do React Router.
  2. ErrorElement Centralizado: Captura exceções disparadas em rotas filhas e exibe tela de fallback graciosa.
  3. Outlet com Suspense: Permite que a casca da aplicação continue estável enquanto a subpágina é baixada pela rede.

🎯 3. Próximos Passos & Sequência Didática

Aulas do Curso

Bem-vindo à seção de aulas! Aqui você encontra todo o conteúdo do curso organizado em 5 módulos estruturados.

📚 Módulos do Curso

Exercícios

🏋️ Exercícios do Curso

Lista completa das 20 unidades de exercicios organizadas em 5 módulos didáticos.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Pesquise e explique brevemente como essa tecnologia funciona. **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Pesquise e explique brevemente como essa tecnologia funciona.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Faça um teste **Resolução e Implementação:** 
// Solução de referência para: Faça um teste
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao Frontend Moderno");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao Frontend Moderno**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Estilize o card usando CSS simples (pode ser no `App.css`). **Resposta Comentada:** - **Fundamentação:** No contexto de **Fundamentos: JSX, Componentes e Props**, o conceito abordado (Estilize o card usando CSS simples (pode ser no `App.css`).) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Tente usar o componente dentro de uma lista (mesmo que estática por enquanto) no `App.jsx`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Fundamentos: JSX, Componentes e Props**, o conceito abordado (Tente usar o componente dentro de uma lista (mesmo que estática por enquanto) no `App.jsx`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Ao clicar em um botão "Adicionar", pegue o texto do input e adicione ao array da lista. **Resolução e Implementação:** 
// Solução de referência para: Ao clicar em um botão "Adicionar", pegue o texto do input e adicione ao array da lista.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks I: useState e Estado Local");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks I: useState e Estado Local**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Exiba a lista de tarefas usando `.map()`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks I: useState e Estado Local**, o conceito abordado (Exiba a lista de tarefas usando `.map()`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: O estado deve guardar a cor atual ("verde", "amarelo" ou "vermelho"). **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks I: useState e Estado Local**, o conceito abordado (O estado deve guardar a cor atual ("verde", "amarelo" ou "vermelho").) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Crie um botão "Próximo Passo" que altera a cor seguindo a ordem lógica. **Resolução e Implementação:** 
// Solução de referência para: Crie um botão "Próximo Passo" que altera a cor seguindo a ordem lógica.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks I: useState e Estado Local");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks I: useState e Estado Local**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Altere o estilo visual de três círculos (divs com border **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks I: useState e Estado Local**, o conceito abordado (Altere o estilo visual de três círculos (divs com border) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie um input para o CEP. **Resolução e Implementação:** 
// Solução de referência para: Crie um input para o CEP.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks II: useEffect e Ciclo de Vida");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks II: useEffect e Ciclo de Vida**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Escreva um `useEffect` que dispara uma busca na API `https **Resolução e Implementação:** 
// Solução de referência para: Escreva um `useEffect` que dispara uma busca na API `https
function solucaoExercicio() {
    console.log("Executando validação de: Hooks II: useEffect e Ciclo de Vida");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks II: useEffect e Ciclo de Vida**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Exiba o endereço (Rua, Bairro, Cidade) na tela. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks II: useEffect e Ciclo de Vida**, o conceito abordado (Exiba o endereço (Rua, Bairro, Cidade) na tela.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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').

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Aplique uma classe que mude a cor de fundo para "teal" e aumente o padding. **Resolução e Implementação:** 
// Solução de referência para: Aplique uma classe que mude a cor de fundo para "teal" e aumente o padding.
function solucaoExercicio() {
    console.log("Executando validação de: Estilização: CSS Modules e Styled Components");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilização: CSS Modules e Styled Components**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Verifique no navegador como o nome da classe foi alterado para evitar conflitos. **Resolução e Implementação:** 
// Solução de referência para: Verifique no navegador como o nome da classe foi alterado para evitar conflitos.
function solucaoExercicio() {
    console.log("Executando validação de: Estilização: CSS Modules e Styled Components");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilização: CSS Modules e Styled Components**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Use a função `handleSubmit` para capturar o envio. **Resolução e Implementação:** 
// Solução de referência para: Use a função `handleSubmit` para capturar o envio.
function solucaoExercicio() {
    console.log("Executando validação de: Formulários e Validação (React Hook Form)");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Formulários e Validação (React Hook Form)**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Exiba o nome em um alerta ou no console. **Resposta Comentada:** - **Fundamentação:** No contexto de **Formulários e Validação (React Hook Form)**, o conceito abordado (Exiba o nome em um alerta ou no console.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Exiba uma mensagem de erro abaixo do input **Resposta Comentada:** - **Fundamentação:** No contexto de **Formulários e Validação (React Hook Form)**, o conceito abordado (Exiba uma mensagem de erro abaixo do input) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Use o objeto `errors` do `useForm`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Formulários e Validação (React Hook Form)**, o conceito abordado (Use o objeto `errors` do `useForm`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: A senha deve ter entre 8 e 20 caracteres. **Resposta Comentada:** - **Fundamentação:** No contexto de **Formulários e Validação (React Hook Form)**, o conceito abordado (A senha deve ter entre 8 e 20 caracteres.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: (Bônus) Tente validar se as duas senhas são iguais antes de permitir o envio. **Resposta Comentada:** - **Fundamentação:** No contexto de **Formulários e Validação (React Hook Form)**, o conceito abordado ((Bônus) Tente validar se as duas senhas são iguais antes de permitir o envio.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie duas rotas **Resolução e Implementação:** 
// Solução de referência para: Crie duas rotas
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **React Router: Navegação SPA ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Crie um componente de Navegação com `` para ambas. **Resolução e Implementação:** 
// Solução de referência para: Crie um componente de Navegação com `<Link>` para ambas.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **React Router: Navegação SPA ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Certifique **Resposta Comentada:** - **Fundamentação:** No contexto de **React Router: Navegação SPA ️**, o conceito abordado (Certifique) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Crie uma classe CSS chamada `.active` no seu `App.css`. **Resolução e Implementação:** 
// Solução de referência para: Crie uma classe CSS chamada `.active` no seu `App.css`.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **React Router: Navegação SPA ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Essa classe deve deixar o link em negrito e com uma cor de destaque quando for a página atual. **Resolução e Implementação:** 
// Solução de referência para: Essa classe deve deixar o link em negrito e com uma cor de destaque quando for a página atual.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **React Router: Navegação SPA ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 1: Use o hook `useNavigate`. **Resposta Comentada:** - **Fundamentação:** No contexto de **React Router: Navegação SPA ️**, o conceito abordado (Use o hook `useNavigate`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Após o usuário clicar em "Enviar", simule um envio e use o `navigate("/")` para mandá **Resposta Comentada:** - **Fundamentação:** No contexto de **React Router: Navegação SPA ️**, o conceito abordado (Após o usuário clicar em "Enviar", simule um envio e use o `navigate("/")` para mandá) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Use a API `https **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de APIs: Fetch e Axios**, o conceito abordado (Use a API `https) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Liste as primeiras 10 fotos da API. **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de APIs: Fetch e Axios**, o conceito abordado (Liste as primeiras 10 fotos da API.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Exiba o título e a imagem em miniatura (`thumbnailUrl`). **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de APIs: Fetch e Axios**, o conceito abordado (Exiba o título e a imagem em miniatura (`thumbnailUrl`).) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Use o Axios e tente usar uma função `async/await`. **Resolução e Implementação:** 
// Solução de referência para: Use o Axios e tente usar uma função `async/await`.
function solucaoExercicio() {
    console.log("Executando validação de: Consumo de APIs: Fetch e Axios");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Consumo de APIs: Fetch e Axios**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie um arquivo `ThemeContext.js`. **Resolução e Implementação:** 
// Solução de referência para: Crie um arquivo `ThemeContext.js`.
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Context API: Estado Global Simples**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Configure um contexto que guarde o valor `'light'` ou `'dark'`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Context API: Estado Global Simples**, o conceito abordado (Configure um contexto que guarde o valor `'light'` ou `'dark'`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Use o `Provider` para envolver sua aplicação. **Resposta Comentada:** - **Fundamentação:** No contexto de **Context API: Estado Global Simples**, o conceito abordado (Use o `Provider` para envolver sua aplicação.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Crie um `AuthContext` que guarde um objeto `usuario` (inicialmente `null`). **Resolução e Implementação:** 
// Solução de referência para: Crie um `AuthContext` que guarde um objeto `usuario` (inicialmente `null`).
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Context API: Estado Global Simples**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Crie uma função `login` que define um objeto `{ nome **Resolução e Implementação:** 
// Solução de referência para: Crie uma função `login` que define um objeto `{ nome
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Context API: Estado Global Simples**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Na Navbar, mostre "Bem **Resposta Comentada:** - **Fundamentação:** No contexto de **Context API: Estado Global Simples**, o conceito abordado (Na Navbar, mostre "Bem) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Ao carregar a página, o campo de E **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Ao carregar a página, o campo de E) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Adicione um botão "Limpar e Focar" que limpa os campos e volta o cursor para o e **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Adicione um botão "Limpar e Focar" que limpa os campos e volta o cursor para o e) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Adicione um input de busca. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Adicione um input de busca.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Use o `useMemo` para filtrar a lista conforme o usuário digita. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Use o `useMemo` para filtrar a lista conforme o usuário digita.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Coloque um `console.log` dentro do filtro para provar que ele não roda sem necessidade. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Coloque um `console.log` dentro do filtro para provar que ele não roda sem necessidade.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Crie um componente filho que recebe uma função via prop. **Resolução e Implementação:** 
// Solução de referência para: Crie um componente filho que recebe uma função via prop.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks Avançados: useMemo, useCallback e useRef ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks Avançados: useMemo, useCallback e useRef ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Memoize o filho com `React.memo`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Memoize o filho com `React.memo`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: No pai, use o `useCallback` para passar a função para o filho. **Resolução e Implementação:** 
// Solução de referência para: No pai, use o `useCallback` para passar a função para o filho.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks Avançados: useMemo, useCallback e useRef ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Hooks Avançados: useMemo, useCallback e useRef ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Verifique se o filho para de renderizar quando outros estados do pai mudam. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Verifique se o filho para de renderizar quando outros estados do pai mudam.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Exiba o valor atual no console. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Exiba o valor atual no console.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Verifique que o valor muda, mas o número na tela (se você usar um h1 estático) não é atualizado. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Verifique que o valor muda, mas o número na tela (se você usar um h1 estático) não é atualizado.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Adicione um botão de "Forçar Render" (usando um useState bobo) e veja o valor do ref aparecendo. **Resposta Comentada:** - **Fundamentação:** No contexto de **Hooks Avançados: useMemo, useCallback e useRef ️**, o conceito abordado (Adicione um botão de "Forçar Render" (usando um useState bobo) e veja o valor do ref aparecendo.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: No componente pai, crie um contador que atualiza a cada segundo. **Resolução e Implementação:** 
// Solução de referência para: No componente pai, crie um contador que atualiza a cada segundo.
function solucaoExercicio() {
    console.log("Executando validação de: Performance: React.memo e Lazy Loading");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Performance: React.memo e Lazy Loading**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 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. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (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.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Transforme as páginas `Sobre` e `Contato` em componentes carregados via `lazy`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Transforme as páginas `Sobre` e `Contato` em componentes carregados via `lazy`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Use o `Suspense` para mostrar a mensagem "Carregando Página..." enquanto elas são baixadas. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Use o `Suspense` para mostrar a mensagem "Carregando Página..." enquanto elas são baixadas.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Adicione o atributo `loading="lazy"` em todas elas. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Adicione o atributo `loading="lazy"` em todas elas.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Use imagens de alta resolução do Unsplash. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Use imagens de alta resolução do Unsplash.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Observe no Inspetor de Elementos (aba Network) que as imagens só são baixadas quando você faz scroll e se aproxima delas. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Observe no Inspetor de Elementos (aba Network) que as imagens só são baixadas quando você faz scroll e se aproxima delas.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Abra o React DevTools no seu navegador. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Abra o React DevTools no seu navegador.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Vá na aba "Profiler" e clique em gravar. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Vá na aba "Profiler" e clique em gravar.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Realize algumas interações na sua lista filtrável da aula anterior. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Realize algumas interações na sua lista filtrável da aula anterior.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Pare a gravação e identifique qual componente está levando mais tempo para renderizar. **Resposta Comentada:** - **Fundamentação:** No contexto de **Performance: React.memo e Lazy Loading**, o conceito abordado (Pare a gravação e identifique qual componente está levando mais tempo para renderizar.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Estado inicial **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Estado inicial) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Adicione uma action `login` que muda o nome para 'Ricardo' e `isLogged` para true. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Adicione uma action `login` que muda o nome para 'Ricardo' e `isLogged` para true.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Adicione uma action `logout` que reseta os valores. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Adicione uma action `logout` que reseta os valores.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Use o `useSelector` para exibir o nome do usuário que está na store. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Use o `useSelector` para exibir o nome do usuário que está na store.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: No botão de login, use o `useDispatch` para disparar a action `login`. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (No botão de login, use o `useDispatch` para disparar a action `login`.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Verifique se o nome muda na aplicação toda sem usar Context ou Props. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Verifique se o nome muda na aplicação toda sem usar Context ou Props.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Action `addFavorite` **Resolução e Implementação:** 
// Solução de referência para: Action `addFavorite`
function solucaoExercicio() {
    console.log("Executando validação de: Estado Global Avançado: Redux Toolkit");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estado Global Avançado: Redux Toolkit**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Action `removeFavorite` **Resolução e Implementação:** 
// Solução de referência para: Action `removeFavorite`
function solucaoExercicio() {
    console.log("Executando validação de: Estado Global Avançado: Redux Toolkit");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estado Global Avançado: Redux Toolkit**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Exiba o contador de favoritos no seu menu de navegação. **Resposta Comentada:** - **Fundamentação:** No contexto de **Estado Global Avançado: Redux Toolkit**, o conceito abordado (Exiba o contador de favoritos no seu menu de navegação.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie um componente `Titulo` que apenas exibe um `h1` com o texto "Olá Mundo". **Resolução e Implementação:** 
// Solução de referência para: Crie um componente `Titulo` que apenas exibe um `h1` com o texto "Olá Mundo".
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Testes Unitários: Vitest e React Testing Library**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Escreva um teste que verifica se o texto "Olá Mundo" está presente no documento. **Resolução e Implementação:** 
// Solução de referência para: Escreva um teste que verifica se o texto "Olá Mundo" está presente no documento.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Testes Unitários: Vitest e React Testing Library**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 1: Escreva um teste que passa um nome específico e verifica se ele é renderizado corretamente. **Resolução e Implementação:** 
// Solução de referência para: Escreva um teste que passa um nome específico e verifica se ele é renderizado corretamente.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Testes Unitários: Vitest e React Testing Library**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Use o `screen.getByText` com uma Expressão Regular (Regex) para ser insensível a maiúsculas/minúsculas. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (Use o `screen.getByText` com uma Expressão Regular (Regex) para ser insensível a maiúsculas/minúsculas.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: O valor inicial deve ser 0. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (O valor inicial deve ser 0.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Ao clicar no botão "Aumentar", o valor deve ir para 1. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (Ao clicar no botão "Aumentar", o valor deve ir para 1.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Use o `fireEvent.click` ou `userEvent.click` para simular o clique no teste. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (Use o `fireEvent.click` ou `userEvent.click` para simular o clique no teste.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Escreva um teste que verifica que a mensagem está oculta por padrão. **Resolução e Implementação:** 
// Solução de referência para: Escreva um teste que verifica que a mensagem está oculta por padrão.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Testes Unitários: Vitest e React Testing Library**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Simule o clique e verifique se a mensagem apareceu. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (Simule o clique e verifique se a mensagem apareceu.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Verifique se ela some ao clicar novamente. **Resposta Comentada:** - **Fundamentação:** No contexto de **Testes Unitários: Vitest e React Testing Library**, o conceito abordado (Verifique se ela some ao clicar novamente.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie um novo projeto chamado "MeuProjetoReact". **Resolução e Implementação:** 
// Solução de referência para: Crie um novo projeto chamado "MeuProjetoReact".
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Ative o Banco de Dados (Firestore ou PostreSQL). **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Ative o Banco de Dados (Firestore ou PostreSQL).) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Copie as chaves de configuração. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Copie as chaves de configuração.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Instale o SDK (ex **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Instale o SDK (ex) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Crie uma função que salve um objeto `{ nome **Resolução e Implementação:** 
// Solução de referência para: Crie uma função que salve um objeto `{ nome
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Verifique no console da nuvem se o dado apareceu. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Verifique no console da nuvem se o dado apareceu.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Use a função de escuta (ex **Resolução e Implementação:** 
// Solução de referência para: Use a função de escuta (ex
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Exiba uma lista de itens vinda do banco. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Exiba uma lista de itens vinda do banco.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Crie um campo de input do tipo `file`. **Resolução e Implementação:** 
// Solução de referência para: Crie um campo de input do tipo `file`.
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso. **Resolução e Implementação:** 
// Solução de referência para: Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso.
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.

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.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Altere o `` para o nome do seu projeto. **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Altere o `<title>` para o nome do seu projeto.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Adicione uma meta tag `description`. **Resolução e Implementação:** <div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#exercicios-exercicio-15-__codelineno-0-1"></a><span class="c1">// Solução de referência para: Adicione uma meta tag `description`.</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#exercicios-exercicio-15-__codelineno-0-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">solucaoExercicio</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#exercicios-exercicio-15-__codelineno-0-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Executando validação de: PWA e Deploy: Colocando no Ar!"</span><span class="p">);</span> </span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#exercicios-exercicio-15-__codelineno-0-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span> </span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#exercicios-exercicio-15-__codelineno-0-5"></a><span class="p">}</span> </span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#exercicios-exercicio-15-__codelineno-0-6"></a> </span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#exercicios-exercicio-15-__codelineno-0-7"></a><span class="nx">solucaoExercicio</span><span class="p">();</span> </span></code></pre></div> - **Explicação:** A solução atende diretamente aos requisitos de **PWA e Deploy: Colocando no Ar!**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Adicione as tags Open Graph (`og **Resolução e Implementação:** <div class="language-javascript highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#exercicios-exercicio-15-__codelineno-1-1"></a><span class="c1">// Solução de referência para: Adicione as tags Open Graph (`og</span> </span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#exercicios-exercicio-15-__codelineno-1-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">solucaoExercicio</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#exercicios-exercicio-15-__codelineno-1-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Executando validação de: PWA e Deploy: Colocando no Ar!"</span><span class="p">);</span> </span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#exercicios-exercicio-15-__codelineno-1-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span> </span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#exercicios-exercicio-15-__codelineno-1-5"></a><span class="p">}</span> </span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#exercicios-exercicio-15-__codelineno-1-6"></a> </span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#exercicios-exercicio-15-__codelineno-1-7"></a><span class="nx">solucaoExercicio</span><span class="p">();</span> </span></code></pre></div> - **Explicação:** A solução atende diretamente aos requisitos de **PWA e Deploy: Colocando no Ar!**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 1: Crie uma conta na **Vercel** ou **Netlify** usando seu login do GitHub. **Resolução e Implementação:** <div class="language-javascript highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#exercicios-exercicio-15-__codelineno-2-1"></a><span class="c1">// Solução de referência para: Crie uma conta na **Vercel** ou **Netlify** usando seu login do GitHub.</span> </span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#exercicios-exercicio-15-__codelineno-2-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">solucaoExercicio</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#exercicios-exercicio-15-__codelineno-2-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Executando validação de: PWA e Deploy: Colocando no Ar!"</span><span class="p">);</span> </span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#exercicios-exercicio-15-__codelineno-2-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span> </span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#exercicios-exercicio-15-__codelineno-2-5"></a><span class="p">}</span> </span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#exercicios-exercicio-15-__codelineno-2-6"></a> </span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#exercicios-exercicio-15-__codelineno-2-7"></a><span class="nx">solucaoExercicio</span><span class="p">();</span> </span></code></pre></div> - **Explicação:** A solução atende diretamente aos requisitos de **PWA e Deploy: Colocando no Ar!**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Conecte seu repositório do curso. **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Conecte seu repositório do curso.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: No Chrome, abra seu site (mesmo que localmente). **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (No Chrome, abra seu site (mesmo que localmente).) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Vá em Inspecionar **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Vá em Inspecionar) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Gere um relatório focado em "Performance" e "SEO". **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Gere um relatório focado em "Performance" e "SEO".) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Tente corrigir pelo menos um item sugerido (ex **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Tente corrigir pelo menos um item sugerido (ex) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: No seu projeto Vite, instale o plugin `vite **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (No seu projeto Vite, instale o plugin `vite) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Configure um manifesto básico com nome, cor e um ícone. **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Configure um manifesto básico com nome, cor e um ícone.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Teste se, ao rodar o projeto, o navegador exibe o ícone de "Instalar Aplicativo" na barra de endereços. **Resposta Comentada:** - **Fundamentação:** No contexto de **PWA e Deploy: Colocando no Ar!**, o conceito abordado (Teste se, ao rodar o projeto, o navegador exibe o ícone de "Instalar Aplicativo" na barra de endereços.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. </details></section><section class="print-page" id="exercicios-exercicio-16" heading-number="5.17"><h1 id="exercicios-exercicio-16-exercicios-de-fixacao-aula-16">Exercícios de Fixação – Aula 16 🏆</h1> <h3 id="exercicios-exercicio-16-exercicio-01-definicao-de-escopo">Exercício 01: Definição de Escopo</h3> <ol> <li>Escolha o tema do seu projeto final.</li> <li>Liste as 5 funcionalidades principais (Features) que seu app terá.</li> <li>Desenhe um rascunho (Wireframe) das 3 telas principais: Home, Dashboard e Detalhes.</li> </ol> <h3 id="exercicios-exercicio-16-exercicio-02-configuracao-da-store-global">Exercício 02: Configuração da Store Global</h3> <ol> <li>Desenhe a estrutura do seu estado global.</li> <li>Quais dados precisam estar no Redux? Quais podem ficar no useState local?</li> <li>Crie os arquivos iniciais da sua Store.</li> </ol> <hr /> <h2 id="exercicios-exercicio-16-nivel-intermediario">🟡 Nível: Intermediário</h2> <h3 id="exercicios-exercicio-16-exercicio-03-checklist-de-performance">Exercício 03: Checklist de Performance</h3> <p>Antes de finalizar o projeto, verifique: 1. Todas as imagens possuem <code>loading="lazy"</code>? 2. Existem componentes pesados que poderiam usar <code>React.memo</code>? 3. As rotas estão usando <code>lazy</code> e <code>Suspense</code>?</p> <h3 id="exercicios-exercicio-16-exercicio-04-preparacao-do-pitch">Exercício 04: Preparação do Pitch</h3> <p>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?</p> <hr /> <h2 id="exercicios-exercicio-16-gabarito-e-solucoes-comentadas">📚 Gabarito e Soluções Comentadas</h2> <details> <summary><b>Gabarito Explicado</b></summary> ### Questão 1: Escolha o tema do seu projeto final. **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Escolha o tema do seu projeto final.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Liste as 5 funcionalidades principais (Features) que seu app terá. **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Liste as 5 funcionalidades principais (Features) que seu app terá.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Desenhe um rascunho (Wireframe) das 3 telas principais **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Desenhe um rascunho (Wireframe) das 3 telas principais) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Desenhe a estrutura do seu estado global. **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Desenhe a estrutura do seu estado global.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Quais dados precisam estar no Redux? Quais podem ficar no useState local? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Quais dados precisam estar no Redux? Quais podem ficar no useState local?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Crie os arquivos iniciais da sua Store. **Resolução e Implementação:** <div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#exercicios-exercicio-16-__codelineno-0-1"></a><span class="c1">// Solução de referência para: Crie os arquivos iniciais da sua Store.</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#exercicios-exercicio-16-__codelineno-0-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">solucaoExercicio</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#exercicios-exercicio-16-__codelineno-0-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Executando validação de: Projeto Final: Dashboard Completo"</span><span class="p">);</span> </span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#exercicios-exercicio-16-__codelineno-0-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span> </span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#exercicios-exercicio-16-__codelineno-0-5"></a><span class="p">}</span> </span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#exercicios-exercicio-16-__codelineno-0-6"></a> </span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#exercicios-exercicio-16-__codelineno-0-7"></a><span class="nx">solucaoExercicio</span><span class="p">();</span> </span></code></pre></div> - **Explicação:** A solução atende diretamente aos requisitos de **Projeto Final: Dashboard Completo**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 1: Todas as imagens possuem `loading="lazy"`? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Todas as imagens possuem `loading="lazy"`?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Existem componentes pesados que poderiam usar `React.memo`? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Existem componentes pesados que poderiam usar `React.memo`?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: As rotas estão usando `lazy` e `Suspense`? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (As rotas estão usando `lazy` e `Suspense`?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Qual foi o maior "bug" que você resolveu durante o curso? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Qual foi o maior "bug" que você resolveu durante o curso?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Como você organizou as pastas do seu projeto final? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Como você organizou as pastas do seu projeto final?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Se tivesse mais uma semana, o que você adicionaria de novo? **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Completo**, o conceito abordado (Se tivesse mais uma semana, o que você adicionaria de novo?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. </details></section></section> <section class='print-page md-section' id='section-6' heading-number='6'> <h1>Projetos<a class='headerlink' href='#section-6' title='Permanent link'></a> </h1> <section class="print-page" id="projetos" heading-number="6.1"><h1 id="projetos-projetos-do-curso">🚀 Projetos do Curso</h1> <p>Lista completa das 20 unidades de projetos organizadas em 5 módulos didáticos.</p> <div class="grid cards"> <ul> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h-2V9h-2V7h4m5-4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 1: Fundamentos (01 a 04)</strong> ---</p> <ul> <li><a href="#projetos-projeto-01">Projeto 01 – Meu Primeiro Universo React 🚀</a></li> <li><a href="#projetos-projeto-02">Projeto 02 – Galeria de Componentes Dinâmicos 🎨</a></li> <li><a href="#projetos-projeto-03">Projeto 03 – O Gestor de Finanças Pessoal 💰</a></li> <li><a href="#projetos-projeto-04">Projeto 04 – Explorador de Repositórios do GitHub 🐙</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 11a2 2 0 0 1-2 2h-2v2h4v2H9v-4a2 2 0 0 1 2-2h2V9H9V7h4a2 2 0 0 1 2 2m4-6H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 2: Conceitos Essenciais (05 a 08)</strong> ---</p> <ul> <li><a href="#projetos-projeto-05">Projeto 05 – Landing Page Tematizável 🌈</a></li> <li><a href="#projetos-projeto-06">Projeto 06 – Central de Atendimento ao Cliente 🎧</a></li> <li><a href="#projetos-projeto-07">Projeto 07 – Minha Primeira Rede Social (Navegação) 📱</a></li> <li><a href="#projetos-projeto-08">Projeto 08 – Dashboard de Criptomoedas 📉</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 10.5a1.5 1.5 0 0 1-1.5 1.5c.84 0 1.5.67 1.5 1.5V15c0 1.11-.89 2-2 2H9v-2h4v-2h-2v-2h2V9H9V7h4c1.11 0 2 .89 2 2m4-6H5c-1.09 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 3: Aplicação Prática (09 a 12)</strong> ---</p> <ul> <li><a href="#projetos-projeto-09">Projeto 09 – Sistema de Preferências do Usuário (Multilíngue) 🌍</a></li> <li><a href="#projetos-projeto-10">Projeto 10 – Analytics Dashboard Otimizado 📊</a></li> <li><a href="#projetos-projeto-11">Projeto 11 – Galeria de Mídia de Próxima Geração ⚡</a></li> <li><a href="#projetos-projeto-12">Projeto 12 – E-commerce Pro com Redux Toolkit 🛒</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 17h-2v-4H9V7h2v4h2V7h2m4-4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 4: Padrões e Ferramentas (13 a 16)</strong> ---</p> <ul> <li><a href="#projetos-projeto-13">Projeto 13 – Biblioteca de Componentes Testada 🧪</a></li> <li><a href="#projetos-projeto-14">Projeto 14 – Meu Diário na Nuvem ✍️☁️</a></li> <li><a href="#projetos-projeto-15">Projeto 15 – Portfolio Profissional no Ar 🚀🌐</a></li> <li><a href="#projetos-projeto-16">Projeto 16 – O Grande Dashboard 🏆⚛️</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z"/></svg></span> <strong>Módulo 5: Avançado e Capstone (17 a 20)</strong> ---</p> <ul> <li><a href="#projetos-projeto-17">🚀 Projeto 17 – Hooks Customizados Avançados e Contexto Isolado 🚀</a></li> <li><a href="#projetos-projeto-18">🚀 Projeto 18 – Otimização de Renderização com Memoização e Suspense 🚀</a></li> <li><a href="#projetos-projeto-19">🚀 Projeto 19 – Gerenciamento de Estado Global Desacoplado 🚀</a></li> <li><a href="#projetos-projeto-20">🚀 Projeto 20 – Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀</a></li> </ul> </li> </ul> </div></section><section class="print-page" id="projetos-projeto-01" heading-number="6.2"><h1 id="projetos-projeto-01-projeto-01-meu-primeiro-universo-react">Projeto 01 – Meu Primeiro Universo React 🚀</h1> <p>Neste projeto inicial, você vai configurar seu ambiente de desenvolvimento profissional e criar sua primeira aplicação React personalizada.</p> <hr /> <h2 id="projetos-projeto-01-objetivo">🎯 Objetivo</h2> <p>Configurar o ambiente (Node, VS Code, Vite), rodar a aplicação e realizar as primeiras modificações estruturais no código.</p> <hr /> <h2 id="projetos-projeto-01-requisitos">🛠️ Requisitos</h2> <ol> <li><strong>Node.js LTS</strong> instalado.</li> <li><strong>VS Code</strong> com as extensões:<ul> <li>ES7+ React/Redux/React-Native snippets.</li> <li>Prettier - Code formatter.</li> </ul> </li> </ol> <hr /> <h2 id="projetos-projeto-01-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-01-1-criacao-do-boilerplate">1. Criação do Boilerplate</h3> <p>No seu terminal, navegue até a pasta onde guarda seus cursos e execute:</p> <div class="termy"> <div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#projetos-projeto-01-__codelineno-0-1"></a>$<span class="w"> </span>npm<span class="w"> </span>create<span class="w"> </span>vite@latest<span class="w"> </span>primeiro-app-react<span class="w"> </span>--<span class="w"> </span>--template<span class="w"> </span>react </span></code></pre></div> </div> <h3 id="projetos-projeto-01-2-instalacao-e-execucao">2. Instalação e Execução</h3> <p>Entre na pasta e instale os pacotes:</p> <div class="termy"> <div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#projetos-projeto-01-__codelineno-1-1"></a>$<span class="w"> </span><span class="nb">cd</span><span class="w"> </span>primeiro-app-react </span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#projetos-projeto-01-__codelineno-1-2"></a>$<span class="w"> </span>npm<span class="w"> </span>install </span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#projetos-projeto-01-__codelineno-1-3"></a>$<span class="w"> </span>npm<span class="w"> </span>run<span class="w"> </span>dev </span></code></pre></div> </div> <p>Acesse o link gerado (geralmente <code>http://localhost:5173</code>).</p> <h3 id="projetos-projeto-01-3-personalizacao">3. Personalização</h3> <p>Abra o projeto no VS Code e faça as seguintes alterações: - No arquivo <code>App.jsx</code>, remova todo o conteúdo dentro da <code>return ( ... )</code> do componente <code>App</code>. - Crie uma estrutura simples com um <code><h1></code> (Seu Nome), um <code><h2></code> (Sua Profissão/Objetivo) e uma lista <code><ul></code> com 3 tecnologias que você deseja aprender neste curso.</p> <hr /> <h2 id="projetos-projeto-01-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O projeto deve estar rodando sem erros no console.</li> <li>A interface deve exibir as informações personalizadas solicitadas no passo 3.</li> <li>O aluno deve ser capaz de explicar o que o comando <code>npm run dev</code> faz.</li> </ul> <div class="admonition success"> <p class="admonition-title">Projeto Concluído</p> <p>Parabéns! Você acaba de quebrar a barreira inicial e já tem um ambiente React funcional e pronto para as próximas aulas.</p> </div></section><section class="print-page" id="projetos-projeto-02" heading-number="6.3"><h1 id="projetos-projeto-02-projeto-02-galeria-de-componentes-dinamicos">Projeto 02 – Galeria de Componentes Dinâmicos 🎨</h1> <p>Neste projeto, você vai aplicar a componentização para criar uma galeria de produtos (como um e-commerce simplificado).</p> <hr /> <h2 id="projetos-projeto-02-objetivo">🎯 Objetivo</h2> <p>Desenvolver componentes reutilizáveis, organizar o projeto em pastas e utilizar props para exibir diferentes conteúdos na mesma estrutura visual.</p> <hr /> <h2 id="projetos-projeto-02-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Props</strong> para passar dados.</li> <li>Organização de componentes em uma pasta própria (<code>src/components</code>).</li> <li>Uso de <strong>CSS</strong> para estilização básica.</li> </ul> <hr /> <h2 id="projetos-projeto-02-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-02-1-preparacao">1. Preparação</h3> <p>No seu projeto criado na Aula 01, crie uma pasta chamada <code>components</code> dentro da <code>src</code>.</p> <h3 id="projetos-projeto-02-2-criacao-do-componente-item">2. Criação do Componente Item</h3> <p>Crie o arquivo <code>src/components/CardProduto.jsx</code>. Ele deve exibir: - Uma imagem (pode usar <code>https://via.placeholder.com/150</code>). - Nome do produto. - Preço. - Um botão "Comprar".</p> <h3 id="projetos-projeto-02-3-implementacao">3. Implementação</h3> <p>No arquivo <code>App.jsx</code>, importe o <code>CardProduto</code> e chame-o pelo menos 4 vezes, simulando produtos diferentes (ex: Teclado, Mouse, Monitor, Headset).</p> <h3 id="projetos-projeto-02-4-estilizacao">4. Estilização</h3> <p>Crie um arquivo <code>Card.css</code> (ou use o <code>App.css</code>) para garantir que os cards fiquem um ao lado do outro e tenham uma borda ou sombra elegante.</p> <hr /> <h2 id="projetos-projeto-02-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O código deve estar limpo e sem avisos no terminal.</li> <li>A interface deve mostrar os 4 produtos diferentes de forma organizada.</li> <li>O aluno deve demonstrar que as informações mudam através das <strong>props</strong>, sem duplicar o código HTML inteiro do card.</li> </ul> <div class="admonition tip"> <p class="admonition-title">Dica: Imagens Reais</p> <p>Você pode usar o site <a href="https://source.unsplash.com/random/200x200?tech">Unsplash Source</a> para carregar imagens reais de tecnologia nos seus cards!</p> </div></section><section class="print-page" id="projetos-projeto-03" heading-number="6.4"><h1 id="projetos-projeto-03-projeto-03-o-gestor-de-financas-pessoal">Projeto 03 – O Gestor de Finanças Pessoal 💰</h1> <p>Neste projeto, você vai aplicar o <code>useState</code> para criar um mini sistema de controle financeiro que permite adicionar ganhos e gastos.</p> <hr /> <h2 id="projetos-projeto-03-objetivo">🎯 Objetivo</h2> <p>Gerenciar múltiplos estados, lidar com arrays no React e criar uma interface reativa que responde a inputs do usuário.</p> <hr /> <h2 id="projetos-projeto-03-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>useState</strong> para o saldo total.</li> <li>Uso de <strong>useState</strong> para a lista de transações (array).</li> <li>Renderização de listas com <code>.map()</code>.</li> <li>Estilização condicional (ex: valores negativos em vermelho).</li> </ul> <hr /> <h2 id="projetos-projeto-03-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-03-1-estrutura-do-estado">1. Estrutura do Estado</h3> <p>No seu <code>App.jsx</code>, crie dois estados principais: - <code>transacoes</code>: Um array de objetos <code>{ id, texto, valor }</code>. - <code>inputTexto</code> e <code>inputValor</code>: Para capturar os dados do formulário.</p> <h3 id="projetos-projeto-03-2-formulario-de-entrada">2. Formulário de Entrada</h3> <p>Crie um formulário com dois campos e um botão "Adicionar Transação". - Dica: Use o evento <code>onChange</code> para atualizar os estados dos inputs.</p> <h3 id="projetos-projeto-03-3-logica-de-adicao">3. Lógica de Adição</h3> <p>Crie uma função <code>adicionarTransacao</code> que: - Evita o comportamento padrão do form (<code>e.preventDefault()</code>). - Cria um novo objeto de transação. - Usa o spread operator para adicionar ao array: <code>setTransacoes([...transacoes, novaTransacao])</code>.</p> <h3 id="projetos-projeto-03-4-exibicao-e-saldo">4. Exibição e Saldo</h3> <ul> <li>Crie um componente <code>Resumo</code> que calcula a soma de todas as transações e exibe o saldo atual.</li> <li>Liste as transações abaixo do formulário.</li> </ul> <hr /> <h2 id="projetos-projeto-03-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O saldo total deve atualizar automaticamente ao adicionar uma nova transação.</li> <li>A lista deve exibir o nome e o valor de cada item.</li> <li>O código não deve realizar mutações diretas no array (usar funções que retornam novos arrays).</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus</p> <p>Adicione um botão "Remover" em cada transação que filtre o array para deletar o item selecionado!</p> </div></section><section class="print-page" id="projetos-projeto-04" heading-number="6.5"><h1 id="projetos-projeto-04-projeto-04-explorador-de-repositorios-do-github">Projeto 04 – Explorador de Repositórios do GitHub 🐙</h1> <p>Neste projeto, você vai construir uma aplicação real que consome a API oficial do GitHub para listar os projetos de qualquer usuário.</p> <hr /> <h2 id="projetos-projeto-04-objetivo">🎯 Objetivo</h2> <p>Dominar o consumo de APIs (Fetch), manipular estados assíncronos e utilizar o <code>useEffect</code> para sincronização de dados.</p> <hr /> <h2 id="projetos-projeto-04-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>useEffect</strong> para busca inicial.</li> <li>Uso de <strong>fetch</strong> para chamada de API.</li> <li>Gerenciamento de estados de: <code>loading</code>, <code>error</code> e <code>data</code>.</li> <li>Interface organizada para exibir os repositórios.</li> </ul> <hr /> <h2 id="projetos-projeto-04-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-04-1-preparacao-da-api">1. Preparação da API</h3> <p>A URL base será: <code>https://api.github.com/users/[NOME_USUARIO]/repos</code>.</p> <h3 id="projetos-projeto-04-2-estados-iniciais">2. Estados Iniciais</h3> <p>No seu componente principal, crie: <div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#projetos-projeto-04-__codelineno-0-1"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">repos</span><span class="p">,</span><span class="w"> </span><span class="nx">setRepos</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">([]);</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#projetos-projeto-04-__codelineno-0-2"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">loading</span><span class="p">,</span><span class="w"> </span><span class="nx">setLoading</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> </span></code></pre></div></p> <h3 id="projetos-projeto-04-3-chamada-assincrona">3. Chamada Assíncrona</h3> <p>Crie uma função <code>carregarRepositorios</code> dentro do <code>useEffect</code>. - Use <code>try/catch</code> para capturar erros de rede. - Converta a resposta para JSON. - Salve no estado <code>repos</code> e mude <code>loading</code> para false.</p> <h3 id="projetos-projeto-04-4-interface-reativa">4. Interface Reativa</h3> <ul> <li>Exiba um spinner ou texto "Carregando..." enquanto o estado for true.</li> <li>Use o <code>.map</code> para listar <code>repo.name</code> e <code>repo.html_url</code>.</li> <li>Estilize a lista usando CSS Grid ou Flexbox.</li> </ul> <hr /> <h2 id="projetos-projeto-04-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>A página deve carregar repositórios reais do seu próprio GitHub ao abrir.</li> <li>Deve haver um tratamento básico de erro (ex: Usuário não encontrado).</li> <li>A lista deve ser clicável e levar para o repositório original.</li> </ul> <div class="admonition warning"> <p class="admonition-title">Limite de Taxa</p> <p>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!</p> </div></section><section class="print-page" id="projetos-projeto-05" heading-number="6.6"><h1 id="projetos-projeto-05-projeto-05-landing-page-tematizavel">Projeto 05 – Landing Page Tematizável 🌈</h1> <p>Nesta aula, você vai construir uma página que demonstra o poder da estilização dinâmica com Styled Components.</p> <hr /> <h2 id="projetos-projeto-05-objetivo">🎯 Objetivo</h2> <p>Implementar um sistema de "Troca de Temas" (Theming) básico e utilizar componentes estilizados que reagem a props.</p> <hr /> <h2 id="projetos-projeto-05-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Styled Components</strong>.</li> <li>Implementação de um botão que alterna entre tema "Claro" e "Escuro" (ou outros temas criativos).</li> <li>Nenhum arquivo <code>.css</code> externo deve ser usado, apenas CSS-in-JS.</li> </ul> <hr /> <h2 id="projetos-projeto-05-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-05-1-instalacao">1. Instalação</h3> <p>No terminal:</p> <div class="termy"> <div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#projetos-projeto-05-__codelineno-0-1"></a>$<span class="w"> </span>npm<span class="w"> </span>install<span class="w"> </span>styled-components </span></code></pre></div> </div> <h3 id="projetos-projeto-05-2-criacao-dos-componentes-estilizados">2. Criação dos Componentes Estilizados</h3> <p>Crie um arquivo <code>src/styles.js</code> e defina: - <code>Container</code>: Uma div que ocupa a tela toda com transição suave de cor. - <code>BotaoTema</code>: Um botão que muda de estilo visual dependendo do tema. - <code>Texto</code>: Um parágrafo estilizado.</p> <h3 id="projetos-projeto-05-3-logica-de-alternancia">3. Lógica de Alternância</h3> <p>No <code>App.jsx</code>, use um <code>useState</code> para controlar qual tema está ativo. Passe essa informação via props para seus componentes estilizados.</p> <h3 id="projetos-projeto-05-4-conteudo-da-pagina">4. Conteúdo da Página</h3> <p>Adicione uma seção de Hero (título grande), uma breve descrição e o botão de toggle centralizado.</p> <hr /> <h2 id="projetos-projeto-05-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>A troca de tema deve ser instantânea e sem recarregamento da página.</li> <li>As cores devem ser harmoniosas em ambos os temas.</li> <li>O código deve demonstrar o uso de <code>props</code> dentro dos <em>template literals</em> do Styled Components.</li> </ul> <div class="admonition tip"> <p class="admonition-title">Desafio Extra</p> <p>Tente usar o <code>ThemeProvider</code> do próprio Styled Components para gerenciar as cores de forma global!</p> </div></section><section class="print-page" id="projetos-projeto-06" heading-number="6.7"><h1 id="projetos-projeto-06-projeto-06-central-de-atendimento-ao-cliente">Projeto 06 – Central de Atendimento ao Cliente 🎧</h1> <p>Neste projeto, você vai aplicar o <code>react-hook-form</code> para criar um sistema de tickets de suporte profissional e validado.</p> <hr /> <h2 id="projetos-projeto-06-objetivo">🎯 Objetivo</h2> <p>Gerenciar formulários complexos, tratar erros de validação em tempo real e garantir que apenas dados válidos sejam enviados para o "servidor".</p> <hr /> <h2 id="projetos-projeto-06-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>react-hook-form</strong>.</li> <li>Validação de formato de e-mail (Regex).</li> <li>Mensagens de erro personalizadas e visuais (estilizadas em vermelho).</li> <li>Estado de "Enviando..." após o clique no botão.</li> </ul> <hr /> <h2 id="projetos-projeto-06-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-06-1-instalacao">1. Instalação</h3> <p>No terminal:</p> <div class="termy"> <div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#projetos-projeto-06-__codelineno-0-1"></a>$<span class="w"> </span>npm<span class="w"> </span>install<span class="w"> </span>react-hook-form </span></code></pre></div> </div> <h3 id="projetos-projeto-06-2-estrutura-do-formulario">2. Estrutura do Formulário</h3> <p>Crie um componente <code>FormSuporte</code> com os campos: - <strong>Nome Completo</strong> (Obrigatório, min 3 letras). - <strong>E-mail de Contato</strong> (Obrigatório, formato válido). - <strong>Assunto</strong> (Select: Técnico, Financeiro, Outros). - <strong>Mensagem</strong> (Textarea, obrigatório, min 20 caracteres).</p> <h3 id="projetos-projeto-06-3-tratamento-de-erros">3. Tratamento de Erros</h3> <p>Mostre as mensagens de erro logo abaixo de cada campo assim que o foco sair dele ou ao clicar em enviar. </p> <h3 id="projetos-projeto-06-4-simulacao-de-envio">4. Simulação de Envio</h3> <p>Na função <code>onSubmit</code>, use um <code>setTimeout</code> de 2 segundos para simular uma resposta de rede antes de exibir a mensagem final de "Ticket aberto com sucesso!".</p> <hr /> <h2 id="projetos-projeto-06-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O botão de enviar deve estar desabilitado ou dar feedback visual se houver erros.</li> <li>O objeto de dados final deve ser exibido no console no formato JSON correto.</li> <li>O código deve utilizar o spread operator <code>{...register("campo")}</code> corretamente.</li> </ul> <div class="admonition tip"> <p class="admonition-title">Dica Pro</p> <p>Use a biblioteca <code>react-toastify</code> para mostrar as mensagens de sucesso de forma elegante no canto da tela!</p> </div></section><section class="print-page" id="projetos-projeto-07" heading-number="6.8"><h1 id="projetos-projeto-07-projeto-07-minha-primeira-rede-social-navegacao">Projeto 07 – Minha Primeira Rede Social (Navegação) 📱</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-07-objetivo">🎯 Objetivo</h2> <p>Dominar a estruturação de rotas complexas, parâmetros de URL e navegação programática.</p> <hr /> <h2 id="projetos-projeto-07-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>BrowserRouter</strong>, <strong>Routes</strong> e <strong>Route</strong>.</li> <li>Criação de uma rota dinâmica para o perfil do usuário (<code>/perfil/:username</code>).</li> <li>Uso de <strong>Link</strong> e <strong>useNavigate</strong>.</li> </ul> <hr /> <h2 id="projetos-projeto-07-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-07-1-estrutura-de-paginas">1. Estrutura de Páginas</h3> <p>Crie os componentes/páginas: - <code>Feed</code>: Onde aparecem as postagens (Home). - <code>Explorar</code>: Uma lista de usuários sugeridos. - <code>Perfil</code>: Mostra o nome do usuário vindo da URL.</p> <h3 id="projetos-projeto-07-2-menu-de-navegacao">2. Menu de Navegação</h3> <p>Crie um componente <code>SideBar</code> que fique visível em todas as rotas e contenha links para Feed e Explorar.</p> <h3 id="projetos-projeto-07-3-rota-dinamica">3. Rota Dinâmica</h3> <p>Configure a rota do Perfil. Dentro do componente <code>Perfil</code>, use o <code>useParams</code> para mostrar na tela: "Você está visualizando o perfil de: <strong>[username]</strong>".</p> <h3 id="projetos-projeto-07-4-navegacao-programatica">4. Navegação Programática</h3> <p>Na página de Explorar, adicione um botão "Logoff". Ao clicar, o sistema deve usar o <code>useNavigate</code> para mandar o usuário para uma página de <code>Login</code> (que você também deve criar).</p> <hr /> <h2 id="projetos-projeto-07-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>Ao navegar entre Feed e Explorar, o componente Sidebar não deve sumir da tela.</li> <li>Ao acessar <code>/perfil/ricardo</code>, a tela deve mostrar "ricardo".</li> <li>Ao acessar uma URL inexistente, a página de erro 404 deve ser exibida.</li> </ul> <div class="admonition tip"> <p class="admonition-title">Dica de UI</p> <p>Use o <code>NavLink</code> para que o ícone ou texto do menu mude de cor quando o usuário estiver naquela aba específica!</p> </div></section><section class="print-page" id="projetos-projeto-08" heading-number="6.9"><h1 id="projetos-projeto-08-projeto-08-dashboard-de-criptomoedas">Projeto 08 – Dashboard de Criptomoedas 📉</h1> <p>Neste projeto, você vai construir um painel financeiro que consome dados reais do mercado de moedas digitais.</p> <hr /> <h2 id="projetos-projeto-08-objetivo">🎯 Objetivo</h2> <p>Dominar o Axios, instâncias de API, tratamento de erros e renderização condicional de dados externos.</p> <hr /> <h2 id="projetos-projeto-08-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Axios</strong> para as requisições.</li> <li>Criação de uma instância centralizada de API (<code>api.js</code>).</li> <li>Uso de <strong>Async/Await</strong>.</li> <li>Tratamento de estados de Erro e Loading.</li> </ul> <hr /> <h2 id="projetos-projeto-08-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-08-1-escolha-da-api">1. Escolha da API</h3> <p>Utilize a API pública da <strong>CoinGecko</strong>: <code>https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1</code></p> <h3 id="projetos-projeto-08-2-service-api">2. Service API</h3> <p>Crie a pasta <code>src/services</code> e o arquivo <code>api.js</code> configurando a URL base da CoinGecko.</p> <h3 id="projetos-projeto-08-3-componente-lista">3. Componente Lista</h3> <p>No componente principal: - Dispare a busca no <code>useEffect</code>. - Mapeie o array de moedas para exibir: Nome, Logotipo, Preço Atual e Variação nas últimas 24h.</p> <h3 id="projetos-projeto-08-4-refinamento-de-ux">4. Refinamento de UX</h3> <ul> <li>Crie um botão "Atualizar Dados" que chama a função de busca novamente.</li> <li>Estilize a tabela ou os cards para que fiquem com aspecto profissional (use Tailwind ou Styled Components).</li> </ul> <hr /> <h2 id="projetos-projeto-08-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>A aplicação deve mostrar dados reais de pelo menos 10 criptomoedas.</li> <li>Se o usuário estiver sem internet, uma mensagem clara de erro capturada pelo <code>catch</code> deve aparecer.</li> <li>O código deve estar organizado seguindo o padrão de Services.</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus</p> <p>Adicione um input de busca para filtrar a lista localmente por nome da moeda!</p> </div></section><section class="print-page" id="projetos-projeto-09" heading-number="6.10"><h1 id="projetos-projeto-09-projeto-09-sistema-de-preferencias-do-usuario-multilingue">Projeto 09 – Sistema de Preferências do Usuário (Multilíngue) 🌍</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-09-objetivo">🎯 Objetivo</h2> <p>Implementar a Context API para gerenciar configurações globais, entender o papel do <code>Provider</code> e criar uma aplicação multi-componente sincronizada.</p> <hr /> <h2 id="projetos-projeto-09-requisitos">🛠️ Requisitos</h2> <ul> <li>Criação de um <code>SettingsContext</code>.</li> <li>Gerenciamento global de <strong>Idioma</strong> (PT/EN) e <strong>Tema</strong> (Light/Dark).</li> <li>Uso de pelo menos 3 componentes consumidores em níveis diferentes de hierarquia.</li> </ul> <hr /> <h2 id="projetos-projeto-09-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-09-1-criando-o-contexto">1. Criando o Contexto</h3> <p>Crie o arquivo <code>src/contexts/SettingsContext.jsx</code>. O estado inicial deve ter: - <code>linguagem</code>: 'pt' - <code>tema</code>: 'light'</p> <h3 id="projetos-projeto-09-2-o-power-provider">2. O Power Provider</h3> <p>Envolva sua aplicação no <code>App.jsx</code> com o <code>SettingsProvider</code>. Certifique-se de passar tanto os valores quanto as funções de alteração (ex: <code>setLinguagem</code>).</p> <h3 id="projetos-projeto-09-3-componentes-consumidores">3. Componentes Consumidores</h3> <ul> <li><strong>Header</strong>: Mostra o título no idioma selecionado.</li> <li><strong>Conteúdo</strong>: Um texto longo que também traduz entre PT e EN.</li> <li><strong>Footer</strong>: Contém os botões (Selects ou Toggles) para mudar as configurações globais.</li> </ul> <h3 id="projetos-projeto-09-4-dicionario-de-traducao">4. Dicionário de Tradução</h3> <p>Crie um objeto simples para as traduções: <div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#projetos-projeto-09-__codelineno-0-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">frases</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#projetos-projeto-09-__codelineno-0-2"></a><span class="w"> </span><span class="nx">pt</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">saudacao</span><span class="o">:</span><span class="w"> </span><span class="s1">'Olá'</span><span class="p">,</span><span class="w"> </span><span class="nx">subtitulo</span><span class="o">:</span><span class="w"> </span><span class="s1">'Bem-vindo ao sistema'</span><span class="w"> </span><span class="p">},</span> </span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#projetos-projeto-09-__codelineno-0-3"></a><span class="w"> </span><span class="nx">en</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">saudacao</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello'</span><span class="p">,</span><span class="w"> </span><span class="nx">subtitulo</span><span class="o">:</span><span class="w"> </span><span class="s1">'Welcome to the system'</span><span class="w"> </span><span class="p">}</span> </span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#projetos-projeto-09-__codelineno-0-4"></a><span class="p">}</span> </span></code></pre></div></p> <hr /> <h2 id="projetos-projeto-09-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>Ao mudar o idioma no Footer, o texto do Header deve mudar instantaneamente.</li> <li>A escolha do tema deve afetar as cores de fundo de toda a página.</li> <li>Não deve haver "Prop Drilling" (passagem manual de props entre os componentes intermediários).</li> </ul> <div class="admonition tip"> <p class="admonition-title">Dica: localStorage</p> <p>Como desafio extra, tente salvar a escolha do usuário no <code>localStorage</code> do navegador para que, ao recarregar a página, as preferências sejam mantidas!</p> </div></section><section class="print-page" id="projetos-projeto-10" heading-number="6.11"><h1 id="projetos-projeto-10-projeto-10-analytics-dashboard-otimizado">Projeto 10 – Analytics Dashboard Otimizado 📊</h1> <p>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).</p> <hr /> <h2 id="projetos-projeto-10-objetivo">🎯 Objetivo</h2> <p>Identificar gargalos de performance, aplicar <code>useMemo</code> e <code>useCallback</code> corretamente e gerenciar o DOM de forma imperativa com <code>useRef</code>.</p> <hr /> <h2 id="projetos-projeto-10-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>useMemo</strong> para processamento de dados.</li> <li>Uso de <strong>useRef</strong> para focar elementos ou controlar bibliotecas externas (ex: Charts).</li> <li>Implementação de uma lista filtrável com mais de 100 itens.</li> </ul> <hr /> <h2 id="projetos-projeto-10-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-10-1-mock-de-dados">1. Mock de Dados</h3> <p>Crie uma função que gera 500 objetos de "Vendas" com: <code>id</code>, <code>vendedor</code>, <code>valor</code> e <code>data</code>.</p> <h3 id="projetos-projeto-10-2-painel-de-estatisticas">2. Painel de Estatísticas</h3> <p>Crie 3 cards que mostram: Total de Vendas, Média de Valor e Maior Venda. - <strong>Regra</strong>: Esses cálculos devem estar dentro de um <code>useMemo</code> que depende apenas da lista de vendas.</p> <h3 id="projetos-projeto-10-3-filtro-de-vendedores">3. Filtro de Vendedores</h3> <p>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.</p> <h3 id="projetos-projeto-10-4-foco-instantaneo">4. Foco Instantâneo</h3> <p>Ao clicar em um botão "Novo Filtro", o input de busca deve ser limpo e focado automaticamente através de uma <code>ref</code>.</p> <hr /> <h2 id="projetos-projeto-10-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O componente não deve "travar" ao digitar no campo de busca.</li> <li>Deve ser possível provar que as funções de cálculo não rodam fora de hora (via console.logs).</li> <li>O código deve estar limpo e bem documentado sobre o porquê de cada otimização.</li> </ul> <div class="admonition tip"> <p class="admonition-title">Dica de Mestre</p> <p>Use o Profiler do React DevTools para gravar uma interação e comprove que os componentes memorizados não estão renderizando sem necessidade!</p> </div></section><section class="print-page" id="projetos-projeto-11" heading-number="6.12"><h1 id="projetos-projeto-11-projeto-11-galeria-de-midia-de-proxima-geracao">Projeto 11 – Galeria de Mídia de Próxima Geração ⚡</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-11-objetivo">🎯 Objetivo</h2> <p>Reduzir o "Tamanho do Bundle", evitar re-renderizações desnecessárias e otimizar o carregamento de recursos externos.</p> <hr /> <h2 id="projetos-projeto-11-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>React.lazy</strong> e <strong>Suspense</strong> para rotas.</li> <li>Uso de <strong>React.memo</strong> em componentes de card.</li> <li>Otimização de carregamento de imagens (Lazy Load nativo).</li> <li>Divisão de componentes em "pedaços" (Splitting).</li> </ul> <hr /> <h2 id="projetos-projeto-11-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-11-1-roteamento-inteligente">1. Roteamento Inteligente</h3> <p>Configure pelo menos 3 rotas (<code>Home</code>, <code>Galeria</code>, <code>Sobre</code>). As rotas <code>Galeria</code> e <code>Sobre</code> devem ser carregadas via <code>lazy</code>.</p> <h3 id="projetos-projeto-11-2-cards-memorizados">2. Cards Memorizados</h3> <p>Crie um componente <code>FotoCard</code>. Ele deve ser envolvido em <code>memo</code>. 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.</p> <h3 id="projetos-projeto-11-3-esqueleto-de-carregamento-skeleton">3. Esqueleto de Carregamento (Skeleton)</h3> <p>Em vez de um texto "Carregando...", crie um componente de <code>Skeleton</code> (uma div cinza animada) para mostrar enquanto as fotos ou as páginas não carregam.</p> <h3 id="projetos-projeto-11-4-analise-de-build">4. Análise de Build</h3> <p>Rode o comando <code>npm run build</code> e observe o terminal para ver o tamanho dos arquivos gerados antes e depois do <code>lazy loading</code>.</p> <hr /> <h2 id="projetos-projeto-11-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>A aplicação deve pontuar alto no Lighthouse (aba Performance).</li> <li>Não deve haver "piscadas" bruscas de conteúdo ao trocar de página.</li> <li>O uso de memo e lazy deve ser justificado no código através de comentários.</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus</p> <p>Use a biblioteca <code>react-intersection-observer</code> para criar uma animação de "surgimento" das imagens conforme entram na tela!</p> </div></section><section class="print-page" id="projetos-projeto-12" heading-number="6.13"><h1 id="projetos-projeto-12-projeto-12-e-commerce-pro-com-redux-toolkit">Projeto 12 – E-commerce Pro com Redux Toolkit 🛒</h1> <p>Neste projeto de nível profissional, você vai gerenciar todo o estado de um e-commerce (Carrinho, Autenticação e Favoritos) usando Redux.</p> <hr /> <h2 id="projetos-projeto-12-objetivo">🎯 Objetivo</h2> <p>Arquitetar uma store global escalável, lidar com múltiplas fatias de estado (slices) e garantir a sincronia entre diferentes partes da aplicação.</p> <hr /> <h2 id="projetos-projeto-12-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Redux Toolkit (@reduxjs/toolkit)</strong>.</li> <li>Pelo menos 3 Slices: <code>cart</code>, <code>auth</code> e <code>products</code>.</li> <li>Persistência básica ou feedback visual de mudanças globais.</li> </ul> <hr /> <h2 id="projetos-projeto-12-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-12-1-configuracao-da-store">1. Configuração da Store</h3> <p>Crie o arquivo <code>src/store/index.js</code> e combine pelo menos os reducers de <code>cart</code> e <code>auth</code>.</p> <h3 id="projetos-projeto-12-2-o-carrinho-de-compras">2. O Carrinho de Compras</h3> <p>No <code>cartSlice</code>, crie as lógicas de: - <code>addItem</code>: Adiciona item (se já houver, aumenta a quantidade). - <code>removeItem</code>: Remove item completamente. - <code>clearCart</code>: Limpa tudo.</p> <h3 id="projetos-projeto-12-3-sistema-de-login">3. Sistema de Login</h3> <p>No <code>authSlice</code>, gerencie se o usuário está logado. - <strong>Regra</strong>: O botão "Adicionar ao Carrinho" na vitrine só deve funcionar se o usuário estiver logado no Redux.</p> <h3 id="projetos-projeto-12-4-integracao-visual">4. Integração Visual</h3> <ul> <li>Navbar: Mostra a quantidade total de itens no carrinho e o nome do usuário.</li> <li>Página de Carrinho: Lista os itens, mostra o valor total e permite alterar quantidades.</li> </ul> <hr /> <h2 id="projetos-projeto-12-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O estado deve ser consistente (ex: ao deletar um item no carrinho, o número na Navbar deve diminuir na mesma hora).</li> <li>Uso correto dos hooks <code>useSelector</code> e <code>useDispatch</code>.</li> <li>A Store deve estar bem organizada na pasta <code>store/</code> do projeto.</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus: Redux Persist</p> <p>Tente integrar a biblioteca <code>redux-persist</code> para que os itens do carrinho não sumam mesmo se o usuário der F5 na página!</p> </div></section><section class="print-page" id="projetos-projeto-13" heading-number="6.14"><h1 id="projetos-projeto-13-projeto-13-biblioteca-de-componentes-testada">Projeto 13 – Biblioteca de Componentes Testada 🧪</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-13-objetivo">🎯 Objetivo</h2> <p>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.</p> <hr /> <h2 id="projetos-projeto-13-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Vitest</strong> e <strong>React Testing Library</strong>.</li> <li>Implementação de testes para: Renderização, Props e Eventos de Clique.</li> <li>Uso de <strong>jest-dom</strong> para asserções amigáveis.</li> </ul> <hr /> <h2 id="projetos-projeto-13-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-13-1-configuracao-do-vitest">1. Configuração do Vitest</h3> <p>Crie o arquivo <code>vitest.config.js</code> e configure o ambiente para <code>jsdom</code>.</p> <h3 id="projetos-projeto-13-2-componente-de-botao">2. Componente de Botão</h3> <p>Crie um componente <code>MeuBotao</code> que aceita as props <code>children</code>, <code>onClick</code> e <code>disabled</code>. - Teste se ele renderiza o texto passado em <code>children</code>. - Teste se a função <code>onClick</code> é disparada ao clicar. - Teste se ele fica desabilitado quando a prop <code>disabled</code> for verdadeira.</p> <h3 id="projetos-projeto-13-3-componente-de-input-de-busca">3. Componente de Input de Busca</h3> <p>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".</p> <h3 id="projetos-projeto-13-4-rodando-os-testes">4. Rodando os Testes</h3> <p>Use o comando <code>npm test</code> para visualizar o relatório de sucesso no terminal.</p> <hr /> <h2 id="projetos-projeto-13-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>Todos os testes devem passar (ficar verdes).</li> <li>Os arquivos de teste devem ter a extensão <code>.test.jsx</code> ou <code>.spec.jsx</code>.</li> <li>O código deve estar livre de "warnings" de act() (comum em testes assíncronos).</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus</p> <p>Tente habilitar a visualização de <strong>Coverage</strong> (Cobertura) para ver quanto por cento do seu código está sendo testado!</p> </div></section><section class="print-page" id="projetos-projeto-14" heading-number="6.15"><h1 id="projetos-projeto-14-projeto-14-meu-diario-na-nuvem">Projeto 14 – Meu Diário na Nuvem ✍️☁️</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-14-objetivo">🎯 Objetivo</h2> <p>Dominar a integração de SDKs externos, gerenciar credenciais de ambiente e lidar com persistência de dados real.</p> <hr /> <h2 id="projetos-projeto-14-requisitos">🛠️ Requisitos</h2> <ul> <li>Integração com <strong>Firebase Firestore</strong> ou <strong>Supabase</strong>.</li> <li>Uso de variáveis de ambiente (<code>.env</code>).</li> <li>Lógica de <strong>CRUD</strong> (Create, Read, Update, Delete).</li> </ul> <hr /> <h2 id="projetos-projeto-14-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-14-1-ambiente-virtual">1. Ambiente Virtual</h3> <p>Crie o arquivo <code>.env</code> na raiz do seu projeto Vite e adicione suas chaves: <code>VITE_FIREBASE_KEY=sua_chave_aqui</code></p> <h3 id="projetos-projeto-14-2-configuracao-do-sdk">2. Configuração do SDK</h3> <p>Crie o arquivo <code>src/services/firebase.js</code> (ou supabase.js) e inicialize o serviço exportando o objeto de conexão com o banco.</p> <h3 id="projetos-projeto-14-3-criando-notas">3. Criando Notas</h3> <p>Crie um formulário com título e conteúdo da nota. Ao clicar em "Salvar", envie para a coleção <code>notas</code> no banco de dados.</p> <h3 id="projetos-projeto-14-4-gestao-de-notas">4. Gestão de Notas</h3> <ul> <li>Liste todas as notas salvas.</li> <li>Adicione um botão de "Lixeira" em cada nota para deletá-la do banco de dados global.</li> </ul> <hr /> <h2 id="projetos-projeto-14-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>As notas devem persistir (ficar salvas) mesmo se você fechar o navegador e abrir de novo.</li> <li>Não deve haver chaves expostas no código principal (usar as variáveis de ambiente).</li> <li>A interface deve mostrar um feedback visual de "Salvando..." durante a operação.</li> </ul> <div class="admonition success"> <p class="admonition-title">Bônus</p> <p>Adicione Autenticação! Permita que o usuário faça login com o Google para ver apenas as notas que ELE criou!</p> </div></section><section class="print-page" id="projetos-projeto-15" heading-number="6.16"><h1 id="projetos-projeto-15-projeto-15-portfolio-profissional-no-ar">Projeto 15 – Portfolio Profissional no Ar 🚀🌐</h1> <p>Neste projeto, você vai consolidar sua identidade como desenvolvedor, criando um portfólio pessoal e fazendo o deploy oficial para o mundo todo ver.</p> <hr /> <h2 id="projetos-projeto-15-objetivo">🎯 Objetivo</h2> <p>Configurar SEO, transformar o site em PWA e dominar o fluxo de Continuous Integration/Continuous Deployment (CI/CD).</p> <hr /> <h2 id="projetos-projeto-15-requisitos">🛠️ Requisitos</h2> <ul> <li>Uso de <strong>Meta Tags</strong> completas.</li> <li>Configuração de <strong>Vite PWA Plugin</strong>.</li> <li>Deploy realizado na <strong>Vercel</strong> ou <strong>Netlify</strong>.</li> </ul> <hr /> <h2 id="projetos-projeto-15-passo-a-passo">📝 Passo a Passo</h2> <h3 id="projetos-projeto-15-1-polimento-de-conteudo">1. Polimento de Conteúdo</h3> <p>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).</p> <h3 id="projetos-projeto-15-2-configuracao-pwa">2. Configuração PWA</h3> <p>Configure o plugin PWA para que seu portfólio possa ser instalado no celular: - Ícone 512x512. - Nome curto e cor de tema.</p> <h3 id="projetos-projeto-15-3-o-grande-deploy">3. O Grande Deploy</h3> <p>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.</p> <h3 id="projetos-projeto-15-4-teste-de-acessibilidade">4. Teste de Acessibilidade</h3> <p>Rode o Lighthouse e garanta que sua nota de SEO e Acessibilidade esteja acima de 90.</p> <hr /> <h2 id="projetos-projeto-15-criterios-de-entrega">✅ Critérios de Entrega</h2> <ul> <li>O site deve estar acessível por uma URL pública (ex: <code>meunome.vercel.app</code>).</li> <li>O compartilhamento do link no WhatsApp deve exibir título e imagem corretos.</li> <li>O site deve permitir ser "Adicionado à tela de início" em dispositivos Android/iOS.</li> </ul> <div class="admonition success"> <p class="admonition-title">Dica Final</p> <p>Coloque o link do seu portfólio no seu perfil do LinkedIn! É o primeiro passo para conseguir sua primeira oportunidade no mundo dev!</p> </div></section><section class="print-page" id="projetos-projeto-16" heading-number="6.17"><h1 id="projetos-projeto-16-projeto-16-o-grande-dashboard">Projeto 16 – O Grande Dashboard 🏆⚛️</h1> <p>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.</p> <hr /> <h2 id="projetos-projeto-16-objetivo">🎯 Objetivo</h2> <p>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.</p> <hr /> <h2 id="projetos-projeto-16-requisitos-obrigatorios">🛠️ Requisitos Obrigatórios</h2> <ol> <li><strong>SPA com React Router</strong>: Pelo menos 4 rotas protegidas.</li> <li><strong>Redux Toolkit</strong>: Gestão centralizada de pelo menos uma fatia de estado (ex: Carrinho ou User).</li> <li><strong>Axios/Fetch</strong>: Consumo de dados externos.</li> <li><strong>React Hook Form</strong>: Formulário de entrada de dados com validações.</li> <li><strong>Design Premium</strong>: Uso de Tailwind ou Styled Components com foco em UX.</li> <li><strong>Deploy</strong>: Site online e funcional.</li> </ol> <hr /> <h2 id="projetos-projeto-16-sugestoes-de-temas">📝 Sugestões de Temas</h2> <ul> <li><strong>Dashboard de Cripto/Ações</strong>: Gráficos, histórico e favoritos.</li> <li><strong>Plataforma de E-learning</strong>: Lista de aulas, progresso e perfil.</li> <li><strong>Sistema de RH</strong>: Cadastro de funcionários, filtros e estatísticas.</li> <li><strong>E-commerce de Eletrônicos</strong>: Filtros, carrinho, checkout e histórico.</li> </ul> <hr /> <h2 id="projetos-projeto-16-passo-a-passo">🚀 Passo a Passo</h2> <h3 id="projetos-projeto-16-1-planejamento">1. Planejamento</h3> <p>Defina seu tema e as rotas. Configure o projeto com o plugin de PWA.</p> <h3 id="projetos-projeto-16-2-infraestrutura">2. Infraestrutura</h3> <p>Configure o Redux e o Axios. Se for usar Firebase, configure a conexão.</p> <h3 id="projetos-projeto-16-3-uiux">3. UI/UX</h3> <p>Construa os componentes reutilizáveis primeiro (Botões, Inputs, Layout). Depois monte as páginas.</p> <h3 id="projetos-projeto-16-4-testes-e-otimizacao">4. Testes e Otimização</h3> <p>Escreva 3 testes críticos. Rode o Lighthouse e otimize as imagens e o bundle (Lazy load).</p> <hr /> <h2 id="projetos-projeto-16-criterios-de-avaliacao">✅ Critérios de Avaliação</h2> <ul> <li><strong>Funcionalidade</strong>: O app faz o que se propõe sem erros no console?</li> <li><strong>Código</strong>: Está limpo, modular e bem organizado?</li> <li><strong>Performance</strong>: A navegação é fluida e o site carrega rápido?</li> <li><strong>Apresentação</strong>: Você consegue explicar as decisões técnicas que tomou?</li> </ul> <div class="admonition success"> <p class="admonition-title">Gran Finale</p> <p>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!</p> </div></section></section> <section class='print-page md-section' id='section-7' heading-number='7'> <h1>Quizzes<a class='headerlink' href='#section-7' title='Permanent link'></a> </h1> <section class="print-page" id="quizzes" heading-number="7.1"><h1 id="quizzes-quizzes-de-fixacao">🧠 Quizzes de Fixação</h1> <p>Lista completa das 20 unidades de quizzes organizadas em 5 módulos didáticos.</p> <div class="grid cards"> <ul> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h-2V9h-2V7h4m5-4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 1: Fundamentos (01 a 04)</strong> ---</p> <ul> <li><a href="#quizzes-quiz-01">Quiz – Aula 01: Introdução ao Frontend Moderno 🧠</a></li> <li><a href="#quizzes-quiz-02">Quiz – Aula 02: JSX e Componentes 🧠</a></li> <li><a href="#quizzes-quiz-03">Quiz – Aula 03: Hooks e useState 🧠</a></li> <li><a href="#quizzes-quiz-04">Quiz – Aula 04: useEffect e Ciclo de Vida 🧠</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 11a2 2 0 0 1-2 2h-2v2h4v2H9v-4a2 2 0 0 1 2-2h2V9H9V7h4a2 2 0 0 1 2 2m4-6H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 2: Conceitos Essenciais (05 a 08)</strong> ---</p> <ul> <li><a href="#quizzes-quiz-05">Quiz – Aula 05: Estilização Moderna 🧠</a></li> <li><a href="#quizzes-quiz-06">Quiz – Aula 06: Formulários e Validação 🧠</a></li> <li><a href="#quizzes-quiz-07">Quiz – Aula 07: React Router e Navegação 🧠</a></li> <li><a href="#quizzes-quiz-08">Quiz – Aula 08: Consumo de APIs 🧠</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 10.5a1.5 1.5 0 0 1-1.5 1.5c.84 0 1.5.67 1.5 1.5V15c0 1.11-.89 2-2 2H9v-2h4v-2h-2v-2h2V9H9V7h4c1.11 0 2 .89 2 2m4-6H5c-1.09 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 3: Aplicação Prática (09 a 12)</strong> ---</p> <ul> <li><a href="#quizzes-quiz-09">Quiz – Aula 09: Context API 🧠</a></li> <li><a href="#quizzes-quiz-10">Quiz – Aula 10: Hooks Avançados 🧠</a></li> <li><a href="#quizzes-quiz-11">Quiz – Aula 11: Performance e Otimização 🧠</a></li> <li><a href="#quizzes-quiz-12">Quiz – Aula 12: Gerenciamento de Estado com Redux 🧠</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 17h-2v-4H9V7h2v4h2V7h2m4-4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg></span> <strong>Módulo 4: Padrões e Ferramentas (13 a 16)</strong> ---</p> <ul> <li><a href="#quizzes-quiz-13">Quiz – Aula 13: Testes Unitários 🧠</a></li> <li><a href="#quizzes-quiz-14">Quiz – Aula 14: Integração com Cloud (BaaS) 🧠</a></li> <li><a href="#quizzes-quiz-15">Quiz – Aula 15: PWA e Deploy 🧠</a></li> <li><a href="#quizzes-quiz-16">Quiz Final – O Especialista em React 🧠🏆</a></li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z"/></svg></span> <strong>Módulo 5: Avançado e Capstone (17 a 20)</strong> ---</p> <ul> <li><a href="#quizzes-quiz-17">🧠 Quiz 17 – Hooks Customizados Avançados e Contexto Isolado 🚀</a></li> <li><a href="#quizzes-quiz-18">🧠 Quiz 18 – Otimização de Renderização com Memoização e Suspense 🚀</a></li> <li><a href="#quizzes-quiz-19">🧠 Quiz 19 – Gerenciamento de Estado Global Desacoplado 🚀</a></li> <li><a href="#quizzes-quiz-20">🧠 Quiz 20 – Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀</a></li> </ul> </li> </ul> </div></section><section class="print-page" id="quizzes-quiz-01" heading-number="7.2"><h1 id="quizzes-quiz-01-quiz-01-introducao-ao-frontend-moderno">🧠 Quiz 01 – Introdução ao Frontend Moderno 🚀</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Introdução ao Frontend Moderno 🚀?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao Frontend Moderno 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Introdução ao Frontend Moderno 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao Frontend Moderno 🚀?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Introdução ao Frontend Moderno 🚀 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Introdução ao Frontend Moderno 🚀, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao Frontend Moderno 🚀?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Introdução ao Frontend Moderno 🚀 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Introdução ao Frontend Moderno 🚀 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Introdução ao Frontend Moderno 🚀 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-02" heading-number="7.3"><h1 id="quizzes-quiz-02-quiz-02-fundamentos-jsx-componentes-e-props">🧠 Quiz 02 – Fundamentos: JSX, Componentes e Props 🧱</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Fundamentos: JSX, Componentes e Props 🧱?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Fundamentos: JSX, Componentes e Props 🧱?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Fundamentos: JSX, Componentes e Props 🧱, Componentes e Props 🧱, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Fundamentos: JSX, Componentes e Props 🧱?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Fundamentos: JSX, Componentes e Props 🧱 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Fundamentos: JSX, Componentes e Props 🧱, Componentes e Props 🧱, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Fundamentos: JSX, Componentes e Props 🧱?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Fundamentos: JSX, Componentes e Props 🧱 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Fundamentos: JSX, Componentes e Props 🧱 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Fundamentos: JSX, Componentes e Props 🧱 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-03" heading-number="7.4"><h1 id="quizzes-quiz-03-quiz-03-hooks-i-usestate-e-estado-local">🧠 Quiz 03 – Hooks I: useState e Estado Local 🎣</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Hooks I: useState e Estado Local 🎣?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Hooks I: useState e Estado Local 🎣?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Hooks I: useState e Estado Local 🎣, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Hooks I: useState e Estado Local 🎣?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Hooks I: useState e Estado Local 🎣 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Hooks I: useState e Estado Local 🎣, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Hooks I: useState e Estado Local 🎣?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Hooks I: useState e Estado Local 🎣 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Hooks I: useState e Estado Local 🎣 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Hooks I: useState e Estado Local 🎣 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-04" heading-number="7.5"><h1 id="quizzes-quiz-04-quiz-04-hooks-ii-useeffect-e-ciclo-de-vida">🧠 Quiz 04 – Hooks II: useEffect e Ciclo de Vida 🔄</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Hooks II: useEffect e Ciclo de Vida 🔄?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Hooks II: useEffect e Ciclo de Vida 🔄?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Hooks II: useEffect e Ciclo de Vida 🔄, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Hooks II: useEffect e Ciclo de Vida 🔄?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Hooks II: useEffect e Ciclo de Vida 🔄 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Hooks II: useEffect e Ciclo de Vida 🔄, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Hooks II: useEffect e Ciclo de Vida 🔄?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Hooks II: useEffect e Ciclo de Vida 🔄 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Hooks II: useEffect e Ciclo de Vida 🔄 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Hooks II: useEffect e Ciclo de Vida 🔄 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-05" heading-number="7.6"><h1 id="quizzes-quiz-05-quiz-05-estilizacao-css-modules-e-styled-components">🧠 Quiz 05 – Estilização: CSS Modules e Styled Components 🎨</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Estilização: CSS Modules e Styled Components 🎨?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Estilização: CSS Modules e Styled Components 🎨?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Estilização: CSS Modules e Styled Components 🎨, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Estilização: CSS Modules e Styled Components 🎨?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Estilização: CSS Modules e Styled Components 🎨 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Estilização: CSS Modules e Styled Components 🎨, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Estilização: CSS Modules e Styled Components 🎨?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Estilização: CSS Modules e Styled Components 🎨 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Estilização: CSS Modules e Styled Components 🎨 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Estilização: CSS Modules e Styled Components 🎨 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-06" heading-number="7.7"><h1 id="quizzes-quiz-06-quiz-06-formularios-e-validacao-react-hook-form">🧠 Quiz 06 – Formulários e Validação (React Hook Form) 📝</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Formulários e Validação (React Hook Form) 📝?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Formulários e Validação (React Hook Form) 📝?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Formulários e Validação (React Hook Form) 📝, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Formulários e Validação (React Hook Form) 📝?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Formulários e Validação (React Hook Form) 📝 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Formulários e Validação (React Hook Form) 📝, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Formulários e Validação (React Hook Form) 📝?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Formulários e Validação (React Hook Form) 📝 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Formulários e Validação (React Hook Form) 📝 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Formulários e Validação (React Hook Form) 📝 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-07" heading-number="7.8"><h1 id="quizzes-quiz-07-quiz-07-react-router-navegacao-spa">🧠 Quiz 07 – React Router: Navegação SPA 🗺️</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de React Router: Navegação SPA 🗺️?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de React Router: Navegação SPA 🗺️?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em React Router: Navegação SPA 🗺️, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em React Router: Navegação SPA 🗺️?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de React Router: Navegação SPA 🗺️ atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em React Router: Navegação SPA 🗺️, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em React Router: Navegação SPA 🗺️?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a React Router: Navegação SPA 🗺️ estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar React Router: Navegação SPA 🗺️ com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a React Router: Navegação SPA 🗺️ deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-08" heading-number="7.9"><h1 id="quizzes-quiz-08-quiz-08-consumo-de-apis-fetch-e-axios">🧠 Quiz 08 – Consumo de APIs: Fetch e Axios 📡</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Consumo de APIs: Fetch e Axios 📡?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Consumo de APIs: Fetch e Axios 📡?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Consumo de APIs: Fetch e Axios 📡, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Consumo de APIs: Fetch e Axios 📡?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Consumo de APIs: Fetch e Axios 📡 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Consumo de APIs: Fetch e Axios 📡, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Consumo de APIs: Fetch e Axios 📡?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Consumo de APIs: Fetch e Axios 📡 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Consumo de APIs: Fetch e Axios 📡 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Consumo de APIs: Fetch e Axios 📡 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-09" heading-number="7.10"><h1 id="quizzes-quiz-09-quiz-09-context-api-estado-global-simples">🧠 Quiz 09 – Context API: Estado Global Simples 🌐</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Context API: Estado Global Simples 🌐?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Context API: Estado Global Simples 🌐?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Context API: Estado Global Simples 🌐, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Context API: Estado Global Simples 🌐?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Context API: Estado Global Simples 🌐 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Context API: Estado Global Simples 🌐, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Context API: Estado Global Simples 🌐?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Context API: Estado Global Simples 🌐 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Context API: Estado Global Simples 🌐 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Context API: Estado Global Simples 🌐 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-10" heading-number="7.11"><h1 id="quizzes-quiz-10-quiz-10-hooks-avancados-usememo-usecallback-e-useref">🧠 Quiz 10 – Hooks Avançados: useMemo, useCallback e useRef 🏗️</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Hooks Avançados: useMemo, useCallback e useRef 🏗️?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Hooks Avançados: useMemo, useCallback e useRef 🏗️?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Hooks Avançados: useMemo, useCallback e useRef 🏗️, useCallback e useRef 🏗️, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Hooks Avançados: useMemo, useCallback e useRef 🏗️?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Hooks Avançados: useMemo, useCallback e useRef 🏗️ atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Hooks Avançados: useMemo, useCallback e useRef 🏗️, useCallback e useRef 🏗️, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Hooks Avançados: useMemo, useCallback e useRef 🏗️?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Hooks Avançados: useMemo, useCallback e useRef 🏗️ estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Hooks Avançados: useMemo, useCallback e useRef 🏗️ com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Hooks Avançados: useMemo, useCallback e useRef 🏗️ deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-11" heading-number="7.12"><h1 id="quizzes-quiz-11-quiz-11-performance-reactmemo-e-lazy-loading">🧠 Quiz 11 – Performance: React.memo e Lazy Loading 🚀</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Performance: React.memo e Lazy Loading 🚀?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Performance: React.memo e Lazy Loading 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Performance: React.memo e Lazy Loading 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Performance: React.memo e Lazy Loading 🚀?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Performance: React.memo e Lazy Loading 🚀 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Performance: React.memo e Lazy Loading 🚀, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Performance: React.memo e Lazy Loading 🚀?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Performance: React.memo e Lazy Loading 🚀 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Performance: React.memo e Lazy Loading 🚀 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Performance: React.memo e Lazy Loading 🚀 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-12" heading-number="7.13"><h1 id="quizzes-quiz-12-quiz-12-estado-global-avancado-redux-toolkit">🧠 Quiz 12 – Estado Global Avançado: Redux Toolkit 🏪</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Estado Global Avançado: Redux Toolkit 🏪?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Estado Global Avançado: Redux Toolkit 🏪?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Estado Global Avançado: Redux Toolkit 🏪, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Estado Global Avançado: Redux Toolkit 🏪?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Estado Global Avançado: Redux Toolkit 🏪 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Estado Global Avançado: Redux Toolkit 🏪, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Estado Global Avançado: Redux Toolkit 🏪?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Estado Global Avançado: Redux Toolkit 🏪 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Estado Global Avançado: Redux Toolkit 🏪 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Estado Global Avançado: Redux Toolkit 🏪 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-13" heading-number="7.14"><h1 id="quizzes-quiz-13-quiz-13-testes-unitarios-vitest-e-react-testing-library">🧠 Quiz 13 – Testes Unitários: Vitest e React Testing Library 🧪</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Testes Unitários: Vitest e React Testing Library 🧪?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Testes Unitários: Vitest e React Testing Library 🧪?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Testes Unitários: Vitest e React Testing Library 🧪, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Testes Unitários: Vitest e React Testing Library 🧪?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Testes Unitários: Vitest e React Testing Library 🧪 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Testes Unitários: Vitest e React Testing Library 🧪, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Testes Unitários: Vitest e React Testing Library 🧪?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Testes Unitários: Vitest e React Testing Library 🧪 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Testes Unitários: Vitest e React Testing Library 🧪 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Testes Unitários: Vitest e React Testing Library 🧪 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-14" heading-number="7.15"><h1 id="quizzes-quiz-14-quiz-14-integracao-com-backend-firebase-e-supabase">🧠 Quiz 14 – Integração com Backend: Firebase e Supabase ☁️</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Integração com Backend: Firebase e Supabase ☁️?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Integração com Backend: Firebase e Supabase ☁️?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Integração com Backend: Firebase e Supabase ☁️, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Integração com Backend: Firebase e Supabase ☁️?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Integração com Backend: Firebase e Supabase ☁️ atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Integração com Backend: Firebase e Supabase ☁️, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Integração com Backend: Firebase e Supabase ☁️?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Integração com Backend: Firebase e Supabase ☁️ estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Integração com Backend: Firebase e Supabase ☁️ com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Integração com Backend: Firebase e Supabase ☁️ deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-15" heading-number="7.16"><h1 id="quizzes-quiz-15-quiz-15-pwa-e-deploy-colocando-no-ar">🧠 Quiz 15 – PWA e Deploy: Colocando no Ar! 🚀</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de PWA e Deploy: Colocando no Ar! 🚀?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de PWA e Deploy: Colocando no Ar! 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em PWA e Deploy: Colocando no Ar! 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em PWA e Deploy: Colocando no Ar! 🚀?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de PWA e Deploy: Colocando no Ar! 🚀 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em PWA e Deploy: Colocando no Ar! 🚀, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em PWA e Deploy: Colocando no Ar! 🚀?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a PWA e Deploy: Colocando no Ar! 🚀 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar PWA e Deploy: Colocando no Ar! 🚀 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a PWA e Deploy: Colocando no Ar! 🚀 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-16" heading-number="7.17"><h1 id="quizzes-quiz-16-quiz-16-projeto-final-dashboard-completo">🧠 Quiz 16 – Projeto Final: Dashboard Completo 🏆</h1> <hr /> <ol> <li><strong>Qual é o conceito fundamental e objetivo principal de Projeto Final: Dashboard Completo 🏆?</strong></li> <li>( ) Reduzir a segurança do sistema sem análise prévia.</li> <li>(x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Bloquear a execução de rotinas assíncronas.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Final: Dashboard Completo 🏆?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.</li> <li>( ) Aumento indeterminado no tempo de latência das chamadas à API.</li> <li>( ) Incompatibilidade com os compiladores e interpretadores modernos.</li> <li> <p>( ) Impedir a criação de testes automatizados.</p> </li> <li> <p><strong>Em relação ao fluxo de execução e arquitetura em Projeto Final: Dashboard Completo 🏆, assinale a alternativa correta:</strong></p> </li> <li>( ) A lógica opera sem validação de entradas ou saídas.</li> <li>(x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.</li> <li> <p>( ) É proibido desacoplar dependências entre módulos.</p> </li> <li> <p><strong>Qual é a conduta recomendada para manter a legibilidade do código em Projeto Final: Dashboard Completo 🏆?</strong></p> </li> <li>(x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.</li> <li>( ) Utilizar variáveis globais sem restrição de acesso.</li> <li>( ) Substituir nomes descritivos por identificadores de um único caractere.</li> <li> <p>( ) Desabilitar a checagem de tipos e validação estática.</p> </li> <li> <p><strong>Como comprovar que a implementação de Projeto Final: Dashboard Completo 🏆 atingiu os critérios de aceitação?</strong></p> </li> <li>( ) Avaliando visualmente a quantidade total de linhas de código.</li> <li>(x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.</li> <li>( ) Verificando a paleta de cores do editor de texto.</li> <li> <p>( ) Omitindo os relatórios de execução de testes no CI/CD.</p> </li> <li> <p><strong>Ao tratar exceções e cenários de falha em Projeto Final: Dashboard Completo 🏆, o desenvolvedor deve:</strong></p> </li> <li>(x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.</li> <li>( ) Silenciar todas as exceções com blocos vazios.</li> <li>( ) Encerrar abruptamente o processo do servidor sem notificação.</li> <li> <p>( ) Modificar variáveis de ambiente do sistema operacional.</p> </li> <li> <p><strong>Qual o risco de ignorar as convenções e padrões recomendados em Projeto Final: Dashboard Completo 🏆?</strong></p> </li> <li>(x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.</li> <li>( ) Formatação automática de arquivos na IDE.</li> <li>( ) Aumento espontâneo da velocidade do barramento de memória.</li> <li> <p>( ) Exclusão de arquivos de configuração do projeto.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Projeto Final: Dashboard Completo 🏆 estabelece que:</strong></p> </li> <li>(x) Cada componente ou módulo deve ter apenas uma única razão para mudar.</li> <li>( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os testes automatizados devem ser deletados antes da compilação de produção.</p> </li> <li> <p><strong>Para integrar Projeto Final: Dashboard Completo 🏆 com outros serviços e módulos do ecossistema, deve-se:</strong></p> </li> <li>(x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).</li> <li>( ) Acessar diretamente estruturas privadas internas de outros módulos.</li> <li>( ) Trafegar dados confidenciais em texto puro sem criptografia.</li> <li> <p>( ) Desativar os protocolos de comunicação da rede.</p> </li> <li> <p><strong>A documentação técnica referente a Projeto Final: Dashboard Completo 🏆 deve conter obrigatoriamente:</strong></p> </li> <li>(x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.</li> <li>( ) Apenas a assinatura digital do autor.</li> <li>( ) Uma lista aleatória de comandos de sistema operacional.</li> <li>( ) Rascunhos não revisados de reuniões antigas.</li> </ol></section><section class="print-page" id="quizzes-quiz-17" heading-number="7.18"><h1 id="quizzes-quiz-17-quiz-17-hooks-customizados-avancados-e-contexto-isolado">🧠 Quiz 17 – Hooks Customizados Avançados e Contexto Isolado 🚀</h1> <hr /> <ol> <li><strong>Qual o propósito principal de Hooks Customizados Avançados e Contexto Isolado 🚀?</strong></li> <li>( ) Reduzir o espaço em disco sem validação.</li> <li>(x) Garantir estruturação, eficiência e robustez no processamento do sistema.</li> <li>( ) Desativar os testes unitários automatizados.</li> <li> <p>( ) Substituir a documentação técnica por código legado.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar os padrões de Hooks Customizados Avançados e Contexto Isolado 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade e desempenho.</li> <li>( ) Aumento no tempo de resposta das chamadas à API.</li> <li>( ) Incompatibilidade com compiladores modernos.</li> <li> <p>( ) Bloqueio da execução assíncrona.</p> </li> <li> <p><strong>Em relação à arquitetura de Hooks Customizados Avançados e Contexto Isolado 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) O módulo opera de forma totalmente isolada sem interface de dados.</li> <li>(x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.</li> <li> <p>( ) Não há suporte para testes de integração.</p> </li> <li> <p><strong>Qual a melhor prática ao implementar Hooks Customizados Avançados e Contexto Isolado 🚀?</strong></p> </li> <li>(x) Manter o código coeso, desacoplado e devidamente documentado.</li> <li>( ) Utilizar variáveis globais sem controle de acesso.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Desabilitar a checagem de tipos estáticos.</p> </li> <li> <p><strong>Como verificar se a implementação de Hooks Customizados Avançados e Contexto Isolado 🚀 atingiu os objetivos de qualidade?</strong></p> </li> <li>( ) Observando o tamanho do arquivo fonte em bytes.</li> <li>(x) Executando testes automatizados de cobertura e benchmarks de desempenho.</li> <li>( ) Verificando a cor do tema do editor de código.</li> <li> <p>( ) Aguardando reclamações dos usuários finais em produção.</p> </li> <li> <p><strong>Ao lidar com exceções em Hooks Customizados Avançados e Contexto Isolado 🚀, deve-se:</strong></p> </li> <li>(x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.</li> <li>( ) Ignorar todos os erros com blocos vazios try-catch.</li> <li>( ) Encerrar o sistema imediatamente sem log.</li> <li> <p>( ) Modificar o sistema operacional hospedeiro.</p> </li> <li> <p><strong>Qual o impacto do mau uso dos conceitos de Hooks Customizados Avançados e Contexto Isolado 🚀?</strong></p> </li> <li>(x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.</li> <li>( ) Redução automática no uso de memória RAM.</li> <li>( ) Melhoria na taxa de transferência de dados da rede.</li> <li> <p>( ) Formatação automática de arquivos Markdown.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Hooks Customizados Avançados e Contexto Isolado 🚀 determina que:</strong></p> </li> <li>(x) Cada classe ou função deve ter apenas uma razão para mudar.</li> <li>( ) Todas as funções do sistema devem residir no mesmo arquivo.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os comentários de código devem ser removidos antes da compilação.</p> </li> <li> <p><strong>Na integração de Hooks Customizados Avançados e Contexto Isolado 🚀 com outros componentes do ecossistema:</strong></p> </li> <li>(x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).</li> <li>( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.</li> <li>( ) É proibido transmitir dados pela rede.</li> <li> <p>( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.</p> </li> <li> <p><strong>A documentação técnica referente a Hooks Customizados Avançados e Contexto Isolado 🚀 deve conter:</strong></p> </li> <li>(x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.</li> <li>( ) Apenas o nome do autor do código.</li> <li>( ) Lista de reprodução de músicas recomendadas.</li> <li>( ) Histórico completo de conversas do suporte.</li> </ol></section><section class="print-page" id="quizzes-quiz-18" heading-number="7.19"><h1 id="quizzes-quiz-18-quiz-18-otimizacao-de-renderizacao-com-memoizacao-e-suspense">🧠 Quiz 18 – Otimização de Renderização com Memoização e Suspense 🚀</h1> <hr /> <ol> <li><strong>Qual o propósito principal de Otimização de Renderização com Memoização e Suspense 🚀?</strong></li> <li>( ) Reduzir o espaço em disco sem validação.</li> <li>(x) Garantir estruturação, eficiência e robustez no processamento do sistema.</li> <li>( ) Desativar os testes unitários automatizados.</li> <li> <p>( ) Substituir a documentação técnica por código legado.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar os padrões de Otimização de Renderização com Memoização e Suspense 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade e desempenho.</li> <li>( ) Aumento no tempo de resposta das chamadas à API.</li> <li>( ) Incompatibilidade com compiladores modernos.</li> <li> <p>( ) Bloqueio da execução assíncrona.</p> </li> <li> <p><strong>Em relação à arquitetura de Otimização de Renderização com Memoização e Suspense 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) O módulo opera de forma totalmente isolada sem interface de dados.</li> <li>(x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.</li> <li> <p>( ) Não há suporte para testes de integração.</p> </li> <li> <p><strong>Qual a melhor prática ao implementar Otimização de Renderização com Memoização e Suspense 🚀?</strong></p> </li> <li>(x) Manter o código coeso, desacoplado e devidamente documentado.</li> <li>( ) Utilizar variáveis globais sem controle de acesso.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Desabilitar a checagem de tipos estáticos.</p> </li> <li> <p><strong>Como verificar se a implementação de Otimização de Renderização com Memoização e Suspense 🚀 atingiu os objetivos de qualidade?</strong></p> </li> <li>( ) Observando o tamanho do arquivo fonte em bytes.</li> <li>(x) Executando testes automatizados de cobertura e benchmarks de desempenho.</li> <li>( ) Verificando a cor do tema do editor de código.</li> <li> <p>( ) Aguardando reclamações dos usuários finais em produção.</p> </li> <li> <p><strong>Ao lidar com exceções em Otimização de Renderização com Memoização e Suspense 🚀, deve-se:</strong></p> </li> <li>(x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.</li> <li>( ) Ignorar todos os erros com blocos vazios try-catch.</li> <li>( ) Encerrar o sistema imediatamente sem log.</li> <li> <p>( ) Modificar o sistema operacional hospedeiro.</p> </li> <li> <p><strong>Qual o impacto do mau uso dos conceitos de Otimização de Renderização com Memoização e Suspense 🚀?</strong></p> </li> <li>(x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.</li> <li>( ) Redução automática no uso de memória RAM.</li> <li>( ) Melhoria na taxa de transferência de dados da rede.</li> <li> <p>( ) Formatação automática de arquivos Markdown.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Otimização de Renderização com Memoização e Suspense 🚀 determina que:</strong></p> </li> <li>(x) Cada classe ou função deve ter apenas uma razão para mudar.</li> <li>( ) Todas as funções do sistema devem residir no mesmo arquivo.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os comentários de código devem ser removidos antes da compilação.</p> </li> <li> <p><strong>Na integração de Otimização de Renderização com Memoização e Suspense 🚀 com outros componentes do ecossistema:</strong></p> </li> <li>(x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).</li> <li>( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.</li> <li>( ) É proibido transmitir dados pela rede.</li> <li> <p>( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.</p> </li> <li> <p><strong>A documentação técnica referente a Otimização de Renderização com Memoização e Suspense 🚀 deve conter:</strong></p> </li> <li>(x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.</li> <li>( ) Apenas o nome do autor do código.</li> <li>( ) Lista de reprodução de músicas recomendadas.</li> <li>( ) Histórico completo de conversas do suporte.</li> </ol></section><section class="print-page" id="quizzes-quiz-19" heading-number="7.20"><h1 id="quizzes-quiz-19-quiz-19-gerenciamento-de-estado-global-desacoplado">🧠 Quiz 19 – Gerenciamento de Estado Global Desacoplado 🚀</h1> <hr /> <ol> <li><strong>Qual o propósito principal de Gerenciamento de Estado Global Desacoplado 🚀?</strong></li> <li>( ) Reduzir o espaço em disco sem validação.</li> <li>(x) Garantir estruturação, eficiência e robustez no processamento do sistema.</li> <li>( ) Desativar os testes unitários automatizados.</li> <li> <p>( ) Substituir a documentação técnica por código legado.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar os padrões de Gerenciamento de Estado Global Desacoplado 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade e desempenho.</li> <li>( ) Aumento no tempo de resposta das chamadas à API.</li> <li>( ) Incompatibilidade com compiladores modernos.</li> <li> <p>( ) Bloqueio da execução assíncrona.</p> </li> <li> <p><strong>Em relação à arquitetura de Gerenciamento de Estado Global Desacoplado 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) O módulo opera de forma totalmente isolada sem interface de dados.</li> <li>(x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.</li> <li> <p>( ) Não há suporte para testes de integração.</p> </li> <li> <p><strong>Qual a melhor prática ao implementar Gerenciamento de Estado Global Desacoplado 🚀?</strong></p> </li> <li>(x) Manter o código coeso, desacoplado e devidamente documentado.</li> <li>( ) Utilizar variáveis globais sem controle de acesso.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Desabilitar a checagem de tipos estáticos.</p> </li> <li> <p><strong>Como verificar se a implementação de Gerenciamento de Estado Global Desacoplado 🚀 atingiu os objetivos de qualidade?</strong></p> </li> <li>( ) Observando o tamanho do arquivo fonte em bytes.</li> <li>(x) Executando testes automatizados de cobertura e benchmarks de desempenho.</li> <li>( ) Verificando a cor do tema do editor de código.</li> <li> <p>( ) Aguardando reclamações dos usuários finais em produção.</p> </li> <li> <p><strong>Ao lidar com exceções em Gerenciamento de Estado Global Desacoplado 🚀, deve-se:</strong></p> </li> <li>(x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.</li> <li>( ) Ignorar todos os erros com blocos vazios try-catch.</li> <li>( ) Encerrar o sistema imediatamente sem log.</li> <li> <p>( ) Modificar o sistema operacional hospedeiro.</p> </li> <li> <p><strong>Qual o impacto do mau uso dos conceitos de Gerenciamento de Estado Global Desacoplado 🚀?</strong></p> </li> <li>(x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.</li> <li>( ) Redução automática no uso de memória RAM.</li> <li>( ) Melhoria na taxa de transferência de dados da rede.</li> <li> <p>( ) Formatação automática de arquivos Markdown.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Gerenciamento de Estado Global Desacoplado 🚀 determina que:</strong></p> </li> <li>(x) Cada classe ou função deve ter apenas uma razão para mudar.</li> <li>( ) Todas as funções do sistema devem residir no mesmo arquivo.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os comentários de código devem ser removidos antes da compilação.</p> </li> <li> <p><strong>Na integração de Gerenciamento de Estado Global Desacoplado 🚀 com outros componentes do ecossistema:</strong></p> </li> <li>(x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).</li> <li>( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.</li> <li>( ) É proibido transmitir dados pela rede.</li> <li> <p>( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.</p> </li> <li> <p><strong>A documentação técnica referente a Gerenciamento de Estado Global Desacoplado 🚀 deve conter:</strong></p> </li> <li>(x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.</li> <li>( ) Apenas o nome do autor do código.</li> <li>( ) Lista de reprodução de músicas recomendadas.</li> <li>( ) Histórico completo de conversas do suporte.</li> </ol></section><section class="print-page" id="quizzes-quiz-20" heading-number="7.21"><h1 id="quizzes-quiz-20-quiz-20-projeto-capstone-aplicacao-react-spa-autonoma-completa">🧠 Quiz 20 – Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀</h1> <hr /> <ol> <li><strong>Qual o propósito principal de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀?</strong></li> <li>( ) Reduzir o espaço em disco sem validação.</li> <li>(x) Garantir estruturação, eficiência e robustez no processamento do sistema.</li> <li>( ) Desativar os testes unitários automatizados.</li> <li> <p>( ) Substituir a documentação técnica por código legado.</p> </li> <li> <p><strong>Qual benefício direto é obtido ao aplicar os padrões de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀?</strong></p> </li> <li>(x) Maior manutenibilidade, legibilidade e desempenho.</li> <li>( ) Aumento no tempo de resposta das chamadas à API.</li> <li>( ) Incompatibilidade com compiladores modernos.</li> <li> <p>( ) Bloqueio da execução assíncrona.</p> </li> <li> <p><strong>Em relação à arquitetura de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀, assinale a alternativa correta:</strong></p> </li> <li>( ) O módulo opera de forma totalmente isolada sem interface de dados.</li> <li>(x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.</li> <li>( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.</li> <li> <p>( ) Não há suporte para testes de integração.</p> </li> <li> <p><strong>Qual a melhor prática ao implementar Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀?</strong></p> </li> <li>(x) Manter o código coeso, desacoplado e devidamente documentado.</li> <li>( ) Utilizar variáveis globais sem controle de acesso.</li> <li>( ) Omitir o tratamento de erros em produção.</li> <li> <p>( ) Desabilitar a checagem de tipos estáticos.</p> </li> <li> <p><strong>Como verificar se a implementação de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀 atingiu os objetivos de qualidade?</strong></p> </li> <li>( ) Observando o tamanho do arquivo fonte em bytes.</li> <li>(x) Executando testes automatizados de cobertura e benchmarks de desempenho.</li> <li>( ) Verificando a cor do tema do editor de código.</li> <li> <p>( ) Aguardando reclamações dos usuários finais em produção.</p> </li> <li> <p><strong>Ao lidar com exceções em Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀, deve-se:</strong></p> </li> <li>(x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.</li> <li>( ) Ignorar todos os erros com blocos vazios try-catch.</li> <li>( ) Encerrar o sistema imediatamente sem log.</li> <li> <p>( ) Modificar o sistema operacional hospedeiro.</p> </li> <li> <p><strong>Qual o impacto do mau uso dos conceitos de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀?</strong></p> </li> <li>(x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.</li> <li>( ) Redução automática no uso de memória RAM.</li> <li>( ) Melhoria na taxa de transferência de dados da rede.</li> <li> <p>( ) Formatação automática de arquivos Markdown.</p> </li> <li> <p><strong>O princípio da responsabilidade única aplicado a Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀 determina que:</strong></p> </li> <li>(x) Cada classe ou função deve ter apenas uma razão para mudar.</li> <li>( ) Todas as funções do sistema devem residir no mesmo arquivo.</li> <li>( ) O banco de dados deve ser executado na mesma thread do frontend.</li> <li> <p>( ) Os comentários de código devem ser removidos antes da compilação.</p> </li> <li> <p><strong>Na integração de Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀 com outros componentes do ecossistema:</strong></p> </li> <li>(x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).</li> <li>( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.</li> <li>( ) É proibido transmitir dados pela rede.</li> <li> <p>( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.</p> </li> <li> <p><strong>A documentação técnica referente a Projeto Capstone: Aplicação React SPA Autônoma Completa 🚀 deve conter:</strong></p> </li> <li>(x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.</li> <li>( ) Apenas o nome do autor do código.</li> <li>( ) Lista de reprodução de músicas recomendadas.</li> <li>( ) Histórico completo de conversas do suporte.</li> </ol></section></section> <section class='print-page md-section' id='section-8' heading-number='8'> <h1>Slides<a class='headerlink' href='#section-8' title='Permanent link'></a> </h1> </section> <section class='print-page md-section' id='section-9' heading-number='9'> <h1>Configuração<a class='headerlink' href='#section-9' title='Permanent link'></a> </h1> <section class="print-page" id="setups" heading-number="9.1"><h1 id="setups-guia-de-configuracao-do-ambiente">Guia de Configuração do Ambiente 🛠️</h1> <p>Para desenvolver com React de forma profissional, precisamos preparar nosso "laboratório" com as ferramentas certas. Siga os guias abaixo na ordem recomendada.</p> <hr /> <h2 id="setups-roteiro-de-instalacao">📋 Roteiro de Instalação</h2> <h3 id="setups-1-nodejs-e-npm">1. <a href="#setups-setup-01">Node.js e NPM</a></h3> <p>O motor que roda o JavaScript no seu computador e o gerenciador de pacotes para baixar as bibliotecas do React.</p> <h3 id="setups-2-vs-code-e-extensoes">2. <a href="#setups-setup-02">VS Code e Extensões</a></h3> <p>O editor de código preferido dos desenvolvedores React, turbinado com extensões para produtividade.</p> <hr /> <h2 id="setups-proximos-passos">🚀 Próximos Passos</h2> <p>Após concluir as instalações, você estará pronto para criar seu primeiro projeto usando o <strong>Vite</strong>.</p> <div class="admonition tip"> <p class="admonition-title">Suporte</p> <p>Em caso de dúvidas durante a instalação, consulte a comunidade no Discord do curso ou abra uma <em>Issue</em> no repositório oficial.</p> </div></section><section class="print-page" id="setups-setup-01" heading-number="9.2"><h1 id="setups-setup-01-setup-01-nodejs-e-gerenciadores-de-pacote">Setup 01: Node.js e Gerenciadores de Pacote 🟢</h1> <p>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.</p> <hr /> <h2 id="setups-setup-01-download-e-instalacao">📥 Download e Instalação</h2> <h3 id="setups-setup-01-windows-e-macos">Windows e macOS</h3> <ol> <li>Acesse o site oficial: <a href="https://nodejs.org/">nodejs.org</a>.</li> <li>Escolha a versão <strong>LTS</strong> (Long Term Support). Ela é a mais estável e recomendada para produção.</li> <li>Siga o instalador "Next, Next, Finish".</li> </ol> <h3 id="setups-setup-01-linux-ubuntudebian">Linux (Ubuntu/Debian)</h3> <div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#setups-setup-01-__codelineno-0-1"></a>$<span class="w"> </span>curl<span class="w"> </span>-fsSL<span class="w"> </span>https://deb.nodesource.com/setup_lts.x<span class="w"> </span><span class="p">|</span><span class="w"> </span>sudo<span class="w"> </span>-E<span class="w"> </span>bash<span class="w"> </span>- </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#setups-setup-01-__codelineno-0-2"></a>$<span class="w"> </span>sudo<span class="w"> </span>apt-get<span class="w"> </span>install<span class="w"> </span>-y<span class="w"> </span>nodejs </span></code></pre></div> <hr /> <h2 id="setups-setup-01-verificando-a-instalacao">✅ Verificando a Instalação</h2> <p>Abra seu terminal (PowerShell, CMD ou Terminal do Linux/Mac) e digite:</p> <div class="termy"> <div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#setups-setup-01-__codelineno-1-1"></a><span class="c1"># Verificar versão do Node</span> </span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#setups-setup-01-__codelineno-1-2"></a>$<span class="w"> </span>node<span class="w"> </span>-v </span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#setups-setup-01-__codelineno-1-3"></a>v20.x.x </span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#setups-setup-01-__codelineno-1-4"></a> </span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#setups-setup-01-__codelineno-1-5"></a><span class="c1"># Verificar versão do NPM</span> </span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#setups-setup-01-__codelineno-1-6"></a>$<span class="w"> </span>npm<span class="w"> </span>-v </span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#setups-setup-01-__codelineno-1-7"></a><span class="m">10</span>.x.x </span></code></pre></div> </div> <div class="admonition success"> <p class="admonition-title">Tudo pronto!</p> <p>Se as versões aparecerem, o motor está ligado!</p> </div> <hr /> <h2 id="setups-setup-01-npm-vs-yarn-vs-pnpm">📦 NPM vs Yarn vs PNPM</h2> <p>Embora o <strong>NPM</strong> venha instalado com o Node, você ouvirá falar de outros gerenciadores: - <strong>NPM</strong>: O padrão da indústria. - <strong>Yarn</strong>: Criado pelo Facebook, focado em velocidade. - <strong>PNPM</strong>: Focado em economia de espaço em disco.</p> <p><em>Neste curso, utilizaremos o </em><em>NPM</em><em> por ser o padrão nativo.</em></p></section><section class="print-page" id="setups-setup-02" heading-number="9.3"><h1 id="setups-setup-02-setup-02-vs-code-e-extensoes-react">Setup 02: VS Code e Extensões React 💻</h1> <p>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.</p> <hr /> <h2 id="setups-setup-02-extensoes-recomendadas">🛠️ Extensões Recomendadas</h2> <p>Procure por estas extensões na loja do VS Code (Ctrl+Shift+X):</p> <ol> <li><strong>ES7+ React/Redux/React-Native snippets</strong>: Atalhos poderosos (ex: digite <code>rfce</code> para criar um componente inteiro).</li> <li><strong>Prettier - Code formatter</strong>: Deixa seu código alinhado e bonito automaticamente ao salvar.</li> <li><strong>Tailwind CSS IntelliSense</strong>: (Se for usar Tailwind) Ajuda com o autocompletar das classes.</li> <li><strong>Auto Close Tag</strong>: Fecha as tags JSX automaticamente para você.</li> </ol> <hr /> <h2 id="setups-setup-02-configuracoes-sugeridas-settings">⚙️ Configurações Sugeridas (Settings)</h2> <p>Para o Prettier funcionar bem, adicione isso ao seu <code>settings.json</code>:</p> <div class="language-json highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#setups-setup-02-__codelineno-0-1"></a><span class="p">{</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#setups-setup-02-__codelineno-0-2"></a><span class="w"> </span><span class="nt">"editor.formatOnSave"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span> </span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#setups-setup-02-__codelineno-0-3"></a><span class="w"> </span><span class="nt">"editor.defaultFormatter"</span><span class="p">:</span><span class="w"> </span><span class="s2">"esbenp.prettier-vscode"</span><span class="p">,</span> </span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#setups-setup-02-__codelineno-0-4"></a><span class="w"> </span><span class="nt">"javascript.suggest.autoImports"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span> </span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#setups-setup-02-__codelineno-0-5"></a><span class="p">}</span> </span></code></pre></div> <hr /> <h2 id="setups-setup-02-atalhos-essenciais">⌨️ Atalhos Essenciais</h2> <table> <thead> <tr> <th style="text-align: left;">Atalho</th> <th style="text-align: left;">Ação</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;"><code>Ctrl + '</code></td> <td style="text-align: left;">Abre o terminal integrado</td> </tr> <tr> <td style="text-align: left;"><code>Ctrl + P</code></td> <td style="text-align: left;">Busca rápida de arquivos</td> </tr> <tr> <td style="text-align: left;"><code>Alt + Up/Down</code></td> <td style="text-align: left;">Move a linha de código</td> </tr> <tr> <td style="text-align: left;"><code>Ctrl + /</code></td> <td style="text-align: left;">Comenta a linha selecionada</td> </tr> </tbody> </table> <div class="admonition tip"> <p class="admonition-title">Dica de Produtividade</p> <p>Aprenda a usar o terminal integrado do VS Code para rodar os comandos <code>npm run dev</code> sem precisar sair do editor.</p> </div></section><section class="print-page" id="setups-setup-03" heading-number="9.4"><h1 id="setups-setup-03-setup-03-ferramentas-de-apoio">Setup 03: Ferramentas de Apoio 🛠️</h1> <p>Além da IDE, você precisará de ferramentas para gerenciar código e testar dados.</p> <h2 id="setups-setup-03-1-git-e-github">1. Git e GitHub</h2> <p>Essencial para versionamento. * <strong>Download</strong>: <a href="https://git-scm.com/">git-scm.com</a>. * <strong>Configuração Inicial</strong>: <div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#setups-setup-03-__codelineno-0-1"></a>git<span class="w"> </span>config<span class="w"> </span>--global<span class="w"> </span>user.name<span class="w"> </span><span class="s2">"Seu Nome"</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#setups-setup-03-__codelineno-0-2"></a>git<span class="w"> </span>config<span class="w"> </span>--global<span class="w"> </span>user.email<span class="w"> </span><span class="s2">"seu@email.com"</span> </span></code></pre></div></p> <h2 id="setups-setup-03-2-postman-ou-insomnia">2. Postman ou Insomnia</h2> <p>Para testar as APIs REST antes de escrever código Kotlin/Swift. * <strong>Postman</strong>: <a href="https://www.postman.com/">postman.com</a>. * <strong>Insomnia</strong>: <a href="https://insomnia.rest/">insomnia.rest</a>.</p> <h2 id="setups-setup-03-3-vysor-opcional">3. Vysor (Opcional)</h2> <p>Para espelhar a tela do seu celular real no computador (via cabo USB). * <strong>Acesso</strong>: <a href="https://www.vysor.io/">vysor.io</a>.</p> <h2 id="setups-setup-03-4-adb-android-debug-bridge">4. ADB (Android Debug Bridge)</h2> <p>Já vem com o Android Studio, mas é útil no PATH do sistema. * Permite instalar APKs via terminal: <code>adb install app.apk</code>. * Permite ver logs detalhados: <code>adb logcat</code>.</p> <h2 id="setups-setup-03-5-flipper-meta">5. Flipper (Meta)</h2> <p>Uma ferramenta avançada para debugar bancos de dados SQLite e chamadas de rede direto na interface visual. * <strong>Acesso</strong>: <a href="https://fbflipper.com/">fbflipper.com</a>.</p></section></section> <section class='print-page md-section' id='section-10' heading-number='10'> <h1>Sobre<a class='headerlink' href='#section-10' title='Permanent link'></a> </h1> <section class="print-page" id="sobre" heading-number="10.1"><h1 id="sobre-sobre-o-curso">Sobre o Curso</h1> <h2 id="sobre-desenvolvimento-frontend-com-react">🎓 Desenvolvimento Frontend com React</h2> <p>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.</p> <h2 id="sobre-objetivos-do-curso">🎯 Objetivos do Curso</h2> <div class="grid cards"> <ul> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.11c1.03 0 1.87.84 1.87 1.89 0 1-.84 1.85-1.87 1.85S10.13 13 10.13 12c0-1.05.84-1.89 1.87-1.89M7.37 20c.63.38 2.01-.2 3.6-1.7-.52-.59-1.03-1.23-1.51-1.9a23 23 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96m.71-5.74-.29-.51c-.11.29-.22.58-.29.86.27.06.57.11.88.16zm6.54-.76.81-1.5-.81-1.5c-.3-.53-.62-1-.91-1.47C13.17 9 12.6 9 12 9s-1.17 0-1.71.03c-.29.47-.61.94-.91 1.47L8.57 12l.81 1.5c.3.53.62 1 .91 1.47.54.03 1.11.03 1.71.03s1.17 0 1.71-.03c.29-.47.61-.94.91-1.47M12 6.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72m0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72M16.62 4c-.62-.38-2 .2-3.59 1.7.52.59 1.03 1.23 1.51 1.9.82.08 1.63.2 2.4.36.51-2.14.32-3.61-.32-3.96m-.7 5.74.29.51c.11-.29.22-.58.29-.86-.27-.06-.57-.11-.88-.16zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63 2.54.75 4.37 1.99 4.37 3.68s-1.83 2.93-4.37 3.68c.62 2.58.46 4.79-1.01 5.63-1.46.84-3.45-.12-5.37-1.95-1.92 1.83-3.91 2.79-5.38 1.95-1.46-.84-1.62-3.05-1-5.63-2.54-.75-4.37-1.99-4.37-3.68s1.83-2.93 4.37-3.68c-.62-2.58-.46-4.79 1-5.63 1.47-.84 3.46.12 5.38 1.95 1.92-1.83 3.91-2.79 5.37-1.95M17.08 12c.34.75.64 1.5.89 2.26 2.1-.63 3.28-1.53 3.28-2.26s-1.18-1.63-3.28-2.26c-.25.76-.55 1.51-.89 2.26M6.92 12c-.34-.75-.64-1.5-.89-2.26-2.1.63-3.28 1.53-3.28 2.26s1.18 1.63 3.28 2.26c.25-.76.55-1.51.89-2.26m9 2.26-.3.51c.31-.05.61-.1.88-.16-.07-.28-.18-.57-.29-.86zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7.64-.35.83-1.82.32-3.96-.77.16-1.58.28-2.4.36-.48.67-.99 1.31-1.51 1.9M8.08 9.74l.3-.51c-.31.05-.61.1-.88.16.07.28.18.57.29.86zm2.89-4.04C9.38 4.2 8 3.62 7.37 4c-.63.35-.82 1.82-.31 3.96a23 23 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9"/></svg></span> <strong>Fundamentos Sólidos</strong> --- Compreender os princípios do React, como reconciliação, virtual DOM e o paradigma declarativo.</p> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.27 17.05A2.991 2.991 0 0 1 4 22c-1.66 0-3-1.34-3-3s1.34-3 3-3c.18 0 .36 0 .53.05l3.07-5.36-1.74-.99 4.09-1.12 1.12 4.09-1.74-.99zM20 16c-1.3 0-2.4.84-2.82 2H11v-2l-3 3 3 3v-2h6.18c.42 1.16 1.52 2 2.82 2 1.66 0 3-1.34 3-3s-1.34-3-3-3m-8-8c.18 0 .36 0 .53-.05l3.07 5.36-1.74.99 4.09 1.12 1.12-4.09-1.74.99-3.06-5.37A2.991 2.991 0 0 0 12 2c-1.66 0-3 1.34-3 3s1.34 3 3 3"/></svg></span> <strong>Domínio de Estados</strong> --- Gerenciar dados de forma eficiente, desde fluxos locais simples até arquiteturas de estado global complexas.</p> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.89 3 1.96.4L11.11 21l-1.96-.4zm6.7 9L16 8.41V5.58L22.42 12 16 18.41v-2.83zM1.58 12 8 5.58v2.83L4.41 12 8 15.58v2.83z"/></svg></span> <strong>Interfaces Profissionais</strong> --- Criar designs modernos e responsivos utilizando CSS Modules, Styled Components e Tailwind CSS.</p> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.4 7.5c.8.8.8 2.1 0 2.8l-2.8 2.8-7.8-7.8 2.8-2.8c.8-.8 2.1-.8 2.8 0l1.8 1.8 3-3 1.4 1.4-3 3zm-5.8 5.8-1.4-1.4-2.8 2.8-2.1-2.1 2.8-2.8-1.4-1.4-2.8 2.8-1.5-1.4-2.8 2.8c-.8.8-.8 2.1 0 2.8l1.8 1.8-4 4 1.4 1.4 4-4 1.8 1.8c.8.8 2.1.8 2.8 0l2.8-2.8-1.4-1.4z"/></svg></span> <strong>Conexão com Realidade</strong> --- Integrar aplicações frontend com backends reais, lidando com autenticação, segurança e performance.</p> </li> </ul> </div> <h2 id="sobre-o-que-voce-vai-aprender">📚 O Que Você Vai Aprender</h2> <h3 id="sobre-modulo-1-fundamentos-e-essenciais">Módulo 1 – Fundamentos e Essenciais</h3> <ul> <li>Ecossistema JavaScript moderno</li> <li>Estrutura de projetos com Vite</li> <li>JSX e Componentização funcional</li> <li>Hooks essenciais (useState, useEffect)</li> </ul> <h3 id="sobre-modulo-2-estilizacao-e-componentizacao">Módulo 2 – Estilização e Componentização</h3> <ul> <li>Bibliotecas de estilização modernas</li> <li>Composição e padrões de componentes</li> <li>Renderização de listas e formulários</li> <li>Organização e arquitetura de pastas</li> </ul> <h3 id="sobre-modulo-3-navegacao-e-gerenciamento-de-dados">Módulo 3 – Navegação e Gerenciamento de Dados</h3> <ul> <li>Roteamento dinâmico com React Router</li> <li>Integração com APIs via Axios</li> <li>Gerenciamento de estado global com Context API</li> <li>Validação robusta de formulários</li> </ul> <h3 id="sobre-modulo-4-performance-e-qualidade">Módulo 4 – Performance e Qualidade</h3> <ul> <li>Otimização de renderização e memoização</li> <li>Testes unitários e de componentes</li> <li>Autenticação JWT e proteção de rotas</li> <li>Build e estratégias de Deploy</li> </ul> <h2 id="sobre-metodologia">🛠️ Metodologia</h2> <p>Foco direto na prática através da <strong>Metodologia Baseada em Projetos (PBL)</strong>. Você aprenderá cada conceito aplicando-o imediatamente em mini-desafios e no desenvolvimento incremental de uma aplicação completa.</p> <hr /> <p><strong>Pronto para dominar o Frontend?</strong> <a class="md-button md-button--primary" href="#aulas-aula-01"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20 22-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72zM7.86 20.45 4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2"/></svg></span> Começar Agora</a></p></section><section class="print-page" id="project_roadmap" heading-number="10.2"><h1 id="project_roadmap-roadmap-do-projeto-desenvolvimento-frontend-com-react">Roadmap do Projeto: Desenvolvimento Frontend com React 🚀</h1> <p>Este documento rastreia a evolução da refatoração do curso.</p> <h2 id="project_roadmap-fase-1-planejamento-concluido">✅ Fase 1: Planejamento (Concluído)</h2> <ul class="task-list"> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Reestruturação da ementa (16 Aulas de React)</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Definição da stack tecnológica (Vite, React Router, Tailwind)</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Configuração visual e de navegação no MkDocs Material</li> </ul> <h2 id="project_roadmap-fase-2-refatoracao-de-conteudo-em-andamento">🏗️ Fase 2: Refatoração de Conteúdo (Em Andamento)</h2> <ul> <li>[/] Atualização das 16 Aulas (Markdown)</li> <li>[/] Atualização dos 16 Quizzes (Interativos)</li> <li>[/] Atualização dos 16 Conjuntos de Exercícios</li> <li>[/] Atualização dos 16 Slides (RevealJS)</li> </ul> <h2 id="project_roadmap-fase-3-validacao-e-qualidade-pendente">🚀 Fase 3: Validação e Qualidade (Pendente)</h2> <ul class="task-list"> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Revisão ortográfica e técnica (100% PT-BR)</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Verificação de acessibilidade e design responsivo</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Testes de build estrito (<code>mkdocs build --strict</code>)</li> </ul> <h2 id="project_roadmap-fase-4-launch-e-deploy">🚢 Fase 4: Launch e Deploy</h2> <ul class="task-list"> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Deploy automatizado no GitHub Pages</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Criação de guia de configuração de ambiente para o aluno</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Publicação do projeto final modelo</li> </ul> <hr /> <p><strong>Status Atual</strong>: Em Refatoração <strong>Última Atualização</strong>: 21/02/2026</p></section><section class="print-page" id="materiais" heading-number="10.3"><h1 id="materiais-materiais-complementares">Materiais Complementares 📚</h1> <p>Bem-vindo à seção de materiais complementares do curso de <strong>Desenvolvimento Frontend com React</strong>. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.</p> <div class="grid cards"> <ul> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3h8a2 2 0 0 1 2-2 2 2 0 0 1 2 2h8v2h-1v11h-5.75L17 22h-2l-1.75-6h-2.5L9 22H7l1.75-6H3V5H2zm3 2v9h14V5z"/></svg></span> <a href="#slides"><strong>Slides</strong></a></p> <ul> <li>Acompanhe o conteúdo teórico com slides dinâmicos e modernos.</li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.57 14.86 22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"/></svg></span> <a href="#exercicios"><strong>Exercícios</strong></a></p> <ul> <li>Pratique a criação de componentes e gerenciamento de estados.</li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z"/></svg></span> <a href="#quizzes"><strong>Quizzes</strong></a></p> <ul> <li>Valide seu aprendizado com testes rápidos por aula.</li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20 22-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72zM7.86 20.45 4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2"/></svg></span> <a href="#projetos"><strong>Projetos</strong></a></p> <ul> <li>Construa aplicações reais do básico ao avançado para seu portfólio.</li> </ul> </li> <li> <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z"/></svg></span> <a href="#setups"><strong>Ambiente</strong></a></p> <ul> <li>Guias de instalação (Node.js, VS Code, extensões essenciais).</li> </ul> </li> </ul> </div></section><section class="print-page" id="materiais-aula-05-bundle" heading-number="10.4"><h1 id="materiais-aula-05-bundle-exercicios-de-fixacao-aula-05">Exercícios de Fixação – Aula 05 🎨</h1> <h3 id="materiais-aula-05-bundle-exercicio-01-css-modules">Exercício 01: CSS Modules</h3> <p>Crie um componente <code>Botao</code> e um arquivo <code>Botao.module.css</code>. 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).</p> <h3 id="materiais-aula-05-bundle-exercicio-02-styled-components-basico">Exercício 02: Styled Components Básico</h3> <p>Instale o <code>styled-components</code> e crie um componente chamado <code>Titulo</code> que seja um <code>h1</code> com cor azul e fonte em itálico.</p> <h3 id="materiais-aula-05-bundle-exercicio-03-estilo-dinamico-props">Exercício 03: Estilo Dinâmico (Props)</h3> <p>Crie um componente <code>Box</code> usando Styled Components que recebe uma prop <code>bg</code>. A cor de fundo da div deve ser o valor passado nessa prop.</p> <hr /> <h1 id="materiais-aula-05-bundle-quiz-aula-05">Quiz – Aula 05 🧠</h1> <ol class="task-list"> <li>Qual a principal vantagem do CSS Modules?</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Deixa o site mais rápido.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Evita conflitos de nomes de classes entre componentes diferentes.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Transforma o CSS em JavaScript automaticamente.</li> <li class="task-list-item"> <p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Não precisa de arquivos <code>.css</code>. <em>Explicação: CSS Modules gera escopos locais para as classes CSS.</em></p> </li> <li> <p>Como instalamos o Styled Components em um projeto?</p> </li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <code>npm install styled-components</code></li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <code>npm get styled</code></li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Já vem instalado no Windows.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Copiando o arquivo .exe. <em>Explicação: É uma biblioteca de terceiros baixada via NPM.</em></li> </ol> <hr /> <h1 id="materiais-aula-05-bundle-projeto-05-landing-page-tematizavel">Projeto 05 – Landing Page Tematizável 🌈</h1> <p><strong>Objetivo</strong>: Criar uma página com troca dinâmica de temas usando Styled Components. - Use <code>ThemeProvider</code> 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.</p></section><section class="print-page" id="materiais-aula-06-bundle" heading-number="10.5"><h1 id="materiais-aula-06-bundle-exercicios-de-fixacao-aula-06">Exercícios de Fixação – Aula 06 📝</h1> <h3 id="materiais-aula-06-bundle-exercicio-01-setup-do-form">Exercício 01: Setup do Form</h3> <p>Instale o <code>react-hook-form</code> e crie um formulário simples com um único campo "Nome". Ao submeter, exiba o nome em um alerta.</p> <h3 id="materiais-aula-06-bundle-exercicio-02-validacao-required">Exercício 02: Validação Required</h3> <p>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.</p> <h3 id="materiais-aula-06-bundle-exercicio-03-validacao-de-tamanho">Exercício 03: Validação de Tamanho</h3> <p>Crie um campo "Senha". O formulário só deve ser válido se a senha tiver entre 8 e 20 caracteres.</p> <hr /> <h1 id="materiais-aula-06-bundle-quiz-aula-06">Quiz – Aula 06 🧠</h1> <ol class="task-list"> <li>O que o <code>register</code> faz no React Hook Form?</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Cria uma conta no site.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Conecta um input ao gerenciamento da biblioteca.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Salva os dados no banco.</li> <li class="task-list-item"> <p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Abre o terminal. <em>Explicação: Register é a função que "registra" o input para que a lib possa observar suas mudanças.</em></p> </li> <li> <p>Qual a principal diferença de performance do React Hook Form?</p> </li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Ele usa menos internet.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Ele evita re-renderizações desnecessárias em cada tecla digitada (uncontrolled).</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Ele apaga o cache.</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Ele só funciona no Chrome. <em>Explicação: Ao contrário do useState, ele não faz o componente renderizar em cada mudança de letra.</em></li> </ol> <hr /> <h1 id="materiais-aula-06-bundle-projeto-06-formulario-de-suporte-ao-cliente">Projeto 06 – Formulário de Suporte ao Cliente 🎧</h1> <p><strong>Objetivo</strong>: Criar um formulário completo com validações. - Campos: Nome, E-mail, Assunto (Select) e Mensagem (Textarea). - Use <code>react-hook-form</code>. - Exiba mensagens de erro claras para cada campo inválido. - Bloqueie o botão de envio enquanto o formulário for inválido.</p></section></section><section class="print-page" id="tags" heading-number="11"><h1 id="tags-indice-de-tags-didaticas">🏷️ Índice de Tags Didáticas</h1> <p>Navegue pelas aulas, exercícios e projetos do curso organizados por temas, tecnologias e conceitos fundamentais:</p> <h6 id="tags-tags.md:145-167/slug">tags.md:145-167/name</h6></section><section class="print-page" id="print_page" heading-number="12"><h1 id="print_page-versao-para-impressao">Versão para Impressão</h1> <p>Esta página foi gerada automaticamente para impressão.</p></section></div><style>.print-site-enumerate-headings #index > h1:before { content: '2 ' } .print-site-enumerate-headings #index h2:before { content: '2.' counter(counter-index-2) ' ' } .print-site-enumerate-headings #index h2 { counter-increment: counter-index-2 } .print-site-enumerate-headings #plano > h1:before { content: '3 ' } .print-site-enumerate-headings #plano h2:before { content: '3.' counter(counter-plano-2) ' ' } .print-site-enumerate-headings #plano h2 { counter-increment: counter-plano-2 } .print-site-enumerate-headings #section-4 > h1:before { content: '4 ' } .print-site-enumerate-headings #aulas-aula-01 > h1:before { content: '4.1 ' } .print-site-enumerate-headings #aulas-aula-02 > h1:before { content: '4.2 ' } .print-site-enumerate-headings #aulas-aula-03 > h1:before { content: '4.3 ' } .print-site-enumerate-headings #aulas-aula-04 > h1:before { content: '4.4 ' } .print-site-enumerate-headings #aulas-aula-05 > h1:before { content: '4.5 ' } .print-site-enumerate-headings #aulas-aula-06 > h1:before { content: '4.6 ' } .print-site-enumerate-headings #aulas-aula-07 > h1:before { content: '4.7 ' } .print-site-enumerate-headings #aulas-aula-08 > h1:before { content: '4.8 ' } .print-site-enumerate-headings #aulas-aula-09 > h1:before { content: '4.9 ' } .print-site-enumerate-headings #aulas-aula-10 > h1:before { content: '4.10 ' } .print-site-enumerate-headings #aulas-aula-11 > h1:before { content: '4.11 ' } .print-site-enumerate-headings #aulas-aula-12 > h1:before { content: '4.12 ' } .print-site-enumerate-headings #aulas-aula-13 > h1:before { content: '4.13 ' } .print-site-enumerate-headings #aulas-aula-14 > h1:before { content: '4.14 ' } .print-site-enumerate-headings #aulas-aula-15 > h1:before { content: '4.15 ' } .print-site-enumerate-headings #aulas-aula-16 > h1:before { content: '4.16 ' } .print-site-enumerate-headings #aulas-aula-17 > h1:before { content: '4.17 ' } .print-site-enumerate-headings #aulas-aula-18 > h1:before { content: '4.18 ' } .print-site-enumerate-headings #aulas-aula-19 > h1:before { content: '4.19 ' } .print-site-enumerate-headings #aulas-aula-20 > h1:before { content: '4.20 ' } .print-site-enumerate-headings #aulas > h1:before { content: '4.21 ' } .print-site-enumerate-headings #section-5 > h1:before { content: '5 ' } .print-site-enumerate-headings #exercicios > h1:before { content: '5.1 ' } .print-site-enumerate-headings #exercicios-exercicio-01 > h1:before { content: '5.2 ' } .print-site-enumerate-headings #exercicios-exercicio-02 > h1:before { content: '5.3 ' } .print-site-enumerate-headings #exercicios-exercicio-03 > h1:before { content: '5.4 ' } .print-site-enumerate-headings #exercicios-exercicio-04 > h1:before { content: '5.5 ' } .print-site-enumerate-headings #exercicios-exercicio-05 > h1:before { content: '5.6 ' } .print-site-enumerate-headings #exercicios-exercicio-06 > h1:before { content: '5.7 ' } .print-site-enumerate-headings #exercicios-exercicio-07 > h1:before { content: '5.8 ' } .print-site-enumerate-headings #exercicios-exercicio-08 > h1:before { content: '5.9 ' } .print-site-enumerate-headings #exercicios-exercicio-09 > h1:before { content: '5.10 ' } .print-site-enumerate-headings #exercicios-exercicio-10 > h1:before { content: '5.11 ' } .print-site-enumerate-headings #exercicios-exercicio-11 > h1:before { content: '5.12 ' } .print-site-enumerate-headings #exercicios-exercicio-12 > h1:before { content: '5.13 ' } .print-site-enumerate-headings #exercicios-exercicio-13 > h1:before { content: '5.14 ' } .print-site-enumerate-headings #exercicios-exercicio-14 > h1:before { content: '5.15 ' } .print-site-enumerate-headings #exercicios-exercicio-15 > h1:before { content: '5.16 ' } .print-site-enumerate-headings #exercicios-exercicio-16 > h1:before { content: '5.17 ' } .print-site-enumerate-headings #section-6 > h1:before { content: '6 ' } .print-site-enumerate-headings #projetos > h1:before { content: '6.1 ' } .print-site-enumerate-headings #projetos-projeto-01 > h1:before { content: '6.2 ' } .print-site-enumerate-headings #projetos-projeto-02 > h1:before { content: '6.3 ' } .print-site-enumerate-headings #projetos-projeto-03 > h1:before { content: '6.4 ' } .print-site-enumerate-headings #projetos-projeto-04 > h1:before { content: '6.5 ' } .print-site-enumerate-headings #projetos-projeto-05 > h1:before { content: '6.6 ' } .print-site-enumerate-headings #projetos-projeto-06 > h1:before { content: '6.7 ' } .print-site-enumerate-headings #projetos-projeto-07 > h1:before { content: '6.8 ' } .print-site-enumerate-headings #projetos-projeto-08 > h1:before { content: '6.9 ' } .print-site-enumerate-headings #projetos-projeto-09 > h1:before { content: '6.10 ' } .print-site-enumerate-headings #projetos-projeto-10 > h1:before { content: '6.11 ' } .print-site-enumerate-headings #projetos-projeto-11 > h1:before { content: '6.12 ' } .print-site-enumerate-headings #projetos-projeto-12 > h1:before { content: '6.13 ' } .print-site-enumerate-headings #projetos-projeto-13 > h1:before { content: '6.14 ' } .print-site-enumerate-headings #projetos-projeto-14 > h1:before { content: '6.15 ' } .print-site-enumerate-headings #projetos-projeto-15 > h1:before { content: '6.16 ' } .print-site-enumerate-headings #projetos-projeto-16 > h1:before { content: '6.17 ' } .print-site-enumerate-headings #section-7 > h1:before { content: '7 ' } .print-site-enumerate-headings #quizzes > h1:before { content: '7.1 ' } .print-site-enumerate-headings #quizzes-quiz-01 > h1:before { content: '7.2 ' } .print-site-enumerate-headings #quizzes-quiz-02 > h1:before { content: '7.3 ' } .print-site-enumerate-headings #quizzes-quiz-03 > h1:before { content: '7.4 ' } .print-site-enumerate-headings #quizzes-quiz-04 > h1:before { content: '7.5 ' } .print-site-enumerate-headings #quizzes-quiz-05 > h1:before { content: '7.6 ' } .print-site-enumerate-headings #quizzes-quiz-06 > h1:before { content: '7.7 ' } .print-site-enumerate-headings #quizzes-quiz-07 > h1:before { content: '7.8 ' } .print-site-enumerate-headings #quizzes-quiz-08 > h1:before { content: '7.9 ' } .print-site-enumerate-headings #quizzes-quiz-09 > h1:before { content: '7.10 ' } .print-site-enumerate-headings #quizzes-quiz-10 > h1:before { content: '7.11 ' } .print-site-enumerate-headings #quizzes-quiz-11 > h1:before { content: '7.12 ' } .print-site-enumerate-headings #quizzes-quiz-12 > h1:before { content: '7.13 ' } .print-site-enumerate-headings #quizzes-quiz-13 > h1:before { content: '7.14 ' } .print-site-enumerate-headings #quizzes-quiz-14 > h1:before { content: '7.15 ' } .print-site-enumerate-headings #quizzes-quiz-15 > h1:before { content: '7.16 ' } .print-site-enumerate-headings #quizzes-quiz-16 > h1:before { content: '7.17 ' } .print-site-enumerate-headings #quizzes-quiz-17 > h1:before { content: '7.18 ' } .print-site-enumerate-headings #quizzes-quiz-18 > h1:before { content: '7.19 ' } .print-site-enumerate-headings #quizzes-quiz-19 > h1:before { content: '7.20 ' } .print-site-enumerate-headings #quizzes-quiz-20 > h1:before { content: '7.21 ' } .print-site-enumerate-headings #section-8 > h1:before { content: '8 ' } .print-site-enumerate-headings #section-9 > h1:before { content: '9 ' } .print-site-enumerate-headings #setups > h1:before { content: '9.1 ' } .print-site-enumerate-headings #setups-setup-01 > h1:before { content: '9.2 ' } .print-site-enumerate-headings #setups-setup-02 > h1:before { content: '9.3 ' } .print-site-enumerate-headings #setups-setup-03 > h1:before { content: '9.4 ' } .print-site-enumerate-headings #section-10 > h1:before { content: '10 ' } .print-site-enumerate-headings #sobre > h1:before { content: '10.1 ' } .print-site-enumerate-headings #project_roadmap > h1:before { content: '10.2 ' } .print-site-enumerate-headings #materiais > h1:before { content: '10.3 ' } .print-site-enumerate-headings #materiais-aula-05-bundle > h1:before { content: '10.4 ' } .print-site-enumerate-headings #materiais-aula-06-bundle > h1:before { content: '10.5 ' } .print-site-enumerate-headings #tags > h1:before { content: '11 ' } .print-site-enumerate-headings #tags h2:before { content: '11.' counter(counter-tags-2) ' ' } .print-site-enumerate-headings #tags h2 { counter-increment: counter-tags-2 } .print-site-enumerate-headings #print_page > h1:before { content: '12 ' } .print-site-enumerate-headings #print_page h2:before { content: '12.' counter(counter-print_page-2) ' ' } .print-site-enumerate-headings #print_page h2 { counter-increment: counter-print_page-2 } </style> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Voltar para o topo </button> </main> <footer class="md-footer"> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2026 Ricardo Tec Pro </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> <div class="md-social"> <a href="https://github.com/ricardotecpro" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href="https://linkedin.com/in/ricardotecpro" target="_blank" rel="noopener" title="linkedin.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77m282.1 320h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9z"/></svg> </a> <a href="https://ricardotecpro.github.io/" target="_blank" rel="noopener" title="ricardotecpro.github.io" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M351.9 280H161c2.9 64.5 17.2 123.9 37.5 167.4 11.4 24.5 23.7 41.8 35.1 52.4 11.2 10.5 18.9 12.2 22.9 12.2s11.7-1.7 22.9-12.2c11.4-10.6 23.7-28 35.1-52.4 20.3-43.5 34.6-102.9 37.5-167.4zm-191-48h190.9c-2.8-64.5-17.1-123.9-37.4-167.4-11.4-24.4-23.7-41.8-35.1-52.4C268.1 1.7 260.4 0 256.4 0s-11.7 1.7-22.9 12.2c-11.4 10.6-23.7 28-35.1 52.4-20.3 43.5-34.6 102.9-37.5 167.4m-48 0c3.5-85.6 25.6-165.1 57.9-217.3C78.7 47.3 10.9 131.2 1.5 232zM1.5 280c9.4 100.8 77.2 184.7 169.3 217.3-32.3-52.2-54.4-131.7-57.9-217.3zm398.4 0c-3.5 85.6-25.6 165.1-57.9 217.3 92.1-32.7 159.9-116.5 169.3-217.3zm111.4-48C501.9 131.2 434.1 47.3 342 14.7c32.3 52.2 54.4 131.7 57.9 217.3z"/></svg> </a> <a href="https://www.youtube.com/@ricardotecpro" target="_blank" rel="noopener" title="www.youtube.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M549.7 124.1c-6.2-23.7-24.8-42.3-48.3-48.6C458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5c-23.5 6.3-42 24.9-48.3 48.6C15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8C117.3 448 288.1 448 288.1 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6V175.2l142.7 81.2z"/></svg> </a> <a href="https://twitter.com/ricardotecpro" target="_blank" rel="noopener" title="twitter.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M357.2 48h70.6L273.6 224.2 455 464H313L201.7 318.6 74.5 464H3.8l164.9-188.5L-5.2 48h145.6l100.5 132.9zm-24.8 373.8h39.1L119.1 88h-42z"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"annotate": null, "base": "/ads_spec_frontend_com_react/", "features": ["navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.path", "navigation.expand", "navigation.top", "navigation.footer", "navigation.indexes", "navigation.instant", "navigation.prune", "toc.follow", "content.code.copy", "content.code.annotate", "search.share", "search.suggest", "search.highlight"], "search": "../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copiado para \u00e1rea de transfer\u00eancia", "clipboard.copy": "Copiar para \u00e1rea de transfer\u00eancia", "search.result.more.one": "mais 1 nesta p\u00e1gina", "search.result.more.other": "# mais nesta p\u00e1gina", "search.result.none": "Nenhum documento encontrado", "search.result.one": "1 documento encontrado", "search.result.other": "# documentos encontrados", "search.result.placeholder": "Digite para iniciar a busca", "search.result.term.missing": "Ausente", "select.version": "Selecione a vers\u00e3o"}, "version": null}</script> <script src="../assets/javascripts/bundle.d7400e89.min.js"></script> <script src="../js/print-site.js"></script> <script src="../assets/js/quiz.js"></script> <script src="https://unpkg.com/mermaid@11.12.3/dist/mermaid.min.js"></script> <script src="../assets/js/mermaid-init.js"></script> <script src="../assets/js/custom_termynal.js"></script> <script src="../assets/js/mathjax.js"></script> <script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script> </body> </html>