Começando com React e JSX

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, veremos como começar em React criando um app e tentando entender o básico do JSX. O tutorial assume que o entendimento em HTML e JavaScript é bom.

O Que É React?

React é uma biblioteca JavaScript criada pelo Facebook para administrar interfaces de usários para aplicações web facilmente. Um dos destaques da React é que ela ajuda a criar componentes UI administráveis, facilitando a criação de aplicações web em larga escala. React usa o conceito de DOM Virtual, mantendo um espelho da DOM verdadeira. Quando uma mudança ocorre, React executa uma comparação, identifica a mudança e atualiza a DOM verdadeira. O conceito de DOM Virutal torna a renderização do app mais rápida e aprimora a performance.

O Que É JSX?

JSX é uma extensão da sintaxe do JavaScript que lembra XML. Eis um exemplo:

ReactDOM.render(
  <h1>Welcome React, TutsPlus !!</h1>,
  document.getElementById('container')
);

JSX parece HTML mas é uma mistura de JavaScript e HTML. O código acima renderiza a mensagem dentro da tag h1 no elemento container. JSX é mais rápido que JavaScript por aplicar otimizações ao compilar o código fonte. Também é preferível JSX já que é mais fácil que usar JavaScript puro.

Da documentação oficial:

JSX é uma extenção de sintaxe similar ao XML para o ECMAscript sem semântica definida. Não é para ser implementada por motores ou navegadores. Não é uma proposta incorporar JSX na especificação ECMAScript em si. Intenciona-se usá-lo com vários pré-processaores (transpiladores) para transformar esses tokens em ECMAScript padrão.

Por Que Usar JSX?

Não é obrigatório usar JSX ao criar apps com React. Podemos usar código JavaScript puro. Mas seu uso tem suas vantagens:

1. É mais fácil escrever JSX que JavaScript puro. É tão simples quanto abrir e fechar tags XML. Eis um exemplo de JSX:

<div>
<p>Welcome to TutsPlus</p>
</div>

Eis o código React compilado:

"use strict";

React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

2. JSX garante legibilidade e manutenabilidade mais fáceis.

3. JSX otimiza o código ao compilar, executando mais rápido se comparado a código JavaScript equivalente.

Iniciando

Aprendamos mais, escrevendo um pouco de JSX e renderizando-o no navegador. Para começar a criar app em React, criemos um arquivo index.html simples com a estrutura a seguir:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
	<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

	<script type="text/babel">
	    // JSX code would be here
	</script>
</head>
<body>
	<div id="container">

	</div>
</body>
</html>

Como visto no código acima, referenciamos os scripts react e react-dom na página index.html. Também referenciamos o script babel, que transforma código JSX em chamadas de função do react. Por exemplo, consideremos o código JSX a seguir:

var grp = <div>
  <p>Welcome to TutsPlus</p>
</div>;

Babel transformaria o código JSX na função react requerida, como:

var grp = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

Criando Componentes React Usando JSX

Criemos um componente React que mostre uma mensagem de boas vindas. Eis como o código ficaria:

<script type="text/babel">
	var Message = React.createClass({
		render:function(){
			return <h1>Welcome to TutsPlus</h1>
		}
	});

	ReactDOM.render(<Message />,document.getElementById('main'));
</script>

Message é um componente react que retornar o código JSX acima e que é compilado numa função React usando Babel. Usando ReactDOM.render, renderizamos o componente dentro do elemento div main.

Salve o documento acima e abra o arquivo index.html no seu navegador, e poderá ver a mensagem Welcome to TutsPlus.

Passando Atributos para Componentes

Na maior parte do tempo, é preciso passar dados para os componentes, que são avaliados, modificados e renderizados. Vejamos como podemos passar atributos para nossos componentes mostrarem os dados.

Suponhamos que queremos passar um nome para o componente Message mostrá-lo na mensagem. Primeiro, adicionaremos o atributo customizado ao componente.

ReactDOM.render(<Message name="Roy" />,document.getElementById('main'));

O atributo passado pode ser lido dentro da função render do componente usando this.props na chave do componente. Modifiquemos o código como abaixo:

var Message = React.createClass({
	render:function(){
		return <h1>Welcome to TutsPlus, {this.props.name}</h1>
	}
});

Salvemos as mudanças, vejamos o arquivo index.html e poderemos ver a mensagem.

Welcome to TutsPlus, Roy

Criando um Componente React do Google Maps com JSX

Agora que somos familiarizados com JSX e já criamos componentes React usando JSX, tentemos criar um componente para mostrar um mapa do Google Maps.

Comecemos adicionando a referência à API do Google Maps no index.html.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Crie um componente MyMap como abaixo:

var MyMap = React.createClass({
    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

ReactDOM.render(<MyMap />,document.getElementById('main'));

Adicionemos um método chamado componentDidMount no componente React e dentro dele definamos variáveis maps, como visto abaixo:

var MyMap = React.createClass({

    componentDidMount: function() {

      var latLong = new google.maps.LatLng(-47.888723, 444.675360);

      var options = {
              zoom: 2,
              center: latLong
          },
          map = new google.maps.Map(ReactDOM.findDOMNode(this), options),
          marker = new google.maps.Marker({
          map:map,
          animation: google.maps.Animation.BOUNCE,
          position: latLong
      });
    },

    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

O método componentDidMount é invocado imediatamente após a renderização inicial e os objetos mapas são inicializados dentro desse método. ReactDOM.findDOMNode encontra uma referência ao nodo DOM do componente e cria o objeto mapa. marker foi defino para configurar as propriedades do marcador como, map, position e animation.

Tentemos renderizar o componente dentro da div #main.

ReactDOM.render(<MyMap />,document.getElementById('main'));

Salvando as mudanças acima e abrindo index.html, podemos ver ver o Google Maps em ação.

Resumindo

Nesse tutorial, vimos uma introdução básica ao React e JSX. Vimos como criar componentes React usando JSX e também criamos um componente React para Google Maps. Nos próximos tutorias, focaremos em mais funcionalidades do React.

O código do tutorial está disponível no GitHub.

Você já criou algum componente React? Gostaríamos de ouvir sobre sua experiência. Deixe suas ideias nos comentários abaixo.