Implementação de Roteamento e Formulários em React

Área: Frontend | Nível recomendado: Iniciante

Esta missão mostrará como implementar roteamento em uma aplicação React usando React Router, além de criar e gerenciar formulários eficazmente. A missão também abordará como construir um header global que facilita a navegação entre as seções da aplicação, mantendo a consistência e melhorando a experiência do usuário.

Vídeo

Link direto: https://youtu.be/7Q5XisIKwOU

Tópicos

1. Introdução ao Roteamento com React Router:

   • Configuração básica do React Router para gerenciar diferentes rotas na aplicação.

   • Demonstração de como definir rotas para páginas de listagem e criação de conteúdo.

2. Criação de um Header Global:

   • Desenvolvimento de um header que permanece visível e constante em todas as páginas, utilizando links do React Router para navegação eficiente.

3. Construção e Gerenciamento de Formulários:

   • Implementação de um formulário na página de criação para captura e manipulação de dados do usuário através do evento onSubmit.

   • Discussão sobre a simplicidade e eficiência de capturar dados de formulário sem gerenciar cada input com estado.

4. Estilização e Navegação Prática:

   • Estilização das páginas de listagem e de criação, incluindo o header, para criar uma interface coerente e atraente.

   • Implementação prática de navegação entre as páginas usando o header, melhorando a usabilidade da aplicação.

Material de Apoio

Repositório no GitHub

https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-implementacao-de-roteamento-e-formularios-em-reactgithub.com

PDF para Download

310KB

Frontend - Iniciante - Missão de Aprendizado - Implementação de Roteamento e Formulários em React.pdf

pdf

Miro

Exercícios de Fixação

Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.

Qual é o principal benefício de usar React Router em uma aplicação React?

A) Facilitar a manipulação de estados globais

B) Gerenciar a navegação entre diferentes páginas sem recarregar a aplicação

C) Melhorar o desempenho da aplicação

D) Facilitar a integração com APIs externas

Resposta correta

Qual é o principal benefício de usar React Router em uma aplicação React?

Resposta Correta: B

Feedback: O React Router permite gerenciar a navegação entre diferentes páginas em uma aplicação React sem recarregar a aplicação, criando uma experiência de usuário mais fluida.

---

Complete o código para configurar o roteador básico no React, adicionando as rotas corretas para a navegação interna.

import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';

const router = _______________([
  {
    path: '/',
    element: (
      <div>
        <h1>Hello World</h1>
        <______ to="about">About Us</Link>
      </div>
    )
  },
  {
    path: 'about',
    element: <div>About</div>
  }
]);

export default function App() {
  return <_______________ router={router} />;
}

Resposta correta

Complete o código para configurar o roteador básico no React.

Pontos Chave para Completar:

• Adicione o createBrowserRouter.

• Adicione o <Link>.

• Adicione o RouterProvider.

Resposta Correta:

import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    )
  },
  {
    path: 'about',
    element: <div>About</div>
  }
]);

export default function App() {
  return <RouterProvider router={router} />;
}

Feedback: Este código configura um roteador básico utilizando createBrowserRouter, RouterProvider e <Link> do React Router, permitindo navegação interna entre as páginas "Home" e "About".

---

Verdadeiro ou Falso: O componente Link do React Router é usado para navegação interna entre páginas.

A) Verdadeiro

B) Falso

Resposta correta

Verdadeiro ou Falso: O componente Link do React Router é usado para navegação interna entre páginas.

Resposta Correta: A

Feedback: Verdadeiro. O componente Link do React Router permite a navegação interna entre páginas sem recarregar a aplicação.

---

Complete o código para criar um formulário simples em React.

import React, { useState } from 'react';

export default function Create() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = {
      nome: _____._____.nome.value,
    };
    console.log('Form Data:', data);
  }

  return (
    <div>
      <h1>Create DevMon</h1>
      <form _______={_______}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
        </div>
        <input type="_______" value="Criar" />
      </form>
    </div>
  );
}

Resposta correta

Complete o código para criar um formulário simples em React.

Resposta Correta:

import React from 'react';

export default function Create() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = {
      nome: event.target.nome.value,
    };
    console.log('Form Data:', data);
  }

  return (
    <div>
      <h1>Create DevMon</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
        </div>
        <input type="submit" value="Criar" />
      </form>
    </div>
  );
}

Feedback: Este código cria um formulário simples em React que captura o nome do DevMon e o exibe no console quando o formulário é enviado.

---

Qual é a função do método `handleSubmit` em um formulário React?

A) Capturar os dados do formulário e prevenir o comportamento padrão do envio do formulário

B) Estilizar o formulário

C) Validar os dados do formulário

D) Criar os campos do formulário

Resposta correta

Qual é a função do método handleSubmit em um formulário React?

Resposta Correta: A

Feedback: O método handleSubmit é usado para capturar os dados do formulário e prevenir o comportamento padrão do envio do formulário, permitindo manipulação personalizada dos dados antes do envio.

Exercícios de Validação

Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.

Desafio de Código

Crie um formulário em um componente React que capture três campos: Nome, Email, e Mensagem. Quando o formulário for submetido, os dados devem ser exibidos no console.

• Implemente o componente ContactForm com os campos e exibição dos dados no console.

Resposta esperada

ContactForm.jsx

import React, { useState } from 'react';

export default function ContactForm() {
  const [formData, setFormData] = useState({
    nome: '',
    email: '',
    mensagem: ''
  });

  function handleSubmit(event) {
    event.preventDefault();
    const formData = {
      nome: event.target.nome.value,
      email: event.target.email.value,
      mensagem: event.target.mensagem.value
    };
    console.log('Form Data:', formData);
  }

  return (
    <div>
      <h1>Contact Us</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" placeholder="Digite o email" />
        </div>
        <div>
          <label htmlFor="mensagem">Mensagem:</label>
          <textarea id="mensagem" name="mensagem" placeholder="Digite sua mensagem"></textarea>
        </div>
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
}

Feedback: Este código cria um componente ContactForm que captura os campos Nome, Email e Mensagem. Quando o formulário é submetido, os dados são exibidos no console.

Revisão de Código

Analise o código a seguir, encontre e corrija o erro.

import React, { useState } from 'react';

export default function ContactForm() {
  const [formData, setFormData] = useState({
    nome: '',
    email: '',
    mensagem: ''
  });

  function handleSubmit(event) {
    event.preventDefault();
    const formData = {
      nome: event.target.nome.value,
      email: event.target.emailAdress.value,
      mensagem: event.target.message.value,
    console.log('Form Data:', formData);
  }

  return (
    <div>
      <h1>Contact Us</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" placeholder="Digite o email" />
        </div>
        <div>
          <label htmlFor="mensagem">Mensagem:</label>
          <textarea id="mensagem" name="mensagem" placeholder="Digite sua mensagem"></textarea>
        </div>
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
}

Resposta Correta

Erros:

1. Os nomes dos campos no handleSubmit estão incorretos (name em vez de nome, emailAdress em vez de email, message em vez de mensagem).

2. Erro de sintaxe: a linha console.log('Form Data:', formData); está dentro da declaração do objeto formData, causando erro de sintaxe.

Correção:

import React, { useState } from 'react';

export default function ContactForm() {
  const [formData, setFormData] = useState({
    nome: '',
    email: '',
    mensagem: ''
  });

  function handleSubmit(event) {
    event.preventDefault();
    const formData = {
      nome: event.target.nome.value,
      email: event.target.email.value,
      mensagem: event.target.mensagem.value
    };
    console.log('Form Data:', formData);
  }

  return (
    <div>
      <h1>Contact Us</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" placeholder="Digite o email" />
        </div>
        <div>
          <label htmlFor="mensagem">Mensagem:</label>
          <textarea id="mensagem" name="mensagem" placeholder="Digite sua mensagem"></textarea>
        </div>
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
}

Feedback: Certifique-se de que os nomes dos campos nos inputs correspondam aos usados no handleSubmit para que os dados sejam capturados corretamente. Além disso, corrija a sintaxe no handleSubmit para que o código seja válido.

Projeto Prático

Crie uma nova aplicação React que inclua:

1. Um header que utilize o React Router para navegação entre as páginas.

2. Um formulário que capture dados de entrada e os exiba no console quando enviado.

Tarefas

• Criação do Projeto:

  • Inicialize um novo projeto React.

  • Instale o React Router.

• Implementação do Header:

  • Crie um componente Header com navegação usando Link do React Router.

• Implementação do Formulário:

  • Crie um componente Create com um formulário que capture e exiba dados de entrada no console.

Código esperado

Header.jsx

import React from 'react';
import { Link } from 'react-router-dom';

export default function Header() {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/create">Create</Link>
      </nav>
    </header>
  );
}

Create.jsx

import React from 'react';

export default function Create() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = {
      nome: event.target.nome.value,
    };
    console.log('Form Data:', data);
  }

  return (
    <div>
      <h1>Create</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="nome">Nome:</label>
          <input type="text" id="nome" name="nome" />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Feedback Detalhado

• Verificação do Header: Certifique-se de que o header está corretamente configurado para navegação entre as páginas.

• Verificação do Formulário: Certifique-se de que o formulário está capturando e exibindo os dados corretamente no console.

• Estrutura: A estrutura básica da aplicação deve seguir a lógica apresentada nos exemplos.