Eventos com React

Quando trabalhamos com JavaScript clássico temos N formas de trabalhar com eventos, adicionando atributos no nosso elemento html, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

<button onclick="doSomething">

Este método trás muitos problemas, por exemplo, manutenção e gerenciamento de eventos.

Outro formato adicionando um listener:

<button id="me">Oi</button>

    <script>
      document.getElementById('me').addEventListener('click', function(){
        alert('hello')
      })
    </script>

Isto funciona bem, mas você precisa ter uma organização no seu código, caso contrario ficará difícil de debugar seu código, nem todos os browser suportam este recurso sempre precisamos quer fallback para esta situação.

React tenta deixar o gerenciamento de eventos mais consistente. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

Outra questão importante ele centralização do target, quem nunca teve problemas com targets dos eventos e precisou controlar um evento de click com stopPropagation() ou preventDefault(). O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

Eventos suportados pelo React:

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

Antes de trabalhar com Eventos e Componentes precisamos entender é a questão de Props e State, basicamente props temos os valores quando o componente é construído e state são os dados que a interface mantém durante a execução do aplicativo.

let ButtonComponent = React.createClass({
  getInitialState: function() {
    return {
      active: true,
    };
  },

  _toggle: function(event) {
    this.setState({
      active: (this.state.active)? false: true
    });
  },

  render: function() {
    return React.DOM.button({
        onClick: this._toggle
    }, "" + this.state.active)
  }
});

ReactDOM.render(
  React.createElement(ButtonComponent, {}),
  document.getElementById('events')
);

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento nos acionamos quando passamos o render do nosso componente neste caso onClick, poderíamos passar mais de um evento.

Lembrando todos os exemplos estão no meu github: https://github.com/fellyph/react-tutorial

Variáveis e funções com ECMAScript 2015

ECMAScript 2015 é nova especificação do JavaScript antes chamado de ECMAScript 6, por uma padrão de conversão e buscando implementações menores em pequeno prazo. Lembrando que esses recursos nem todos os browser rodam, o ideal é utilizar uma ferramenta para compilar seu código para browsers antigos, um dos mais utilizados é o Babel, ele possui um handbook em português que mostra instalação e como usar:

https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md

Boa parte dos exemplos eu rodei no Chrome sem precisar do babel, nesta página(ECMAScript 6 compatibility table) você tem uma tabela detalhada do suporte de cada browser. Para um projeto em produção é necessário o uso do babel. Agora voltando ao ECMAScript, ela vem com uma série de novidades, já mostrei alguns dos novos recursos nos posts sobre REACT, mas não entrei em detalhes neste post vou listar algumas das novidades.

Declarando variáveis

let

let é utilizado para declarar variáveis dentro de um escopo menor comparado ao var que tem um escopo global ou relacionado a funções, com o let o escopo pode ser limitado por blocos menores if, else, for e while.

const

const como em outras linguagens o permite nos criarmos variáveis read-only, constantes nos ajudam a criar códigos mais legíveis, exemplo quando lemos o seguinte código:

function doSomething(num) {
  if(num < 5) {
    //doSomething
  }

  for(var i = 0; i < 5; i++) {
    //doSomething
  }
}

Não temos idéia o que é o número 5, apenas um fator na condicional, se mudarmos para o seguinte código:

function doSomething(num) {
  const MAX_PRODUCTS = 5;
  
  if(num < MAX_PRODUCTS) {
    //doSomething
  }

  for(var i = 0; i < MAX_PRODUCTS; i++) {
    //doSomething
  }
}

Agora com as modificação batemos o olho sabemos que os loops estão limitados por um número máximo de produtos. Esse valor é escrito apenas uma vez, ele não pode ser alterado após ser definido. Por um padrão de escrita de código todas as constantes precisa ser escritas em uppercase.

Funções

Surgiram novas funcionalidades super úteis relacionadas a funções com ECMAScript 2015. A primeira delas, valores default na assinatura da funções. Um problema básico é acesso a variáveis undefined, temos um tratamento comum para isso da seguinte forma:

function listProducts(listOfProducts) {
  var products = typeof listOfProducts !== 'undefined' ? listOfProducts : [];
  var total = products.length;
  //do something
}

Com nova definição de EcmaScript 2015 podemos criar valores default sem precisar de um tratamento especial como a versão anterior da seguinte forma:

function listProducts(listOfProducts = []) {
  let total = listOfProducts.length;
  //do something
}

Nomeando parâmetros

Uma nova funcionalidade, agora é possível nomear parâmetros como isso é útil, no exemplo abaixo:

function setProduct(newProduct = {}) {
  product.name = newProduct.name;
  product.price = newProduct.price;
  product.category = newProduct.category;
}

Exemplo acima contornamos o problema do parâmetro “undefined” mas se os atributos não existirem nosso código irá disparar um erro.

function setProduct({name, price, category} = {}) {
  product.name = name;
  product.price = price;
  product.category = category;
}

Nomeando parâmetros, além do código ficar mais legível, não caímos nos problemas de atributos inválidos.

Rest Params

Outro novo recurso do ECMAScript 2015 é possível passar um array de parâmetros como argumento, como isso funciona, por exemplo, temos uma função de produtos relacionados onde podemos exibir, um, dois ou três produtos:

showRelacionados(“produto-1”);

showRelacionados(“produto-1”, “produto-2”, “produto-3”);

showRelacionados(“produto-1”, “produto-2”);

Você precisa passar um número x de argumentos que sempre variam, nunca é uma quantidade exata. Com parâmetros rest, permite definir que a função espera um array de argumentos.

function showRelated(...related) {
  for(let i in related ) {
    console.log(related[i]);
  }
}

showRelated("produto-1", "produto-2", "produto-3");

Além dos “…” na assinatura da função, podemos adicionar na chamada da função mas ela tem uma funcionalidade diferente quando acionamos a função, neste caso ela quebra os parâmetros do objeto em vários argumentos. Exemplo temos o objeto

produto.nome = “Prato”;
produto.preco = 20;
produto.categoria = “casa”;

adicionaProduto(…produto);

A função “adicionaProduto” irá receber 3 parâmetros(nome, preco e categoria).

Arrow function

Arrow function além de simplificar a escrita de funções ela mantém o escopo de quem invoca a função útil quando estamos tratando, também chamado de “lexical binding” ele cria um escopo de quem o define e não de onde ele roda, outro ponto a Arrow functions sempre são anônimas. Sua síntaxe é simples:

([parametro], [parametro]) => {
   //código que será executado na chamada da função
}

Exemplo temos um código sem arrow function:

var categorias =  ["casa", "jardim", "praia"];

categorias.map(function(prop) {
  console.log(prop);
});

Com arrow function ele fica da seguinte forma:

var categorias =  ["casa", "jardim", "praia"];

categorias.map(prop => {
  console.log(prop);
});

Apenas uma chamada mas imagine isso sendo repetido várias vezes no dia, mas outra vantagem é a questão do escopo um problema comum é perder o escopo quando você codando alguma funcionalidade exemplo:

function Clock() {
  this.time = 10; 
  
  setInterval(function count() {
    this.time++;
    console.log(this.time, this);
  }, 1000);
};

var c = new Clock();

Criamos um objeto tipo Clock, mas ele tem um problema quando usamos o console dentro do setInterval por exemplo o escopo do setInterval é global nesse momento o this não é o clock e sim o objeto Window. Claro que podemos resolver esse problema criando uma variável self para para o clock e guardar o this(clock) dentro dessa variável outra solução seria usar o arrow function:

function Clock() {
  this.time = 10; 
  
  setInterval( () => {
    console.log(++this.time, this);
  }, 1000);
};

var c = new Clock();

Vamos ficando por aqui o próximo post sobre ECMA irei falar sobre objetos e classes.

Stateless vs Stateful

Continuando a série sobre ReactJS. Vamos falar sobre um dos princípios básicos sobre estado(state). Os dois últimos posts, por exemplos, criamos componentes estáticos(ou stateless), mas atualmente boa parte das aplicações precisam ter algum tipo de interação com o usuário.

As informações precisam ser alteradas em tempo real. Uma das base do React é um conceito de estado, cada componente utilizado tem uma estado próprio quando estado muda o React reconstrói a UI sem o dev fazer nenhuma requisição para alterar o DOM.

Tudo que precisamos fazer é especificar onde os dados terão o estado “alterável”. Para isso utilizamos uma função this.setState() para manter os dados atualizados. Quando ele é chamando, Qualquer informação alterada no componente ele chama o método render() para atualizar a tela.

Criando o primeiro componente Stateful

Até o momento temos apenas um component Stateless, precisamos transforma-lo em um elemento Stateful. Vamos dar uma olhada neste exemplo:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },
  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        defaultValue: this.props.text
      }),
      React.DOM.h3(null, this.props.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

No exemplo acima, nosso componente possuí uma textarea e um título que mostra o tamanho do nosso texto e ele ainda está stateless. Ele precisa do método ReactDOM.render, para atualizar as informações quando o usuário edita o valor da caixa de texto. Para isso precisamos manter os dados(estado) e saber quando eles serão alterados, vamos ver o exemplo atualizado:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value
    })
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

Primeiro passo é chamar o método getInitialState() ele é responsável por salvar o estado inicial do elemento, após adicionarmos o método getInitialState precisamos definir as ações que iremos tomar quando nosso componente sofre alguma alteração no seu estado, nesse caso adicionamos uma função “_textChange” ela simplesmente atualizar o estado do elemento com setState, quando ele for alterado.

No último bloco do nosso componente dois pontos importantes, agora no value do nosso textarea e do nosso h3 não acessamos os props do nosso componente e sim o estado “React.DOM.textarea({ value: this.state.text, …” e “React.DOM.h3(null, this.state.text.length)” outro ponto importante adicionamos um evento onChange para disparar a método _textChange.

Agora quando alteramos nosso componente ele atualiza os dados. Então o objetivo é fazer posts curtos com mais frequência, todos os tutoriais de react estão no meu git: https://github.com/fellyph/react-tutorial

Por que REACT JS?

React JS é o assunto do momento no Brasil e Europa, nos EUA já faz sucesso a mais de um ano o framework do Facebook apenas confirma sua força este ano. React é a tecnologia chave requisitadas nas principais vagas de front aqui na Europa tirando o espaço do Angular ainda bastante forte. Como parte do meus estudos vou traduzir alguns artigos e tutorias que ando lendo. O primeiro deles é uma breve introdução vou utilizar como base o “Why React?” e “Getting Started“.

Por que React ?

React é uma biblioteca javascript para criar interfaces do Facebook e Instagram. O React foi criado para resolver o problema: Criar largar aplicações com dados que mudam a cada segundo.

Simples

Simplesmente expressar como sua aplicação deve olhar para qualquer ponto no tempo, e React vai automaticamente administrar todas atualizações da sua interface quando seus dados mudam.

Declarativo

Quando os dados mudam, React conceitualmente dispara o botão “refresh” e sabe quando atualizar os dados que mudaram.

Construindo ambiente “componentizável”

React é todo construído sobre componentes reutilizáveis. Na verdade, com React a única coisa que você precisa é construir componentes. Uma vez que eles são encapsulados, componentes podem fazer seu código reutilizável, “testável” e com fácil separação de interesses.

Iniciando os trabalhos

Primeiramente vamos baixar o “Starter Pack”, nesse pacote possui as versões prebuilt do React e React DOM para o seu browser, como também uma coleção de exemplos para o seu estudo. Então depois que baixar e descompactar o zip com o starter pack, temos a seguinte estrutura:

Screen Shot 2016-06-10 at 5.54.08 PM

Vamos criar o nosso primero arquivo helloworld.html na pasta raiz.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

O exemplo acima foi retirado da documentação, vamos explicar alguns pontos. para executar o React precisamos de três arquivos básicos react.js , react-dom.js e o browser.min.js(babel). Adicionamos uma div com id “example” na linha seguinte adicionamos uma tag script com o type “text/babel” esse parâmetro é utilizado pelo Babel.

Para quem não conhece ele é um compilador genérico multifuncional de JavaScript. “What?” Compliquei? na real ele compila as versões mais recentes do JavaScript(ES2015 e ES2016) e React para uma versão que rode nos browsers atuais. Se quiser saber mais dá uma conferida no link: https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md#toc-introduction

Dentro da tag script podemos ver uma mistura de javaScript com HTML essa syntax é conhecida como JSX, no exemplo acima utilizamos uma função que renderiza o JSX “ReactDOM.render” ela recebe dois parâmetros: o nosso código JSX e o elemento que iremos adicionar o código renderizado(O h1 com hello world).

Claro esse é um exemplo de introdução, não é obrigatório o código JSX ficar dentro do html podemos criar um arquivo js separado sem problemas.

Exibindo os dados

A utilização mais básica em uma interface é exibir algum dado. O foco do React é facilitar essa tarefa e manter as interfaces atualizadas em tempo real quando os dados mudam.

Vamos criar uma segundo exemplo com alguma interação.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Timer React</title>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" >
      var Relogio = React.createClass({
        render: function() {
          return (
            <p>
              Olá, são exatamente: {this.props.date.toTimeString()}
            </p>
          );
        }
      });

      setInterval(function() {
        ReactDOM.render(
          <Relogio date={new Date()} />,
          document.getElementById('example')
        );
      }, 500);
    </script>
  </body>
</html>

No exemplo acima criamos um componente classe utilizando a função “React.createClass” temos e várias maneiras de criar componentes e cada caso tem uma particularidade, no caso do createClass passamos um objeto como parâmetro e o atributo render possui um JSX como valor. Isso não determina que o JSX será compilado nesse momento. Apenas deixa pre-definido o que será “renderizado” quando chamarmos o componente “Relogio” mais a frente dentro do nosso JSX temos um ponto importante “{this.props.date.toTimeString()}” as chaves especifica que esse item é uma variável no caso quem chamar o componente precisa passar o atributo “date”.

Após o createClass temos um setInterval que irá chamar a cada 500 milisegundos ReactDOM.render e chamamos o componente que criamos anteriormente e passamos um parâmetro date. Se tudo e correr bem teremos em nossa tela o texto:

Olá, são exatamente: XX:XX:XX(hora atual)

Se quiser saber mais sobre React da uma conferida na documentação: https://facebook.github.io/react/index.html

Próximo Post irei abordar mais esse ponto de criar componentes e o modo de pensar no conteúdo utilizando React.

8º Encontro FEMUG SP + 8º Encontro Mobile Dev Group São Paulo

Olá pessoal venho anunciar o nosso primeiro encontro do ano, esse encontro será uma parceria com o grupo FEMUG-SP. O grupo organizado pelo Daniel Filho, para quem não conhece o grupo vai uma breve descrição:

O “Front-End Meet-Up Group” é um projeto que nasceu da necessidade de unir os desenvolvedores Front-End de São Paulo, e então tornou-se uma idéia coletiva, para que o acesso à informação seja feito em qualquer lugar que haja interesse do aprendizado.

 

O FEMUG realiza encontros periódicos sem um local fixo cada mês uma empresa fica responsável por seder o espaço para o evento, neste mês o encontro será realizado na BlackBerry. O Tema ainda não foi definido, ele é fechado dias antes do evento, para acompanhar a discussão sobre o encontro acesse a lista no seguinte link: http://bit.ly/FEMUG-SP

As conversas sobre o encontro começaram no ano passado Demian Borba, conheceu Daniel Filho no FEEC Brasil em Recife, isso mesmo em Recife nós conhecemos o grupo de São Paulo. E nesse mês será um prazer receber o FEMUG nas instalações da BlackBerry Brasil, também convidamos os integrantes do Mobile Dev Group São Paulo participarem do encontro. Quem não acompanha o nosso Dev Group no Facebook vai perguntar “Que grupo é esse?”. No final do ano passado em uma reunião realizada entre os managers do Brasil decidimos mudar o nome dos grupos de “BlackBerry Dev Group” para “Mobile Dev Group”.

Essa mudança visa abrir os grupos para desenvolvedores de outras plataformas, com o foco no enriquecimento do conhecimento entre os desenvolvedores independente da plataforma, atualmente temos muitas tecnologias convergentes em várias plataformas, por exemplo, AIR, Unity e Phone Gap. O Apoio da BlackBerry aos grupos continua com o mesmo foco os desenvolvedores.

E agora chega de “Blá Blá Blá” vamos ao que interessa o encontro será nesta Quarta-feira, 15 de Janeiro de 2014 às 20:00h no Escritório da BlackBerry Brasil:

Centro Empresarial Nações Unidas, Torre norte – 35º andar
Av. das Nações Unidas, 12901 – Itaim Bibi
São Paulo

Interessado em participar do evento por favor se inscrever no seguinte link: http://www.eventick.com.br/femug-sp-8

E até lá pessoal.