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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 02.1 — Componente Container com children (Slots de Conteúdo)

Contexto: Componente Container com children (Slots de Conteúdo) no contexto de Componentes Funcionais, Props e Composição.

Requisitos de Execução:

  1. Criar componente CardContainer que aceite children, título e ícone opcionais.

Resultado Esperado

Container flexível renderizando conteúdo dinâmico filho.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_1_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Componentes Funcionais, Props e Composição
🔑 Gabarito de Código & Solução Comentada 
// CardContainer.tsx
import React, { ReactNode } from 'react';

interface ContainerProps {
  titulo: string;
  children: ReactNode;
}

export const CardContainer: React.FC<ContainerProps> = ({ titulo, children }) => {
  return (
    <section className="card-box">
      <header><h3>{titulo}</h3></header>
      <div className="card-body">{children}</div>
    </section>
  );
};

🔍 Nível 2: Prática

Problema 02.2 — Padrão de Composição Compound Components (Modal)

Contexto: Padrão de Composição Compound Components (Modal) no contexto de Componentes Funcionais, Props e Composição.

Requisitos de Execução:

  1. Implementar Modal.Header, Modal.Body e Modal.Footer compartilhando contexto de fechamento.

Resultado Esperado

Modal composto renderizado com cabeçalho, corpo e rodapé desacoplados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_2_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Componentes Funcionais, Props e Composição
🔑 Gabarito de Código & Solução Comentada 
// Modal.tsx
import React, { ReactNode } from 'react';

export const Modal = ({ children }: { children: ReactNode }) => (
  <div className="modal-overlay"><div className="modal-dialog">{children}</div></div>
);

Modal.Header = ({ title }: { title: string }) => <div className="modal-header"><h4>{title}</h4></div>;
Modal.Body = ({ children }: { children: ReactNode }) => <div className="modal-body">{children}</div>;
Modal.Footer = ({ children }: { children: ReactNode }) => <div className="modal-footer">{children}</div>;

⚡ Nível 3: Integração

Problema 02.3 — Polimorfismo de Componentes com Prop ‘as’

Contexto: Polimorfismo de Componentes com Prop ‘as’ no contexto de Componentes Funcionais, Props e Composição.

Requisitos de Execução:

  1. Criar componente Button polimórfico que possa ser renderizado como <button> ou como <a> conforme a prop as.

Resultado Esperado

Botão renderizado como tag âncora `<a>` com suporte a `href`.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_3_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Componentes Funcionais, Props e Composição
🔑 Gabarito de Código & Solução Comentada 
// PolymorphicButton.tsx
import React, { ElementType, ComponentPropsWithoutRef } from 'react';

type ButtonProps<T extends ElementType = 'button'> = {
  as?: T;
  children: React.ReactNode;
} & ComponentPropsWithoutRef<T>;

export const Button = <T extends ElementType = 'button'>({ as, children, ...props }: ButtonProps<T>) => {
  const Component = as || 'button';
  return <Component className="btn-base" {...props}>{children}</Component>;
};

🏆 Nível 4: Desafio Corporativo

Problema 02.4 — Componentes Genéricos com Tipagem Parametrizada (Generic Table)

Contexto: Componentes Genéricos com Tipagem Parametrizada (Generic Table) no contexto de Componentes Funcionais, Props e Composição.

Requisitos de Execução:

  1. Criar componente <Tabela<T> data={items} renderRow={(item: T) => ...} /> com inferência estrita de tipos.

Resultado Esperado

Tabela genérica tipada renderizando lista de clientes e produtos sem `any`.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_4_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Componentes Funcionais, Props e Composição
🔑 Gabarito de Código & Solução Comentada 
// GenericTable.tsx
import React from 'react';

interface TableProps<T> {
  items: T[];
  renderRow: (item: T, index: number) => React.ReactNode;
}

export function GenericTable<T>({ items, renderRow }: TableProps<T>) {
  return (
    <table>
      <tbody>{items.map((item, idx) => renderRow(item, idx))}</tbody>
    </table>
  );
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos