Scribd
Carregar
18 visualizações

Tutorial Form React

Enviado por

kaykybritosilva23
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
18 visualizações

Tutorial Form React

Enviado por

kaykybritosilva23
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 2

05/02/2024, 18:33 tutorial.form.react.

md

Tutorial: Criando um Formulário Controlado com


React e Vite
Este tutorial guia você pela criação de um formulário controlado em React usando funções, com a ajuda do Vite como
ferramenta de build. Vamos criar um simples formulário de cadastro com campos para nome e email, e um botão de envio
que não recarrega a página ao ser pressionado.

Passo 1: Criando um Novo Projeto React com Vite


Primeiro, vamos criar um novo projeto React usando Vite. Abra seu terminal e execute os seguintes comandos:

npm create vite@latest meu-formulario-app


cd meu-formulario-app
npm install
npm run dev

Estes comandos criam um novo projeto React chamado meu-formulario-app, instalam as dependências necessárias e iniciam
o servidor de desenvolvimento.

Passo 2: Criando o Componente do Formulário


Dentro da pasta src do seu projeto, crie um arquivo chamado FormularioCadastro.jsx. Este arquivo conterá o nosso
componente de formulário.

Limpe os arquivos desnecessário de src. Mantenha apenas main.jsx.

Passo 3: Estrutura do Componente do Formulário


Abra o arquivo FormularioCadastro.jsx e adicione o seguinte código para criar a estrutura do seu formulário:

import { useState } from 'react';

function FormularioCadastro() {
const [nome, setNome] = useState('');
const [email, setEmail] = useState('');

const handleSubmit = (event) => {


event.preventDefault(); // Previne o recarregamento da página
console.log('Nome:', nome, 'Email:', email);
// Aqui você pode adicionar a lógica para enviar os dados para um servidor, por exemplo.
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
value={nome}
onChange={(e) => setNome(e.target.value)}
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
localhost:54877/d7b7db05-ac83-4af7-9e7c-b64b6ab82989/ 1/2
05/02/2024, 18:33 tutorial.form.react.md
id="email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<button type="submit">Enviar</button>
</form>
);
}

export default FormularioCadastro;

Passo 4: Adicionando o Componente ao App


Agora, você precisa integrar o FormularioCadastro ao seu componente principal App. Abra (ou crie) o arquivo
src/App.jsx e modifique-o para incluir o componente FormularioCadastro:

import FormularioCadastro from './FormularioCadastro';

function App() {
return (
<div className="App">
<h1>Cadastro</h1>
<FormularioCadastro />
</div>
);
}

export default App;

Passo 5: Executando o Aplicativo


Com o servidor de desenvolvimento do Vite rodando, você deve ver o formulário renderizado na página web. Experimente
preencher os campos e enviar. Os dados do formulário serão impressos no console, graças à função handleSubmit.

Pronto!
Você criou com sucesso um formulário controlado em React usando o Vite.

localhost:54877/d7b7db05-ac83-4af7-9e7c-b64b6ab82989/ 2/2

Você também pode gostar