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

🎯 Nível 1: Fundamentos

Problema 17.1 — Manipulação de Formulários com Server Actions Nativas

Contexto: Manipulação de Formulários com Server Actions Nativas no contexto de Recursos do React 19: Actions, useActionState e useOptimistic.

Requisitos de Execução:

  1. Criar action assíncrona recebendo FormData e conectando diretamente na prop action do <form>.

Resultado Esperado

Formulário executando Server Action nativa sem necessidade de e.preventDefault().

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_1_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Recursos do React 19: Actions, useActionState e useOptimistic
🔑 Gabarito de Código & Solução Comentada 
// FormAction.tsx
import React from 'react';

async function salvarItem(formData: FormData) {
  'use server';
  const nome = formData.get('nome');
  console.log('Salvo no servidor:', nome);
}

export const FormServerAction = () => (
  <form action={salvarItem}>
    <input name="nome" placeholder="Item" />
    <button type="submit">Salvar</button>
  </form>
);

🔍 Nível 2: Prática

Problema 17.2 — Gerenciamento de Estado de Ação com useActionState

Contexto: Gerenciamento de Estado de Ação com useActionState no contexto de Recursos do React 19: Actions, useActionState e useOptimistic.

Requisitos de Execução:

  1. Utilizar hook do React 19 useActionState(actionFn, initialState) para gerenciar retorno e status de carregamento isPending.

Resultado Esperado

Feedback de carregamento e mensagens de erro controladas pelo useActionState.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_2_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Recursos do React 19: Actions, useActionState e useOptimistic
🔑 Gabarito de Código & Solução Comentada 
// ActionStateDemo.tsx
import React, { useActionState } from 'react';

async function updateName(prevState: any, formData: FormData) {
  return { message: `Atualizado para: ${formData.get('name')}` };
}

export const ProfileEditor = () => {
  const [state, formAction, isPending] = useActionState(updateName, { message: '' });

  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>{isPending ? 'Salvando...' : 'Salvar'}</button>
      <p>{state.message}</p>
    </form>
  );
};

⚡ Nível 3: Integração

Problema 17.3 — Interface Otimista com useOptimistic no React 19

Contexto: Interface Otimista com useOptimistic no React 19 no contexto de Recursos do React 19: Actions, useActionState e useOptimistic.

Requisitos de Execução:

  1. Implementar lista de mensagens com useOptimistic exibindo mensagens pendentes instantaneamente.

Resultado Esperado

Mensagem exibida imediatamente com indicador visual de pendência.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_3_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Recursos do React 19: Actions, useActionState e useOptimistic
🔑 Gabarito de Código & Solução Comentada 
// OptimisticMessages.tsx
import React, { useOptimistic } from 'react';

export const MessageList = ({ messages, sendMessage }: any) => {
  const [optimisticMessages, setOptimistic] = useOptimistic(
    messages,
    (state, newMsg: string) => [...state, { text: newMsg, sending: true }]
  );

  return (
    <div>
      {optimisticMessages.map((m: any, i: number) => (
        <p key={i}>{m.text} {m.sending && '(Enviando...)'}</p>
      ))}
    </div>
  );
};

🏆 Nível 4: Desafio Corporativo

Problema 17.4 — Leitura de Promessas e Contextos com a Função use()

Contexto: Leitura de Promessas e Contextos com a Função use() no contexto de Recursos do React 19: Actions, useActionState e useOptimistic.

Requisitos de Execução:

  1. Consumir promessa de dados assíncronos diretamente na renderização usando const dados = use(promessa) dentro de <Suspense>.

Resultado Esperado

Promessa assíncrona resolvida diretamente no fluxo de renderização com a função use().

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_4_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Recursos do React 19: Actions, useActionState e useOptimistic
🔑 Gabarito de Código & Solução Comentada 
// UsePromiseDemo.tsx
import React, { use, Suspense } from 'react';

function UserDetails({ userPromise }: { userPromise: Promise<{ name: string }> }) {
  const user = use(userPromise);
  return <h3>Usuário: {user.name}</h3>;
}

export const App = () => (
  <Suspense fallback={<div>Carregando promessa...</div>}>
    <UserDetails userPromise={Promise.resolve({ name: 'Carlos' })} />
  </Suspense>
);