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

{% hint style="info" %}
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.
{% endhint %}

## Vídeo

{% embed url="<https://youtu.be/7Q5XisIKwOU>" %}

**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

{% embed url="<https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-implementacao-de-roteamento-e-formularios-em-react>" %}

### PDF para Download

{% file src="<https://1989749987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRonehqhrmNdVr43Njmfs%2Fuploads%2Fgit-blob-760b964840711bf29540782c44d9ca78ee151d5a%2FFrontend%20-%20Iniciante%20-%20Miss%C3%A3o%20de%20Aprendizado%20-%20Implementa%C3%A7%C3%A3o%20de%20Roteamento%20e%20Formul%C3%A1rios%20em%20React.pdf?alt=media>" %}

### Miro

{% embed url="<https://miro.com/app/board/uXjVNOBw03o=/?moveToWidget=3458764570095836743&cot=14>" %}

## Exercícios de Fixação

{% hint style="info" %}
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
{% endhint %}

<details>

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

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

</details>

<details>

<summary>Resposta correta</summary>

**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.

</details>

***

<details>

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

```jsx
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} />;
}
```

</details>

<details>

<summary>Resposta correta</summary>

**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**:

```javascript
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".

</details>

***

<details>

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

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

**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.

</details>

***

<details>

<summary>Complete o código para criar um formulário simples em React.</summary>

```jsx
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>
  );
}
```

</details>

<details>

<summary>Resposta correta</summary>

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

**Resposta Correta**:

```javascript
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.

</details>

***

<details>

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

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

</details>

<details>

<summary>Resposta correta</summary>

**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.

</details>

## Exercícios de Validação

{% hint style="info" %}
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
{% endhint %}

### 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.

<details>

<summary>Resposta esperada</summary>

{% code title="ContactForm.jsx" lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

**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.

</details>

### Revisão de Código

{% hint style="danger" %}
**Analise o código a seguir, encontre e corrija o erro.**
{% endhint %}

```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.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>
  );
}
```

<details>

<summary>Resposta Correta</summary>

**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**:

```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**: 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.

</details>

### 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.

<details>

<summary>Código esperado</summary>

{% code title="Header.jsx" lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

{% code title="Create.jsx" lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

**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.

</details>