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.