Começando com React

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

MVC é um paradigma muito popular em desenvolvimento web e estêve ao redor por muito tempo. O React framework é uma parte poderosa do trindade que é o Model-View-Controller, porque concentra-se puramente no View sozinho. React é escrito em JavaScript e criado por equipes de desenvolvimento do Facebook e Instagram.

React está sendo usado em tudo através da web para criar aplicativos web rápida que são fáceis de manter devido à forma como é feita a estrutura na View do React framework.

O React pode fazer?

Construção rápida, ágil, isomórfica de web apps, agnósticas do framework. React não faz nenhuma suposições sobre as tecnologias de stack.
Manipulação de Virtual DOM fornece um modelo de programação simples, que pode ser processado no navegador, no servidor ou desktop com React Native.
As ligações de fluxo de dados com React são concebidas como um fluxo de dados unidirecional reativa. Isto reduz os requisitos de clichê e é mais fácil de trabalhar do que os métodos tradicionais.

Hello World

Para começarmos, aqui está um exemplo simples de React retirado os exemplos oficiais:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

Este exemplo irá processar 'Hello John' em um container de <div>. Tome conhecimento da sintaxe de XML/HTML que é usado nas linhas 3 e 8. Isto é chamado JSX.

O que é JSX?

JSX é uma sintaxe XML/HTML que é usada para processar HTML de dentro do código JavaScript. React transforma JSX nativa JavaScript para o navegador, e com as ferramentas fornecidas, você pode converter código HTML dos seus sites existentes em JSX!

JSX facilita código-conviver como se sente assim como escrever HTML nativo, mas de dentro JavaScript. Combinado com Node, isto faz para um fluxo de trabalho muito consistente.

Com JSX não é necessário usar React — você pode apenas usar JS simples — mas é uma ferramenta muito poderosa que torna mais fácil para definir estruturas de árvore com e atribui, então eu recomendo o seu uso.

Para processar uma tag HTML em reagir, basta usar nomes de marca minúscula com alguns JSX da seguinte forma:

1	//className is used in JSX for class attribute
2	var fooDiv = <div className="foo" />;
3	// Render where div#example is our placeholder for insertion
4	ReactDOM.render(fooDiv, document.getElementById('example'));

Instalando o React

Existem várias maneiras de usar o React. A maneira recomendada oficialmente é da npm ou Facebook CDN, mas além disso você pode clonar de git e construir o seu próprio. Também você pode usar o starter kit ou economizar tempo com um gerador de scaffolding do Yeoman. Vamos cobrir todos esses métodos para que você tenha uma compreensão completa.

Usando o Facebook CDN

Para a maneira mais rápida de ir embora, só incluem as bibliotecas React e React Dom do fb.me CDN como segue:

1	<!-- The core React library -->
2	<script src="https://fb.me/react-0.14.0.js"></script>
3	<!-- The ReactDOM Library -->
4	<script src="https://fb.me/react-dom-0.14.0.js"></script>

Instalação via NPM

O manual do React recomenda o uso de React com um sistema de módulo de CommonJS como Browserify ou Webpack.

O manual do React também recomenda usar os pacotes npm React e React-dom. Para instalar estas no seu sistema, execute o seguinte no prompt de terminal bash dentro do diretório do projeto, ou criar um novo diretório e cd para ele primeiro.

1	$ npm install --save react react-dom
2	$ browserify -t babelify main.js -o bundle.js

Agora você será capaz de ver a instalação de React dentro do diretório node_modules.

Instalação via Git

Dependências

Você precisa ter Node v4.0.0+ e npm v2.0.0+. Você pode verificar sua versão do Node com node version e npm com npm version

Atualizando o Node via NVM

Eu recomendo usar o nvm - gerenciador de versão Node para atualizar e selecione sua versão do Node. É fácil de adquirir nvm simplesmente executando:

1	curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh \| bash

Este script clona o repositório nvm para ~/.nvm e adiciona a linha fonte para seu perfil (~ /. bash_profile, ~/.zshrc ou ~ /. Profile).

Se você deseja instalar manualmente nvm você pode fazer isso através do git, com:

1	git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

Para ativar o nvm com esse método, você precisa de fonte shell com:

1	. ~/.nvm/nvm.sh

Nota: Adicione esta linha ao seu ~ /. bashrc, ~ /. Profile ou ~/.zshrc respectivamente arquivos para tê-lo automaticamente originados no login.

Usando o NVM

Com nvm agora instalado, pode obter qualquer versão do Node que exigimos e pode verificar a lista de versões instaladas com node list e os disponíveis com node ls-remote. Precisamos de uma versão superior 4.0.0 para trabalhar com a React.

Instalar a versão mais recente e defini-lo como a versão padrão com o seguinte:

$ nvm install 4.2.1
$ nvm alias default 4.2.1
default -> 4.2.1 (-> v4.2.1)
$ nvm use default
Now using node v4.2.1 (npm v2.14.7)

Node é atualizado e npm é incluído. Agora você está pronto para continuar com a instalação.

Desenvolva React a partir do código Git

Clone do repositório com git em um diretório chamado react em seu sistema com:

1	git clone https://github.com/facebook/react.git

Depois de ter clonado o repositório, agora você pode usar grunt para desenvolver React:

1	# grunt-cli is needed by grunt; you might have this installed already but lets make sure with the following
2	$ sudo npm install -g grunt-cli
3	$ npm install
4	$ grunt build

Neste ponto, um diretório build/ foi preenchido com tudo que você precisa usar o React. Dê uma olhada no diretório /examples para ver alguns exemplos básicos de trabalhar!

Usando o Starter Kit

Primeiro baixe o starter kit.

Extraia o zip e na raiz, crie um helloworld.html, adicionando o seguinte:

<!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>

Neste exemplo, React usa Babel para transformar o JSX em JavaScript simples através do <script type="text/babel">.

Usando um arquivo JavaScript separado

Criar um novo arquivo no src/helloworld.js e coloque o seguinte código dentro dele:

1	ReactDOM.render(
2	<h1>Hello, world!</h1>,
3	document.getElementById('example')
4	);

Agora tudo que você precisa fazer é referência no seu HTML, então abra o helloworld.html e carregar o script que você criou usando uma tag script com um atributo de tipo de texto/babel, assim:

1	<script type="text/babel" src="src/helloworld.js"></script>

Atualize a página e você verá o helloworld.js sendo processado pelo babel.

Nota: Alguns navegadores (por exemplo Chrome) falhará carregar o arquivo, a menos que é servido através de HTTP, então certifique-se você estiver usando um servidor local. Eu recomendo o projeto browsersync.

Transformação Offline

Você também pode usar a linha de comando (CLI) para transformar seu JSX usando as ferramentas de linha de comando de babel. Isto é facilmente adquirido através do comando npm:

1	$ sudo npm install --global babel

O --global ou -g instalará o pacote babel globalmente para estar disponível em todos os lugares. Esta é uma prática muito boa com o uso de Node para vários projetos e ferramentas de linha de comando.

Agora que babel é instalado, vamos fazer a tradução do helloworld.js que acabamos de criar nas etapas anteriores. No prompt de comando do diretório raiz onde você descompactou o starter kit, execute:

1	$ babel src --watch --out-dir build

Agora o arquivo build/helloworld.js será ser gerado automaticamente sempre que você fizer uma alteração! Se você estiver interessado, leia a documentação de Babel CLI para obter um conhecimento mais avançado.

Agora que babel gerou o build/helloworld.js, que contém apenas JavaScript, atualize o HTML sem quaisquer marcas de script habilitado para babel.

<!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>
    <!-- No need for Babel! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

Então, recapitulando, com babel que podemos carregar JSX diretamente dentro de uma tag de script via o atributo do tipo de texto/babel. Isto é bom para fins de desenvolvimento, mas para que a produção, nós podemos fornecer um arquivo JavaScript gerado que pode ser armazenado em cache na máquina local do usuário.

Geração desta cópia é feita na linha de comando, e como se trata de uma tarefa repetitiva eu recomendo automatizando o processo através de --watch. Ou você pode ir um passo além e utilizam webpack e browsersync para automatizar totalmente o seu fluxo de trabalho de desenvolvimento. Para fazer isso no caminho mais fácil possível, nós podemos automatizar a instalação de um novo projeto com um gerador Yeoman.

Instalando com Scaffolding Yeoman

Yeoman é uma ferramenta muito útil para começar projetos rapidamente e com uma configuração de fluxo de trabalho e a ferramenta ideal. A idéia é para deixá-lo passar mais tempo no desenvolvimento do que a configuração da área de trabalho do projeto e para minimizar tarefas repetitivas (estar ciente disto — RSI é a razão número um codificadores parem de codificação). Como prática recomendada, economizando tempo com ferramentas implementar D.R.Y (Don't Repeat Yourself) no seu dia a dia irá aumentar a sua saúde e eficiência e deixá-lo passar mais tempo fazendo o código real, ao invés de configuração.

Há um monte de andaimes lá fora, chegando em muitos sabores para diferentes escalas de projeto. Para este primeiro exemplo estaremos usando a react-fullstack scaffolding do Yeoman; Você pode ver uma demonstração de como se parece o resultado final.

Nota: Esta é uma configuração fullstack, que provavelmente é um exagero para os projetos de pequenos. A razão pela qual que eu seleciono este andaime é dar-lhe um ambiente totalmente de pronto, assim você pode ver como o starter kit apura em um aplicativo maior. Há um cabeçalho e rodapé, e você pode ver onde um login de usuário e registrar apresentam vontade ir, embora eles não são codificados, ainda no exemplo.

Uso

Para usar o yeoman, primeiro instale se você não tiver gulp, bower e grunt-cli, instale assim:

1	$ sudo npm install -g yo bower grunt-cli gulp

Agora instale o React scaffolding com:

1	$ sudo npm install -g generator-react-fullstack

Agora crie um diretório para seu projeto e use cd para acessar:

1	$ mkdir react-project
2	$ cd react-project

Finalmente, use o yo com o React-fullstack scaffolding para criar seu aplicativo react dentro do diretório:

1	$ yo react-fullstack

Yeoman agora irá criar os diretórios e arquivos necessários; Você será capaz de ver atualizações sobre isso na linha de comando.

Com os andaimes agora configurado, vamos construir o nosso projecto:

1	$ npm start

Por padrão, começamos no modo de depuração, e para ver é só adicionar -- release, por exemplo, npm run start -- release

Você verá agora o compilação inicial e também inicializando webpack. Depois disso, você verá a saída webpack dizendo que você verá informações detalhadas sobre a compilação e as URLs para acessar.

Acesse seu aplicativo através de URLs listados no final da saída, com o seu navegador por padrão no http://localhost:3000/. Para acessar a interface de administração de sincronização do navegador, vá para http://localhost:3001.

Nota: Você pode precisar abrir a porta no seu servidor para a porta do desenvolvimento. Para ubuntu / debian usuários com ufw, faça o seguinte:

1	$ ufw allow 3001/tcp
2	$ ufw allow 3000/tcp

Convertendo seu site existente para JSX

Facebook oferece uma ferramenta on-line se você precisa converter só um trecho do seu HTML em JSX.

Para maiores requisitos há uma ferramenta no npm por isso chamado htmltojsx. Baixe com:

1	npm install htmltojsx

Use via linha de comando é tão simples como:

1	$ htmltojsx -c MyComponent existing_code.htm

Por que o htmltojsx é um módulo do nó, você também pode usá-lo diretamente no código, por exemplo:

var HTMLtoJSX = require('htmltojsx');
var converter = new HTMLtoJSX({
  createClass: true,
  outputClassName: 'HelloWorld'
});
var output = converter.convert('<div>Hello world!</div>');

Exemplo de lista

Vamos começar a trabalhar na criação de uma lista de tarefas básicas para que possa ver como funciona o React. Antes de começarmos, por favor, configure sua IDE. Eu recomendo usar o Atom.

No prompt do bash, instale os línters para React via apm:

1	apm install linter linter-eslint react
2	Installing linter to /Users/tom/.atom/packages ✓
3	Installing linter-eslint to /Users/tom/.atom/packages ✓
4	Installing react to /Users/tom/.atom/packages ✓

Nota: a versão mais recente do linter-eslint estava fazendo meu MacBook Pro muito lento, então eu desativei.

Depois disso, podemos ir andando sobre a criação de uma lista básica dentro do andaime que fizemos na etapa anterior com Yeoman, para te mostrar um exemplo de trabalho de fluxo de dados.

Certifique-se de seu servidor é iniciado com npm start e agora vamos começar a fazer algumas mudanças.

Em primeiro lugar, existem três arquivos de modelo jade fornecidos neste scaffolding. Nós não usá-los para o exemplo, então comece por limpar o arquivo index.jade é apenas um arquivo vazio. Uma vez que você salvar o arquivo, verifique seu navegador e terminal de saída.

A atualização é exibida instantaneamente, sem qualquer necessidade de atualizar. Esta é a configuração de webpack e browsersync que o scaffolding proporcionou a entrada em vigor.

Em seguida, abra o diretório de componentes e criar um novo diretório:

1	$ cd components
2	$ mkdir UserList

Agora, dentro do diretório de UserList, crie um arquivo package.json com o seguinte:

{
  "name": "UserList",
  "version": "0.0.0",
  "private": true,
  "main": "./UserList.js"
}

Além disso, ainda dentro do diretório de UserList, crie o arquivo UserList.js e adicione o seguinte:

//Import React
import React, { PropTypes, Component } from 'react';

//Create the UserList component
class UserList extends Component {

  //The main method render is called in all components for display
    render(){
      
      //Uncomment below to see the object inside the console
      //console.log(this.props.data);

      //Iterate the data provided here 
      var list = this.props.data.map(function(item) {
        return <li key={item.id}>{item.first} <strong>{item.last}</strong></li>
      });

	  //Return the display
      return (
        <ul>
          {list}
        </ul>
      );
    }
}

//Make it accessible to the rest of the app
export default UserList;

Agora, para terminar, precisamos adicionar alguns dados para esta lista. Vamos fazer isso dentro de components/ContentPage/ContentPage.js. Abra esse arquivo e definir o conteúdo a ser da seguinte forma:

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes, Component } from 'react';
import styles from './ContentPage.css';
import withStyles from '../../decorators/withStyles';
import UserList from '../UserList'; //Here we import the UserList component we created

@withStyles(styles)

class ContentPage extends Component {

  static propTypes = {
    path: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
    title: PropTypes.string,
  };

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  render() {
  
  	//Define some data for the list
    var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

    this.context.onSetTitle(this.props.title);

    return (
      <div className="ContentPage">
        <div className="ContentPage-container">
          {
            this.props.path === '/' ? null : <h1>{this.props.title}</h1>
          }
          <div dangerouslySetInnerHTML={{__html: this.props.content || ''}} />
			
          //Use the UserList component as JSX
          <UserList data={listData} />

        </div>
      </div>
    );
  }

}

export default ContentPage;

Agora, quando salvamos, reconstruirá a webpack e browsersync irá exibir as alterações no seu navegador. Dê uma olhada no código-fonte para ver como ela foi processada.

Resumo

Nós usamos o Yeoman scaffolding gerador react-fullstack para iniciar um aplicativo de web de reagir baseado o starter kit. Para uma explicação adicional sobre o layout de arquivo e diretório, confira o readme no repositório git reagir starter kit.

Daqui nós editado o arquivo index.jade para que ele foi anulado para fora e começou a criar nossa própria visualização, fazendo um novo componente chamado UserList.

Dentro components/UserList/UserList.js, definimos como será processada a lista com:

1	var list = this.props.data.map(function(item) {
2	return <li key={item.id}>{item.first} <strong>{item.last}</strong></li>
3	});

Aqui é importante notar que reagir requer tudo iteradas itens para ter um identificador exclusivo fornecido sob o atributo key.

Para exibir a lista podemos incluí-lo dentro do arquivo ContentPage.js com import UserList from '.../UserList'; e definir alguns dados de teste com:

    var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

Dentro ContentPage.js, chamamos o componente UserList com o JSX < UserList dados = {listData} / >.

Agora o componente UserList pode acessar o atributo data através de this.props.data.

Qualquer momento que podemos passar um valor com um atributo de um componente, ele pode ser acessado via this.props. Você também pode definir o tipo de dados que devem ser fornecidos usando a variável estática de propTypes dentro de sua classe.

Estendendo Componentes vs. Sintaxe React.createClass

Finalmente, um ponto importante a observar é que este exemplo fez uso de componentes estendidas. Isso tem um monte de benefícios para semanticamente estruturar seu código. Mas você pode desejar acessar uma abordagem mais de esqueleto, como fazem muitos outros exemplos.

Então em vez de classe ComponentName estende o Compent que você viu antes neste tutorial, você criar uma classe React com a seguinte sintaxe por exemplo:

var MyListItem = React.createClass({
  render: function() {
    return <li>{this.props.data.text}</li>;
  }
});
var MyNewComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
           return <MyListItem key={result.id} data={result}/>;
        })}
      </ul>
    );
  }
});

Bem, isso envolve-nos para esta introdução para reagir. Agora você deve ter uma boa compreensão das seguintes opções:

Obtendo o React
como usar Babel com React
usando JSX
Criando um componente através de métodos estendidos
usando seu componente e passando dados

Nas próximas partes, vamos discutir como usar JSX ainda mais, como trabalhar com um banco de dados como uma fonte de dados persistentes e também como reagir funciona com outras tecnologias de web populares como PHP, Rails, Python e .NET.