[Sugestão] Resumo da aula

Resumo da Aula Nesta aula, aprendemos a criar um componente de formulário no React, utilizando uma abordagem semelhante à do componente de botão criado anteriormente.

Criação do Formulário

• Criamos uma nova pasta chamada "Formulario" dentro da pasta "components" e um arquivo "index.tsx" dentro dela.
• Importamos o React e criamos uma classe "Formulario" que estende React.Component.

import React from 'react';

class Formulario extends React.Component {
  render() {
    return (
      <form>
        <div>
          <label htmlFor="tarefa">Adicione um novo estudo</label>
          <input
            type="text"
            name="tarefa"
            id="tarefa"
            placeholder="O que você quer estudar"
            required
          />
        </div>
        <div>
          <label htmlFor="tempo">Tempo</label>
          <input
            type="time"
            step="1"
            name="tempo"
            id="tempo"
            min="00:00:00"
            max="01:30:00"
            required
          />
        </div>
        <Botao />
      </form>
    );
  }
}

export default Formulario;

Utilizando Componentes dentro de Outros Componentes

• Importamos o componente Botao e o utilizamos dentro do formulário.

import React from 'react';
import Botao from '../Botao';

class Formulario extends React.Component {
  render() {
    return (
      <form>
        <div>
          <label htmlFor="tarefa">Adicione um novo estudo</label>
          <input
            type="text"
            name="tarefa"
            id="tarefa"
            placeholder="O que você quer estudar"
            required
          />
        </div>
        <div>
          <label htmlFor="tempo">Tempo</label>
          <input
            type="time"
            step="1"
            name="tempo"
            id="tempo"
            min="00:00:00"
            max="01:30:00"
            required
          />
        </div>
        <Botao />
      </form>
    );
  }
}

export default Formulario;

Atualizando o Componente Principal (App)

• Substituímos o componente Botao pelo componente Formulario no App.tsx.

import React from 'react';
import Formulario from './components/Formulario';

function App() {
  return (
    <div className="App">
      <Formulario />
    </div>
  );
}

export default App;

Funcionamento no Navegador

• No navegador, o formulário aparece com os campos "Adicione um novo estudo" e "Tempo".
• O campo de texto e o campo de tempo são focados quando os respectivos labels são selecionados.
• Os campos são validados como obrigatórios, exibindo mensagens de erro apropriadas quando não preenchidos.