Locaweb - Edição 60

60 / 68

60 REVISTA LOCAWEB
CODE/
REACT
uma classe para controlar o
tempo e o render na tela, na div
“container”.
O componente-chave
nesse caso é “elapsed”, um
“timer componente”. Uma
vez definido o intervalo de
tempo, a mensagem React está
funcionando corretamente por
' + x + ' segundos.' Será exibida
dentro da div “container” a cada
período.
Esse exemplo não parece
muito útil, mas para criar
interfaces dinâmicas, controlar
a passagem de tempo é
um elemento importante
no desenvolvimento,
especialmente em jogos e
animações.
Veja o exemplo:
.
com.br/react/basico.html
Contador de cliques
Digite o código a seguir em um
arquivo chamado “contador.html”.
<script type="text/babel">
var Counter = React.
createClass({
getInitialState:
function () {
return { count:
0 };
},
handleClick:
function () {
this.setState({
count: this.
state.count + 1,
});
},
render: function
() {
return (
<button
onClick={this.handleClick}>
Click me!
Number of clicks: {this.
state.count}
</button>
);
}
});
ReactDOM.render(
<Counter />,
document.
getElementById('container')
);
</script>
O código vai gerar um botão
na tela, que contará os cliques e
apresentará o total na legenda
do próprio botão.
Veja o exemplo:
.
com.br/react/contador.html
A função handleClick anota
o número de cliques e o Render
atualiza o botão na tela. É um
procedimento que pode ser
usado em jogos para contagem
de acertos ou eventos diversos,
bem como para qualquer
aplicação que necessite de
controle de ações do usuário.
É um código que permite
entender os processos básicos
do React e sua sintaxe básica.
Var Counter = React.
createClass({
Cria a classe e inicializa o
valor de count em 0 (zero)
handleClick: function(){
Controla o evento clique do
botão de contagem.
count: this.state.count + 1,
Soma 1 ao valor atual de count.
render: function () {
Renderiza o botão na tela, com
o valor atualizado do contador.
ReactDOM.render(
var AnimateDemo =
React.createClass({
getInitialState:
function() {
return {current:
0};
},
componentDidMount:
function() {
this.interval
= setInterval(this.tick,
INTERVAL);
},
componentWillUnmount:
function() {
clearInterval(this.
interval);
},
tick: function() {
this.
setState({current: this.
state.current + 1});
},
render: function() {
var children = [];
var pos = 0;
var colors =
['red', 'gray', 'blue'];
for (var i = this.
state.current; i < this.
A chamada ao React para
o processo.
document.
getElementById('container')
Define o elemento de tela
que será o alvo do React, neste
caso, a div com ID “container”.
Transições
Outro elemento importante
são as transições, mudanças
dinâmicas na interface, sem que
a tela precise ser atualizada ou
substituída. O código a seguir
anima retângulos coloridos, no
mesmo estilo das propagandas
em slide comuns no Facebook.
Para este exemplo, crie um
arquivo chamado transição.
html. Digite o seguinte código:
<script type="text/
babel">
var CSSTransitionGroup
= React.addons.
CSSTransitionGroup;
var INTERVAL = 2000;
[A FUNÇÃO HANDLECLICK ANOTA O NÚMERO DE CLIQUES
E O RENDER ATUALIZA O BOTÃO NA TELA. ESSE É
UM PROCEDIMENTO PARA SER USADO EM JOGOS]
Exemplo de contador: função pode ser
usada em diferentes tarefas ou em games