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

🎯 Nível 1: Fundamentos

Problema 03.1 — Estado Simples e Atualização Funcional (setCount(prev => prev + 1))

Contexto: Estado Simples e Atualização Funcional (setCount(prev => prev + 1)) no contexto de Gerenciamento de Estado com useState e Imutabilidade.

Requisitos de Execução:

  1. Criar contador com botões de incremento, decremento e reset usando atualização funcional para evitar stale closures.

Resultado Esperado

Contador atualizado com segurança sem perdas de estado concorrente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_1_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Gerenciamento de Estado com useState e Imutabilidade
🔑 Gabarito de Código & Solução Comentada 
// Contador.tsx
import React, { useState } from 'react';

export const Contador: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const incrementar = () => setCount(prev => prev + 1);
  const decrementar = () => setCount(prev => Math.max(0, prev - 1));

  return (
    <div>
      <p>Valor: {count}</p>
      <button onClick={incrementar}>+1</button>
      <button onClick={decrementar}>-1</button>
    </div>
  );
};

🔍 Nível 2: Prática

Problema 03.2 — Manipulação de Objetos Complexos com Spread Operator

Contexto: Manipulação de Objetos Complexos com Spread Operator no contexto de Gerenciamento de Estado com useState e Imutabilidade.

Requisitos de Execução:

  1. Gerenciar estado de formulário de perfil atualizando apenas o campo modificado com setUser(prev => ({ ...prev, [field]: value })).

Resultado Esperado

Campos de formulário atualizados preservando os demais atributos do objeto.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_2_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Gerenciamento de Estado com useState e Imutabilidade
🔑 Gabarito de Código & Solução Comentada 
// FormPerfil.tsx
import React, { useState, ChangeEvent } from 'react';

interface Perfil { nome: string; email: string; bio: string; }

export const FormPerfil: React.FC = () => {
  const [perfil, setPerfil] = useState<Perfil>({ nome: '', email: '', bio: '' });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setPerfil(prev => ({ ...prev, [name]: value }));
  };

  return <input name="nome" value={perfil.nome} onChange={handleChange} />;
};

⚡ Nível 3: Integração

Problema 03.3 — Gerenciamento Imutável de Arrays (Adição, Remoção e Edição)

Contexto: Gerenciamento Imutável de Arrays (Adição, Remoção e Edição) no contexto de Gerenciamento de Estado com useState e Imutabilidade.

Requisitos de Execução:

  1. Implementar lista de tarefas (Todo List) com adição via [...prev, novo], remoção com .filter() e toggle com .map().

Resultado Esperado

Operações em lista executadas sem mutações diretas no array original.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_3_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Gerenciamento de Estado com useState e Imutabilidade
🔑 Gabarito de Código & Solução Comentada 
// TodoList.tsx
import React, { useState } from 'react';

interface Todo { id: number; text: string; done: boolean; }

export const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const toggleTodo = (id: number) => {
    setTodos(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t));
  };

  const removeTodo = (id: number) => {
    setTodos(prev => prev.filter(t => t.id !== id));
  };

  return <div>{todos.length} tarefas</div>;
};

🏆 Nível 4: Desafio Corporativo

Problema 03.4 — Imutabilidade Estrutural com Immer (useImmer)

Contexto: Imutabilidade Estrutural com Immer (useImmer) no contexto de Gerenciamento de Estado com useState e Imutabilidade.

Requisitos de Execução:

  1. Atualizar árvore de estado profundamente aninhada (3 níveis) usando Immer sem poluição de spreads.

Resultado Esperado

Mutação declarativa e segura de objetos profundos com rascunho Immer.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_4_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Gerenciamento de Estado com useState e Imutabilidade
🔑 Gabarito de Código & Solução Comentada 
// DeepStateImmer.tsx
import { useImmer } from 'use-immer';

export const DeepConfigManager = () => {
  const [config, updateConfig] = useImmer({
    theme: { colors: { primary: '#0070f3', dark: { background: '#111' } } }
  });

  const changeBg = (color: string) => {
    updateConfig(draft => {
      draft.theme.colors.dark.background = color;
    });
  };

  return <button onClick={() => changeBg('#000')}>Mudar Fundo</button>;
};