Participe da Maratona Behind the Code! A competição de programação que mais te desafia! Inscreva-se aqui

React: crie componentes de UI de alto desempenho, que podem ser mantidas

O JavaScript — suportado por todos os navegadores modernos e, indiscutivelmente, a verdadeira linguagem de programação nativa da web — tem acesso direto a toda a riqueza que a web “enquanto plataforma” oferece. Cada vez mais, os projetos JavaScript complexos têm saído das mãos de um único codificador solitário para envolver grandes equipes de desenvolvedores colaborativos. Essa mudança traz com ela uma gama de problemas relacionados. O trabalho em código baseado em hackers rápidos fica impossível de ser compreendido e mantido por outras pessoas. Um novato pode demorar um bom tempo para começar a acompanhar a velocidade de um sistema complexo. Um código base em constante ampliação não consegue ser reutilizado entre a equipe em grande escala. E geralmente ocorrem anomalias de desempenho inesperado e instável em sistemas em tempo real.

Ninguém está mais familiarizado com esses problemas do que as redes sociais vanguardistas, que precisam entregar UIs da web complexas e ainda competitivas a milhões de pessoas para uso diário. Em 2013, o Facebook/Instagram lançaram o projeto React — uma biblioteca de construção de componente de UI — como software livre, fornecendo uma visão rápida de como a empresa lida com esses problemas cada vez maiores. O React e as melhores práticas associadas foram adotados com entusiasmo pelos desenvolvedores JavaScript — que, na verdade, também se encontram passando pelos mesmos problemas.

Este tutorial apresenta o React, explica como ele funciona, descreve as melhores práticas indicadas e leva à codificação rapidamente com exemplos. (Consulte Download para obter o código de amostra). Ao concluir, você será capaz de criar seus próprios componentes React reutilizáveis ou montar novos componentes com base em centenas de componentes de software livre de contribuição da comunidade.

React para criar componentes de UI reutilizáveis

Você especifica de forma declarativa a hierarquia dos componentes de UI da web e envia-a ao DOM virtual do React. Depois disso, o React cuidará da sincronização da UI com o DOM real do navegador, no momento apropriado.

O React é entregue como uma biblioteca JavaScript com um compilador JSX e as ferramentas do desenvolvedor associadas. O React facilita a criação de componentes de visualização de UI reutilizáveis, de alto desempenho, que podem ser compostos formando modernas UIs da web. Seguindo as melhores práticas indicadas, é possível criar esses componentes de uma forma em que eles possam ser mantidos e reutilizados.

Para otimizar o desempenho do tempo de execução, os componentes React são primeiro renderizados em um DOM virtual gerenciado, como é mostrado na Figura 1.

Operações do React

Gráfico demonstrando operaçoes React

Você especifica de forma declarativa a hierarquia dos componentes de UI da web e envia-a ao DOM virtual do React. Depois disso, o React cuidará da sincronização da UI com o DOM real do navegador, no momento apropriado. A implementação do DOM virtual do React é autocontida e não depende de um navegador. Ela também pode ser usada para renderização do lado do servidor (consulte Recursos). O DOM virtual executa um diff otimizado de seu estado interno com relação aos DOMs dos navegadores e executa as atualizações mínimas necessárias para manter a UI consistente.

Essa abordagem de modo retido (Consultea barra lateral Operações no modo retido elimina uma grande variedade de problemas de desempenho associados à modificação direta de elementos DOM do navegador, com uma transição visual de cada vez (como na operação de bibliotecas de componentes de UI comuns como jQuery UI).

Diferentemente de outras bibliotecas semelhantes, o React não impinge o estilo Model-View-Controller (MVC) convencional de construção e gerenciamento de estado de UI. Em vez disso, o React concentra-se unicamente na construção de visualizações, e o projeto tem compartilhado algumas opiniões sobre por que o MVC talvez não seja o melhor para a criação de UIs da web complexas (Consultea barra lateral Pontos fracos do MVC para UIs modernas e complexas). No entanto, nada no React impede o uso da construção MVC. A primeira experiência de muitos desenvolvedores com o React envolve a integração de um novo código na camada de visualização de grandes projetos existentes baseados em MVC.

Motivações para experimentar uma outra biblioteca de UI JavaScript

Algumas características desejáveis do React incluem:

  • O React é fácil de aprender. Se você tiver conhecimento de JavaScript, poderá começar a trabalhar com a biblioteca rapidamente.
  • As melhores práticas comprovadas recomendam um conhecimento de construção de componente que possa fazer com que grandes códigos base sejam gerenciáveis e possam ser mantidos.
  • O React trabalha com a maioria dos carregadores e conjuntos de ferramentas — AMD, CommonJS ou globais, gulp, bower, npm, browserify, webpack, grunt — para satisfazer todos os anseios dos desenvolvedores JavaScript.
  • A adoção do React não é uma proposta arriscada de “tudo ou nada”. A biblioteca funciona bem com a maioria dos códigos base existentes (até mesmo os MVC anteriores) e integra-se bem com as estruturas UI existentes (consulte Recursos).
  • O design do React combina perfeitamente com as arquiteturas de backend assíncronas para acomodar tecnologias futuras.
  • O tempo de execução do React concentra-se no desempenho e ainda pode ser expandido para outras plataformas de destino (via React Native), incluindo iOS e Android.

Unificando a descrição e a lógica de UI declarativa com JSX

JSX é um transformador e compilador que aceita uma sintaxe JavaScript estendida. O JSX converte notações semelhantes a HTML estendida com esta:

<div>
     <MyLabel  text={TextLabel} />
     <MyTextfield />
     <MyButton textlabel='OK' />
</div>

…em chamadas de API JavaScript do React com esta:

React.createElement("div", null,
     React.createElement(MyLabel, {text: TextLabel}),
     React.createElement(MyTextfield, null),
     React.createElement(MyButton, {textlabel: "OK"}))

A notação familiar do JSX, semelhante a HTML, simplifica muito a codificação e a manutenção dos componentes React. Essa simplificação é evidente, principalmente, para declarar relacionamentos de componentes profundamente aninhados.

O JSX permite colocalizar a lógica da UI juntamente com a descrição estrutural relacionada em único arquivo, o que ajuda a aumentar a produtividade e reduzir erros em projetos grandes. Com outras estruturas, pode ser necessário sincronizar um número de arquivos até três vezes maior: arquivo de modelo, arquivo de código JavaScript do manipulador e a descrição HTML declarativa.

Implementando JSX

O JSX pode ser executado no navegador ou de forma independente. O transformador no navegador ajuda no desenvolvimento porque permite visualizar os resultados instantaneamente após a modificação do código JSX. Para produção, é realmente interessante incorporar o transformador independente na cadeia de ferramentas de desenvolvimento para obter o melhor desempenho possível.

Todos os exemplos deste tutorial (Consulte Download) usam o transformador no navegador por questão de simplicidade. O primeiro exemplo (example1) busca tanto o transformador React quanto o JSX a partir de uma rede de entrega de conteúdo (CDN) e é a maneira mais fácil de iniciar a execução (colocar os arquivos atrás de um servidor da web e acessar suas URLs):

<html lang="en">
<head>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="example1.jsx"></script>
</head>
<body>

O example2 e o example3 usam o gerenciador de pacotes bower para instalar o React, eles se referem às cópias buscadas localmente do transformador JSX no navegador . Por exemplo, o example2.html busca os dois arquivos por meio de:

<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

Nos dois casos, é possível experimentar com React, modificando os arquivos JSX e atualizando o navegador para ver o resultado.

Criando componentes React customizados

Agora, crie rapidamente um componente com o React, usando o código no example1.jsx:

var MyTextfield = React.createClass({
  render: function() {
    return <input type='text' />;
  }
});

Pronto.

Este componente React customizado simples, mostrado juntamente com outros componentes React na Figura 2, renderizam um campo de entrada não controlado, agrupando um elemento <input> HTML subjacente. Agora, esse componente pode ser usado como <MyTextfield>. Observe que os nomes de elementos HTML nativos começam com uma letra minúscula e os nomes (classes) de componentes React customizados começam com uma letra maiúscula.

Componentes React <MyTextfield>, <MyLabel> e <MyButton>

Página web demonstrando gerador de tabela

Props nos componentes React e nas expressões JavaScript em JSX

O segundo componente customizado no example1 é <MyButton>:

var MyButton = React.createClass({
  render: function() {
    return <button>{this.props.textlabel}</button>;
  }
});

<MyButton> renderiza um elemento <button> HTML customizado. Esse componente demonstra as propriedades recebidas (chamadas de props no jargão do React). As props são argumentos recebidos para um componente, exatamente como os atributos em uma tag HTML. O componente pode acessar esses atributos para customizar sua renderização por meio de this.props. O suporte do JSX para avaliar expressões JavaScript sequenciais por meio de {_expressão JavaScript_} pode ser usado para renderizar valores de propriedades.

Na Figura 2, a instância <MyButton> é parametrizada com OK em sua propriedade textlabel: <MyButton textlabel='OK' />.

Compondo componentes React

A composição é a base da reutilização de componentes de UI. O React permite compor facilmente os componentes React existentes, juntamente com elementos HTML nativos, para desenvolver componentes mais complexos.

No example1, os componentes React customizados — <MyTextfield>, <MyButton> e <MyLabel> — estão reunidos na UI. O JSX facilita e simplifica isso:

React.render(
  <div>
    <MyLabel  text={TextLabel} />
     <MyTextfield />
     <MyButton textlabel='OK' />
 </div>,
  document.getElementById('container')
);

A chamada API anterior renderiza os componentes reunidos em um elemento <div> com o ID container — dentro do DOM virtual.

Função como propriedade e SyntheticEvent do React

Os atributos em elementos geralmente são parametrizados com funções de retorno de chamada, em vez de simples tipos de dados. Por exemplo, provavelmente você tem experiência em configurar o atributo onClick de um elemento <button> HTML. A mesma técnica pode ser aplicada aos componentes React. No segundo exemplo, example2.jsx, o componente React <MyButton> usa o retorno de chamada do manipulador onClick como uma de suas propriedades:

var MyButton = React.createClass({
  _buttonClicked:  function(e) {
    if (this.props.onClick) {
        this.props.onClick(e)
    }
  },
  render: function() {
    return
     <button onClick={this._buttonClicked}>
             {this.props.textlabel}</button>;
  }
});

Ao clicar no botão, o evento onClick do elemento HTML <button> é disparado e o React encaminha o evento à implementação _buttonClicked() de <MyButton>.

É importante saber que _buttonClicked() é chamado não com um evento do DOM do navegador nativo, mas com uma instância do próprio objeto SyntheticEvent do React, entre navegadores, compatível com W3C. SyntheticEvent tem um comportamento uniforme entre diferentes navegadores e agrupa o evento bruto real do DOM. (O evento do DOM agrupado ainda permanece acessível por meio da propriedade nativeEvent, consulte Recursos com um link para mais informações sobre SyntheticEvent).

Em _buttonClicked(), o código assegura que a própria propriedade onClick de <MyButton> seja configurada e, em seguida, encaminhe SyntheticEvent para esse manipulador de eventos.

Mantendo o estado nos componentes React

Alguns componentes precisam manter um estado interno a ser usado durante a renderização. Por exemplo, um componente de caixa de seleção requer um estado para lembrar que ele foi selecionado.

Em example2.jsx, o componente <MyTextfield> mantém um estado interno (uma variável chamada dados) que sempre reflete o valor numérico atual inserido no campo de texto. Para fornecer um valor inicial para uma variável de estado, implemente getInitialState(). Em <MyTextfield >, dados é inicializado para 1:

var MyTextfield = React.createClass({
  getInitialState: function() {
     return {
      data: '1'
     };
  },
...

O estado do componente React fica acessível via this.state. E this.state.data sempre é usado para renderizar o valor do elemento <input> subjacente:

render: function() {
  return <input type='text' onChange={this._entryChanged}
                value={this.state.data} />;
}

Este exemplo é um padrão típico para construir componentes React: os valores de estado e prop de um componente são usados para renderizar ou customizar o componente.

Neste caso <MyTextfield>, o elemento <input> subjacente é controlado, porque seu valor sempre é renderizado pelo componente React (em comparação com a versão não controlada do <MyTextfield> no example1).

Experimentando o example2: um gerador de tabela dinâmica

Para assimilar melhor como o <MyTextfield> e o example2 funcionam, experimente o exemplo. Coloque os arquivos do example2 atrás de um servidor da web e acesse example2.html. A Figura 3 mostra o que aparece inicialmente. O número de linhas está configurado como 1 porque o valor inicial de this.state.data foi 1.

Componente gerador de tabela dinâmica customizado

Página web demonstrando gerador de tabela

É possível digitar qualquer valor de 1 a 9 no campo de texto. Ele não aceita nada além disso. Ao clicar no botão OK, o número especificado de linhas é gerado na tabela mostrada no lado direito. A Figura 4 mostra 9 linhas geradas.

Gerador de tabela mostrando nove linhas

Página web demonstrando gráfico de barras

Ao inserir valores no campo de texto, o evento onChange de <input> é disparado e o React roteia o evento ao manipulador _entryChanged() do <MyTextfield>:

_entryChanged: function(e) {
    var val = e.target.value;
    var validated = '1';
    if (!(isNaN(val) || (parseInt(val) > 9 ) || (parseInt(val) < 1)))     {
      validated = val;
    }
    this.setState({data: validated});
    if (this.props.onChange) {
      this.props.onChange(validated);
    }
  }

_entryChanged() assegura que o valor inserido seja um número entre 1 e 9 inclusivo. Qualquer valor inserido que não esteja nesse intervalo será configurado como 1. Em seguida, _entryChanged() atualiza o estado (dados) usando this.setState(). Se dados for configurado como um novo valor, o conteúdo do campo de texto será atualizado na próxima vez em que render() for chamado pelo React. Como resultado, o conteúdo de <MyTextfield> sempre estará sincronizado com a variável de estado data.

Este comportamento é outro padrão observado com frequência nos componentes React: os manipuladores de evento modificam as variáveis de estado, que alteram a aparência do componente renderizado.

Um componente React <DynamicList> é responsável por renderizar as linhas da tabela (consulte o código-fonte para obter detalhes), dependendo de uma propriedade rows que é fornecida. Cada célula na tabela é uma instância de <MyTableCell> que agrupa um elemento <input> que foi desativado.

Por último, mas não menos importante, vem um componente <ListCreator> que reúne <MyTextfield>, <MyButton> e <DynamicList> para criar a UI final. Quando a instância <MyButton> é clicada, o manipulador _okClicked() copia o valor de seu estado entre dados (que aciona o valor em <MyTextfield>) e rows (usado para renderizar linhas em <DynamicList>). Essa atualização de estado no manipulador de eventos faz com que <DynamicList> renderize suas linhas exibidas.

Otimização de renderização com shouldComponentUpdate e na PureRenderMixin

A renderização no DOM virtual já é rápida. Mesmo assim, é sempre bom evitar renderizar as partes da UI que não se alteram entre as renderizações.

O React tem um retorno de chamada chamado shouldComponentUpdate que qualquer componente pode implementar. Um componente pode evitar a renderização desnecessária ao retornar false — se ele souber com certeza, que nenhuma mudança ocorreu desde a renderização anterior. Por padrão, ele sempre retorna true.

O componente <ListCreator> no example2 usa um complemento PureRenderMixin do React:

var ListCreator = React.createClass({
  mixins: [React.addons.PureRenderMixin],
  ...

A combinação inclui uma implementação de shouldComponentUpdate que faz uma comparação geral de todos os valores de props e estados anteriores com os atuais. Se ele não detectar mudanças, retornará false — eliminando a renderização desnecessária. Se a aparência de um componente for totalmente dependente dos valores de props e estados, como em <ListCreator>, a combinação pode ajudar a otimizar o desempenho da renderização.

Usando componentes React reutilizáveis de terceiros

A vantagem de uma grande comunidade React ativa é a disponibilidade abundante de componentes React prontos para utilização. Uma procura informal de repositórios de software livre, como GitHub, retorna centenas de componentes para exploração.

No example3, um componente React de desenho de gráfico de barras de terceiros (react-bar-chart, criado por Mateus Zitelli) é usado para criar a UI. Esse exemplo exibe estatísticas de visitas de página de um website, categorizadas por faixa etária. A Figura 5 mostra a UI.

Um componente de gráfico de barras atualizável

Fluxo de dados

É possível editar cada uma das células na tabela à esquerda (clique na célula ou no campo de texto), e o gráfico de barras será atualizado imediatamente para mostrar o valor atualizado.

A Tabela 1 descreve os componentes customizados no example3 e pode agir como um guia para você explorar sozinho o código-fonte do example3. Os componentes apresentam rótulos distintos na Figura 5.

Componentes React no exemplo de gráfico de barras atualizável
Componente React Descrição Estado/props importantes
<MyTableCell> Uma célula de tabela atualizável. Combina um <input> controlado com um <button>. A função <input> é desativada e o <button> é configurado como {display: none} quando o valor da célula não está sendo editado. editing: controla se a célula está sendo editada. dados: sempre reflete o valor exibido na célula.
<MyTable> Tabela de várias linhas contendo uma instância de <MyTableCell> em cada linha. Stateless. dados é uma prop, uma matriz de hash, contendo text e value para preencher cada linha. onUpdate é uma prop de retorno de chamada, disparada após uma sessão de edição, que encaminha as informações alteradas da célula.
<MyBarChart> Uma visualização do controlador. Renderiza uma instância de <BarChart> por meio do componente React de terceiros. Faz interface com o armazenamento Flux para receber uma notificação quando as estatísticas do site são alteradas. stats: uma matriz de hash, contendo text e value. Fornece dados para o gráfico.
<MyTableWrapper> Uma visualização do controlador. Faz interface com o dispatcher Flux, envia ação de atualização de sitestats sempre que um valor de célula é modificado na tabela. sitestats: uma matriz de hash, contendo text e value. Controla os valores atuais na tabela.
<EditableChart> Reúne <MyBarChart> e <MyTable> na UI final. Stateless. dados é uma prop que fornece os dados iniciais, buscados em um armazenamento Flux, a serem exibidos nos componentes reunidos.

Acessando elementos renderizados e o DOM físico

A maior parte do código funciona apenas com o DOM virtual. No entanto, algumas situações exigem acesso ao DOM real do navegador. Um exemplo ocorre quando é necessário integrar com bibliotecas existentes como jQuery Mobile (consulte Recursos) e D3. Outro está no manipulador _cellClicked() em <MyTableCell>. Depois que a célula é clicada, ela entra no modo de edição e coloca o foco no elemento <input> do DOM real do navegador. Isso é feito usando uma chamada atrasada para getDOMNode():

setTimeout(function() {
        this.refs.inp.getDOMNode().select();
      }.bind(this), 100);

refs é usado para acessar elementos criados durante a renderização no DOM virtual (semelhante a getElementById() no DOM do navegador).

Transferindo propriedades com atributos de dispersão JSX

Em <MyTableWrapper>, todas as props são transferidas para a instância <MyTable>. No entanto, o valor da prop onUpdate deve ser substituído e apontar para o seu retorno de chamada _dataUpdated. Isso é feito usando a notação de atributos de dispersão JSX:

<MyTable {...this.props} onUpdate={this._dataUpdated}/>

Valores padrão das propriedades

Em <EditableChart>, o valor padrão inicial da prop sitestats é buscado em um armazenamento Flux (Consultea seção Flux: arquitetura ampliada para aplicativos React deste tutorial). Use getDefaultProps para fornecer esse valor padrão inicial. O React armazena o valor em cache para uso subsequente:

getDefaultProps: function() {
    return {
      // initial default value only - cached by React
      sitestats: MockSiteStatsStore.getSiteStats()
    }
}

Definindo o estilo de componentes React

Use CSS regular para definir o estilo do aplicativo. Por exemplo, o example3.css contém o código flexbox do CSS3 para definir o estilo do aplicativo:

.containing{
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 600px;
}

.left-side {
    width: 300px;
    -webkit-flex: none;
    flex: none;
}

.right-side {
    -webkit-flex: 1;
    flex: 1;
}

Observe o uso da prop className em <EditableCell> para especificar a classe CSS (para evitar o conflito de palavra-chave JSX):

<div className="containing">
 <div className="left-side">
   <MyTableWrapper data={this.props.sitestats} />
 </div>
 <div className="right-side">
   ...
  </div>
</div>

Se houver estilos que possam ser alterados de acordo com o estado interno de um componente, também será possível definir esse estilo em JavaScript com a definição de estilo sequencial. <MyTableCell> inclui um <button> nativo com o estilo definido por JavaScript sequencial:

<button onClick={this._okClicked}
  style={this.state.editing? {zIndex: 5}: {display:'none'}}>
    ok</button>

Flux: arquitetura ampliada para aplicativos React

Flux é uma abordagem para estruturar aplicativos que usam componentes React. Ele prescreve uma arquitetura de fluxo de dados unidirecional que pode eliminar os problemas associados às redes MVC interconectadas encontradas em UIs complexas e melhorar a sustentabilidade de longo prazo de uma base de código.

Em poucas palavras, o estado do aplicativo mutável compartilhado usado em uma renderização de componente é enviado por push. Visualizações do controlador (visualizações do proprietário de nível superior — como <MyBarChart> e <MyTableWrapper> no example3 — que gerenciam o estado a ser renderizado pelas subvisualizações do controlador) substituem os controladores tradicionais. As operações de modelo tradicionais agora são executadas pelo roteamento de ações aos armazenamentos de interesse por meio de um dispatcher singleton. Ações são pacotes de dados que declaram a operação a ser executada e seus dados associados. (As chamadas de método fortemente acopladas são transformadas em fluxos de dados fracamente acoplados por ações.) Os armazenamentos e suas interdependências de processamento são manipulados de uma maneira fracamente acoplada por meio do dispatcher. (Os profissionais de padrões de design podem ver semelhanças com os padrões Command and Chain of Responsibility e os engenheiros de sistemas podem estar pensando em marshaling e serialização.)

As visualizações do controlador nunca compartilham o estado do aplicativo diretamente ou indiretamente entre si. Elas registram seus interesses em mudanças de dados nos armazenamentos, e os armazenamentos notificam as visualizações para que elas busquem os dados (e atualizem seus próprios estados gerenciados) quando a mudança ocorre. Esse é o único fluxo de dados nessas visualizações. A Figura 6 ilustra esse fluxo de dados unidirecional.

Fluxo de dados unidirecional no Flux

Gráfico demonstrando fluxo de dados do React

O código do example3 segue levemente o padrão do Flux em construção, com apenas uma implementação de armazenamento mock ocorrendo. <MyBarChart> registra-se em MockSiteStatsStore para obter qualquer atualização de dados. A notificação do armazenamento é a única maneira em que o estado gerenciado do <MyBarChart> pode ser alterado.

Qualquer mudança interativa nos dados feita no <MyTableWrapper> fluirá como uma ação pelo dispatcher ou armazenamento por meio de uma MockSiteStatsAction.update(). Embora os dois componentes estejam lado a lado na mesma UI, eles não compartilham os estados diretamente. O fluxo de dados unidirecional é a partir do <MyTableWrapper> pelo dispatcher, para o MockSiteStatsStore do interesse e, em seguida, por meio de notificações de mudança de volta para o <MyBarChart>.

Não será abordado neste artigo um exame detalhado do padrão de construção de aplicativo Flux. Consulte Recursos para saber mais.

Ferramentas disponíveis para trabalhar com o React

O React Developer Tools é uma extensão útil do navegador Chrome disponível na Chrome web store. Ao depurar com o Chrome Devtools, é possível visualizar a hierarquia de componentes React de um aplicativo em vez da representação mais codificada do DOM do navegador. A Figura 7 mostra como a hierarquia de componentes do example3 é semelhante ao React Developer Tools instalado.

React Developer Tools mostrando a hierarquia de componentes

Códigos no React Developer Tools

Um gerenciador de perfis também está disponível como um complemento para instrumentar o código do React.

No futuro do ecossistema React

A extensão Relay para o Flux e o React Native foram anunciados na conferência do React.js em janeiro de 2015. Até este momento, nenhum foi disponibilizado como software livre.

Relay

O Relay amplia o Flux incluindo a busca de dados do servidor. A principal ideia por trás do Relay é permitir que cada componente React especifique seus próprios requisitos de busca de dados, independentemente. Geralmente, isso se aplica aos dados usados para renderizar o próprio componente. O Relay permitirá a declaração estática do requisito de dados de um componente no mesmo arquivo (JSX) em que a lógica da UI reside. Isso elimina significativamente a confusão visual típica dos arquivos ao analisar aplicativos completos complexos. Ele também permite a verificação imediata de correção e sincronização durante o desenvolvimento, atualizando o navegador após a edição do arquivo JSX.

A tecnologia de ativação por trás do Relay é o GraphQL, uma linguagem de especificação de consulta declarativa composta para dados formatados de forma arbitrária. (O Facebook tem usado o GraphQL em produção há alguns anos.) O GraphQL permite que os componentes de nível superior do React componham os requisitos dos componentes que ele possui — sem depender dos detalhes dos próprios requisitos — e construam uma consulta combinada que pode ser enviada ao servidor.

Os resultados das consultas do GraphQL são armazenados em um armazenamento Flux general common, no qual as visualizações com interesse registrado são notificadas para atualização.

React Native

O React Native substitui o DOM do navegador para a plataforma Android ou iOS. Ele permite que os desenvolvedores do React destinem seus aplicativos a dispositivos móveis.

No React Native, o código JavaScript é executado em seu próprio encadeamento do sistema usando um interpretador nativo. Uma ponte em lote assíncrona de alto desempenho conecta o código do React à plataforma nativa — orquestrando os componentes nativos da UI para implementá-la. Também é possível expor métodos nativos customizados para acesso do JavaScript por meio dessa ponte. Os elementos HTML no React são substituídos por visualizações de código nativo e widgets de UI na plataforma de dispositivo móvel. O React Native oferece suporte para definição de estilo de componentes nativos por meio de um subconjunto de CSS sobre JavaScript.

De acordo com a equipe de desenvolvimento, os aplicativos criados usando o React Native podem reproduzir as nuances mais refinadas e sutis da UI que os usuários somente associam a aplicativos nativos — uma reclamação de que as alternativas baseadas em em WebViews ou HTML5 não correspondem atualmente.

Conclusão

Os desenvolvedores JavaScript podem escolher entre uma enorme variedade de estruturas e bibliotecas de software livre ao criar UIs para seus projetos. Mas, poucos deles foram testados em projetos complexos de UI com alta demanda de desempenho, poucos oferecem um bom suporte de ferramentas e menos ainda são fornecidos com melhores práticas comprovadas de codificação e design, e uma tendência de crescimento futuro garantido que se estenda às operações de dados do lado do servidor e de desenvolvimento de tecnologia móvel. O React oferece tudo isso e muito mais, com um suporte de comunidade ativo e cada vez maior. Este é o melhor momento para incluir o React na sua caixa de ferramentas de desenvolvimento.

Download

wa-react-intro.zip: Source code for this article’s examples

Aviso

O conteúdo aqui presente foi traduzido da página IBM Developer US. Caso haja qualquer divergência de texto e/ou versões, consulte o conteúdo original.