Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 01.1 — Componente Funcional com Tipagem TypeScript e JSX

Contexto: Componente Funcional com Tipagem TypeScript e JSX no contexto de Ecossistema React 19, Vite e JSX/TSX.

Requisitos de Execução:

  1. Criar componente CardBoasVindas recebendo props nome e cargo com tipagem explícita.

Resultado Esperado

Componente renderizado com saudação personalizada e data atual formatada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_1_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema React 19, Vite e JSX/TSX
🔑 Gabarito de Código & Solução Comentada 
// CardBoasVindas.tsx
import React from 'react';

interface CardProps {
  nome: string;
  cargo?: string;
}

export const CardBoasVindas: React.FC<CardProps> = ({ nome, cargo = "Desenvolvedor" }) => {
  return (
    <div className="card-saudacao">
      <h2>Olá, {nome}!</h2>
      <p>Cargo: {cargo}</p>
    </div>
  );
};

🔍 Nível 2: Prática

Problema 01.2 — Renderização de Listas e Chaves (Keys) no Virtual DOM

Contexto: Renderização de Listas e Chaves (Keys) no Virtual DOM no contexto de Ecossistema React 19, Vite e JSX/TSX.

Requisitos de Execução:

  1. Renderizar lista de tecnologias iterando com .map() e utilizando ID único na propriedade key.

Resultado Esperado

Lista de 4 itens renderizada no DOM sem alertas de keys.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_2_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema React 19, Vite e JSX/TSX
🔑 Gabarito de Código & Solução Comentada 
// ListaTecnologias.tsx
import React from 'react';

interface Tech { id: number; nome: string; categoria: string; }

export const ListaTecnologias: React.FC<{ items: Tech[] }> = ({ items }) => {
  return (
    <ul>
      {items.map((tech) => (
        <li key={tech.id}>
          <strong>{tech.nome}</strong> - <span>{tech.categoria}</span>
        </li>
      ))}
    </ul>
  );
};

⚡ Nível 3: Integração

Problema 01.3 — Renderização Condicional com Operadores Lógicos e Ternários

Contexto: Renderização Condicional com Operadores Lógicos e Ternários no contexto de Ecossistema React 19, Vite e JSX/TSX.

Requisitos de Execução:

  1. Exibir badge de status (Ativo/Inativo) e botão de ação condicional conforme propriedade isOnline.

Resultado Esperado

Badge verde exibido para usuário online e botão 'Conectar' para usuário offline.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_3_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema React 19, Vite e JSX/TSX
🔑 Gabarito de Código & Solução Comentada 
// StatusUsuario.tsx
import React from 'react';

export const StatusUsuario: React.FC<{ isOnline: boolean; nome: string }> = ({ isOnline, nome }) => {
  return (
    <div className="status-container">
      <span>{nome}</span>
      {isOnline ? (
        <span className="badge badge-success">Online</span>
      ) : (
        <button className="btn-conectar">Conectar</button>
      )}
    </div>
  );
};

🏆 Nível 4: Desafio Corporativo

Problema 01.4 — Configuração de Build Otimizado com Vite e Code Splitting (React.lazy)

Contexto: Configuração de Build Otimizado com Vite e Code Splitting (React.lazy) no contexto de Ecossistema React 19, Vite e JSX/TSX.

Requisitos de Execução:

  1. Configurar carregamento sob demanda de rotas pesadas com React.lazy e <Suspense> com fallback de skeleton.

Resultado Esperado

Chunk JS da rota carregado dinamicamente apenas quando acessado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_4_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema React 19, Vite e JSX/TSX
🔑 Gabarito de Código & Solução Comentada 
// AppRoutes.tsx
import React, { Suspense, lazy } from 'react';

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

export const AppRoutes: React.FC = () => {
  return (
    <Suspense fallback={<div>Carregando painel corporativo...</div>}>
      <DashboardPesado />
    </Suspense>
  );
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos