Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Nos últimos tutoriais sobre React, familiarizamo-nos com os conceitos básicos do React, como JSX, rotas e formulários. Hoje, avançaremos e tentaremos entender animações no React.
Começando
Criemos um diretório chamado ReactAnimations. Naveguemos até o diretório e iniciemos o projeto usando npm.
mkdir ReactAnimations cd ReactAnimations npm init
Instalemos react e react-dom no projeto.
npm install react react-dom --save
Usaremos o empacotador de módulos webpack. Instalemo-no e o seu servidor de desenvolvimento.
npm install webpack webpack-dev-server --save-dev
Instalemos babel para converter a sintaxe JSX em JavaScript.
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
Criemos a configuração requerida pelo webpack-dev-server, onde feiniremos o arquivo de entrada, o de saída e o carregador do babel. Eis como webpack.config.js parece:
module.exports = {
entry: './app.js',
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
},
output: {
filename: 'bundle.js'
}
};
Criemos um index.html onde a aplicação será renderizada. Eis como ele parece:
<html>
<head>
<title>TutsPlus - React Animations</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Criemos um arquivo chamado app.js. Dentro dele, importemos as bibliotecas react necessárias, assim:
import React from 'react';
import {render} from 'react-dom';
Criemos um componente sem estado, Home, que renderizará a tag H1.
const Home = () => {
return (
<h2>{'TutsPlus - Welcome to React Animations!'}</h2>
);
};
Renderizemos o componente Home dentro do elemento app no index.html. Eis como o app.js se parece:
import React from 'react';
import {render} from 'react-dom';
const Home = () => {
return (
<h2>{'TutsPlus - Welcome to React Animations'}</h2>
);
};
render(
<Home />,
document.getElementById('app')
);
Salvemos e iniciemos o servidor webpack. Devemos ter um app rodando em http://localhost:8080/index.html.
Animações em React
React provê um número de complementos para criar apps nele. TransitionGroup e CSSTransitionGroup são as APIs providas para animação.
Da documentação oficial:
O complementoReactTransitionGroupé uma API de baixo nível para animação, eReactCSSTransitionGroupé um complemento para implementação básica fácil de animações e transições CSS.
Animação de Aparecer
Comecemos com uma animação simples em React. Instalemos react-addons-css-transition-group no projeto.
npm install react-addons-css-transition-group --save
Importemos ReactCSSTransitionGroup dentro de app.js.
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
Dentro do componente Home que criamos, envolvamos a tag H2 dentro da tag ReactCSSTransitionGroup.
<div>
<ReactCSSTransitionGroup transitionName="anim" transitionAppear={true} transitionAppearTimeout={5000} transitionEnter={false} transitionLeave={false}>
<h2>{'TutsPlus - Welcome to React Animations'}</h2>
</ReactCSSTransitionGroup>
</div>
Usando a tag ReactCSSTransitionGroup, definimos a porção onde a animação acontecerá. Especificamos um nome para a transição usando transitionName. Também definimos onde a transição deverá aparecer, entrar e sair, ou não.
Usando o nome de transição definido em ReactCSSTransitionGroup, definimos as classes CSS que serão executadas ao aparecer e no estado ativo. Adicionemos o estilo CSS abaixo a index.html.
.anim-appear {
opacity: 0.01;
}
.anim-appear.anim-appear-active{
opacity: 2;
transition: opacity 5s ease-in;
}
Como percebemos, precisamos especificar a duração da animação tanto na renderização quanto no CSS. É assim que o React sabe quando remover as classes de animação do elemento e quando remover o elemento da DOM.
Salvemos as mudanças acima e atualizemos. Uma vez carregada, dentro de alguns segundos deveremos ver o texto animado.
Animação de Entrar/Sair
Para entender melhor a animação de entrar e sair, criaremos uma outra pequena aplicação React. O app terá uma caixa de texto para digitar um nome. eremos como adicionar a animação de entrar quando o nome é adiciona à lista.
Dentro de app.js, criemos uma nova classe chamada App.
class App extends React.Component {
}
Inicializemos a lista data e a variável name dentro do estado inicial do componente.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
name:''
};
}
}
Dentro da parte de renderização do componente App, posicionemos uma caixa de texto para digitar o nome e um botão para adicionar o botão à lista de vetor.
<div>
Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
</div>
Definamos os eventos handleChange e add do campo, dentro do componente App.
handleChange(e){
this.setState({name:e.target.value})
}
O evento handleChange configura o valor do campo de texto igual ao valor de name. Eis como o método add funciona:
add(){
var arr = this.state.data.slice();
arr.push({'id':(new Date()).getTime(),'name':this.state.name})
this.setState({data:arr})
}
Dentro de add, o nome digitado e um ID único é passado para a lista de vetor data.
Vinculemos handleChange e add ao construtor do componente App.
constructor(props) {
super(props);
this.add = this.add.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: [],
name:''
};
}
Mostraremos os nomes digitados em um lista. Modifiquemos o HTML renderizado para adicionar a lista.
<ul>
{
this.state.data.map(function(player) {
return <li key={player.id}>{player.name}</li>
})
}
</ul>
Para animar os items recém adicionados, adicionaremos a tag ReactCSSTransitionGroup sobre os elementos li.
<ul>
<ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={5000} transitionEnter={true} transitionLeave={false}>
{
this.state.data.map(function(player) {
return <li key={player.id}>{player.name}</li>
})
}
</ReactCSSTransitionGroup>
</ul>
Adicionemos o estilo de transição CSS à página index.html.
.anim-enter {
opacity: 0.01;
}
.anim-enter.anim-enter-active {
opacity: 2;
transition: opacity 5s ease-in;
}
Eis o componente App completo:
class App extends React.Component {
constructor(props) {
super(props);
this.add = this.add.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: [],
name:''
};
}
add(){
var arr = this.state.data.slice();
arr.push({'id':(new Date()).getTime(),'name':this.state.name})
this.setState({data:arr})
}
handleChange(e){
this.setState({name:e.target.value})
}
render() {
return (
<div>
Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
<ul>
<ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={3000} transitionEnter={true} transitionLeave={false}>
{
this.state.data.map(function(player) {
return <li key={player.id}>{player.name}</li>
})
}
</ReactCSSTransitionGroup>
</ul>
</div>
)
}
}
Salvemos e atualizemos a página. Digitemos um nome e apertemos o botão add, e o item deverá aparecer na lista com animação.
Similarmente, a animação de sair também pode ser implementada no código acima. Após a funcionalidade ser implementada na aplicação, adicionemos as classes leave e leave-active ao index.html. Configuremos transitionLeave=True na tag ReactCSSTransitionGroup de render e tudo deve estar ok.
Conclusão
Nesse tutorial, vimos como começar a usar animações em React. Criamos um app simples em React e vimos como implementar animações para aparecer e entrar. Para informações em detalhes sobre animações em React, recomendamos a documentação oficial.
O código fonte desse tutorial está disponível no GitHub.
No último ano, React cresceu em popularidade. Na verdade, temos vários itens no mercado, disponíveis para compra, resenha, implementação e etc. Assim, para mais recurso sobre React, não deixe de conferi-los.
Diga-nos o que acho nos comentários abaixo. Veja a página de instrutor na Envato Tuts+ para mais tutoriais sobre React e tecnologia web correlatas.
