React - Uma introdução bem básica - VI

Neste artigo vou apresentar uma introdução bem básica ao React.

Definindo eventos no component React

Continuando o artigo anterior, vamos agora iniciar o tratamento de eventos em nosso componente React e assim tornar nosso componente funcional.

Manipular eventos com elementos React é muito semelhante ao tratamento de eventos em elementos DOM. Existem algumas diferenças sintáticas:

• Os eventos React são nomeados usando camelCase, em vez de minúsculas.
• No JSX, você passa uma função como manipulador de eventos, em vez de uma string.

Assim ao invés da sintaxe JavaScript   <button onclick="teste()">  no React usamos assim :  <button onClick={teste}>

Observe que definimos a chamada do evento entre colchetes {}.

Dessa forma nosso componente possui um button que possui eventos que estão baseados nos eventos DOM e que possui a propriedade onClick.

Vamos então definir o código abaixo em nosso componente:

Vamos entender o código :

Definimos no evento Click do botão usando a propriedade onClick :

onClick={this.tratarIncremento}

que chama o método tratarIncremento que esta definido abaixo:

tratarIncremento = () => {
     this.setState( { contador: this.state.contador + 1 } );
};

Neste método estamos usando dois conceitos muito importantes:

1 - O conceito de Arrow Functions do JavaScript

Usamos uma arrow function para contornar o problema do escopo e do bind do this.

Uma arrow function usa o operador => , e , tem uma sintaxe parecida com expressões lambdas do C#.

Usando as arrow functions o seu valor de this é definido a partir das funções onde foram definidas. Ou seja, não é mais necessário fazer bind() ou armazenar o estado em that = this;

Sem este recurso teríamos que fazer assim a chamada da função:

this.tratarIncremento = this.trataIncremento.bind(this)

Simplificamos assim o código.

2- O conceito de setState do React:

O método setState({objeto}) do React é usado para atualizar o estado do componente após sua configuração inicial.

Você passa um objeto contendo as partes do estado que você quer atualizar, ou seja, o objeto que você passa, terá chaves {} que correspondem as chaves do estado do seu componente; então setState() irá atualizar (ou setar) o estado, mesclando o objeto passado com o estado.

Temos tudo pronto para poder ver o nosso componente funcionando, mas antes disso, eu quero apresentar outro recurso básico do React, que avaliar expressões.

Vamos criar um método chamado formataContador() e neste método vamos definir um código para avaliar o valor da variável contador, e, se o valor for igual a 0, então vamos exibir a string "Zero".

Veja como fica o código deste método :

formataContador(){
      const { contador } = this.state;
      return contador === 0 ? "Zero" : contador ;
  }

No código estamos atribuindo o estado à variável contador (fizemos aqui uma desestruturação ou destructuring) e depois verificando se o seu valor é igual a zero. Se for igual zero exibimos o texto 'Zero', senão exibimos o valor do contador.

Nota: Destructuring é um recurso que facilita o acesso a dados dentro de um array ou objeto e a criação de variáveis que contenham esses dados

Note que usamos o operador === que compara o valor e o tipo. Assim será true se for exatamente igual, incluindo o valor e o tipo.

O código completo do componente agora ficou assim:

Agora é só alegria...

Executando o projeto e clicando botão Incrementar veremos o contador ser incrementado:

Temos assim um componente básico criado no React e funcionando.

Na próxima aula veremos como renderizar classes de forma dinâmica.

"Porque o reino de Deus não consiste em palavras, mas em poder."
1 Coríntios 4:20