Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Hoje, aprenderemos sobre formulários e eventos em React. Começaremos criando um app simples e adicionaremos um formulário e alguns elementos. Então veremos como adicionar eventos aos elementos do formulário.
Se estiver começando em React, recomendamos a leitura do tutorial introdutório sobre React antes.
Começando
Comecemos configurando a aplicação React. Criemos uma pasta para o projeto: ReactFormApp. Dentro, criemos um arquivo chamado index.html e adicionemos o HTML a seguir:
<html>
<head>
<title>TutsPlus - React Forms & Events</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Inicializemos o projeto usando o Node Package Manager (npm).
npm init
Após preencher os detalhes, devemos ter um arquivo package.json dentro do diretório.
{
"name": "reactformapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Instalemos as react e react-dom usando npm.
npm install react react-dom --save
Instalemos os pacotes de babel necessário usando npm e salvemos o arquivo package.json.
npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015
Pacote do babel são necessários para transformar código JSX em JavaScript.
Criemos um arquivo de configuração para o webpack para lidar com suas configurações. Criemos um arquivo chamado webpack.config.js e adicionemos essas configurações:
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js',
},
module: {
loaders: [
{ exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
app.js é o arquivo onde o código React estará. Criemos um arquivo app.js dentro de ReactFormApp. Importemos a bibliotecas do react denro de app.js. Criemos um componente chamado App com uma div e um texto. Renderimo-no usando o método render. Eis como o arquivo app.js deve estar:
import React from 'react'
import { render } from 'react-dom'
var App = React.createClass({
render:function(){
return(
<div>
TutsPlus - Welcome to React Form App
</div>
);
}
});
render((
<App />
),document.getElementById('app'))
Salvemos as mudanças e atualizemos o servidor de desenvolvimento do webpack.
webpack-dev-server
Uma vez reiniciado, poderemos ver o app em React executando em http://localhost:8080/.
Criando um Formulário em React
Temos um app básico em React rodando. Continuemos com o próximo passo e tentemos criar um componente de formulário usando código JSX no app.js.
Criemos um componente chamado FormComp em app.js.
var FormComp = React.createClass({
render:function(){
return(
);
}
})
Dentro da função render de FormComp, definiremos o código HTML para criar o formulário. Colocaremos rótulos, campos de entrada e botão para clicar. Eis como parecerá:
var FormComp = React.createClass({
render:function(){
return(
<div>
<h2>TutsPlus - React Form Tutorial</h2>
<hr />
<label>First Name: </label>
<input type="text" />
<br />
<label>Last Name: </label>
<input type="text" />
<br />
<input type="button" value="Submit" />
<hr />
</div>
);
}
})
Renderizemos o componente de fomrulário FormComp para mostrar o formulário dentro de index.html.
render((
<FormComp />
),document.getElementById('app'))
Savemos as mudanças, reiniciemos o servidor do webpack e devemos ver um formulário na página.
Adicionando Eventos ao Formulário
Nosso formulário em React está bom. Para torná-lo interativo, precisamos adicionar eventos a ele.
Começaremos adicionando variáveis de estado em cada campo de entrada para podermos ler seus valores. Configuremos as variáveis de estado para os campos do primeiro e último nome.
<input type="text" value = {this.state.fName} />
<input type="text" value = {this.state.lName} />
Configuremos o estado inicial para as variáveis acima. Definamos a função getInitialState dentro do componente FormComp e inicializemos ambas.
getInitialState: function () {
return {lName: '',fName:''};
},
Precisamos lidar com o evento on-change dos campos e atribuir às variáveis de estado quando os valores deles alterarem. Assim, definamos um evento onChnge nos campos.
<input type="text" value = {this.state.fName} onChange={this.handleFNameChange} />
<input type="text" value = {this.state.lName} onChange={this.handleLNameChange} />
onChange será definida dentro de FormCamp e configurará as variáveis de estado.
handleFNameChange:function(event){
this.setState({fName: event.target.value});
},
handleLNameChange:function(event){
this.setState({lName: event.target.value});
}
Tentemos renderizá-las, usando-as. Dentro do HTML de FormComp, adicionemos o elemento abaixo renderizando as variáveis de estado.
<h3>Your full name is </h3> {this.state.fName} {this.state.lName}
Salvemos as mudanças e reiniciemos o servidor do webpack. Digitemos algum texto dentro dos campos e veremos o resultado tão logo começarmos a digitar.
Agora, adicionemos um evento on-click ao botão de enviar que temos no formulário.
<input type="button" onClick={this.handleClick} value="Submit" />
Definamos a função handleClick dentro do componente FormComp. Ao clicar o botão de enviar, concatenaremos o primeiro e último nomes, e mostraremos o nome completo no formulário. Eis a função handleClick:
handleClick:function(){
var fullName = this.state.fName + ' ' + this.state.lName;
this.setState({Name:fullName});
},
Além disso, inicializemos a variável Name na função getInitialState.
getInitialState: function () {
return {lName: '',fName:'',Name:''};
}
Mostremos o nome completo concatenado no formulário HTML.
<h3>Your full name is </h3> {this.state.Name}
Eis como o componente FormComp parecerá:
var FormComp = React.createClass({
getInitialState: function () {
return {lName: '',fName:'',Name:''};
},
handleFNameChange:function(event){
this.setState({fName: event.target.value});
},
handleLNameChange:function(event){
this.setState({lName: event.target.value});
},
handleClick:function(){
var fullName = this.state.fName + ' ' + this.state.lName;
this.setState({Name:fullName});
},
render:function(){
return(
<div>
<h2>TutsPlus - React Form Tutorial</h2>
<hr />
<label>First Name: </label>
<input type="text" value = {this.state.fName} onChange={this.handleFNameChange} />
<br />
<label>Last Name: </label>
<input type="text" value = {this.state.lName} onChange={this.handleLNameChange} />
<br />
<input type="button" onClick={this.handleClick} value="Submit" />
<hr />
<h3>Your full name is </h3> {this.state.Name}
</div>
);
}
})
Salvemos as mudanças e reiniciemos o servidor de desenvolvimento. Digitemos ambos nomes e apertemos o botão de enviar, e o nome completo deverá aparecer.
Resumindo
Nesse tutorial, aprendemos como começar a criar apps em React e a entender os conceitos básicos sobre como lidar com formulários e eventos em um app. Esperamos que tenha sido útil e ajudado a iniciar com apps baseados em React.
O código fonte do tutorial está disponível no GitHub.
Diga-nos o que achou, dê sua sugestão ou quaisquer correções nos comentários abaixo. Fique de olho para mais tutoriais de React.
