A biblioteca que é largamente usada no desenvolvimento front-end já está na versão 16.8.6, que foi lançada em 27 de março deste ano.

Para quem está começando com o React, vale saber que teve algumas mudanças significativas a partir da versão 16.0.0, lançada em 26 de setembro de 2017 (veremos sobre isso no próximo artigo).

Antes de tudo, vale saber da linha do tempo.

A Linha do tempo

Há exatos seis anos (29 de maio de 2013), uma biblioteca JavaScript de código aberto, que foi desenvolvida pelo Facebook, era lançada. Sendo óbvio, estou falando da biblioteca React. Para ser mais preciso, a pessoa que está por trás dessa criação é Jordan Walke (Engenheiro de software na empresa Facebook).

Tivemos o lançamento do React Native, em 26 de março de 2015.

Em 18 de abril de 2017, o Facebook anunciou o React Fiber, um novo algoritmo core da biblioteca. Com o propósito de se tornar a base de qualquer melhoria futura e desenvolvimento de recursos da biblioteca React.

No dia seguinte (19 de abril de 2017), foi lançado o React 360, para o público. Isso permitiu aos desenvolvedores que utilizam React, saltassem para o desenvolvimento de VR (Realidade Virtual).

Por fim, temos a versão 16 e 16.8.6 da biblioteca, como mencionado no início desse artigo. Sem esquecer que na versão 16.8, temos o suporte estável na utilização de Hooks, que veremos nos próximos artigos.

A Biblioteca

A biblioteca ganhou grande popularidade por ter o foco na criação de componentes de interface, ter uma grande empresa por trás, usar uma técnica que agradou à todos (Virtual-Dom) e ter uma pequena curva de aprendizado para quem já está acostumando com JavaScript.

Abaixo, também veremos sobre a especificação JSX e micro bibliotecas que auxiliam o desenvolvimento com React.

Virtual-DOM

É uma representação em JavaScript puro do DOM. Sendo assim, você manipula esse objeto e não o DOM de verdade. Quando o objeto virtual é atualizado, um algoritmo calcula a diferença entre o virtual-dom e o DOM real, alterando então os trechos do DOM.

É mais produtivo criar os elementos DOM no JavaScript, processar eles e aplicá-los de uma só vez na arvore DOM do navegador. A biblioteca veio para facilitar isso, entre outras coisas.

JSX

JSX é uma especificação de sintaxe para escrever JavaScript como se estivéssemos escrevendo XML.

cont Example = React.createClass({
  render: function() {
    return <div>Olá, {this.props.name}</div>;
  }
});

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

Sem JSX:

var Example = React.createClass({
  displayName: 'Hello',
  render: function() {
    return React.createElement("div", null, "Olá, ", this.props.name);
  }
});

ReactDOM.render(
  React.createElement(Example, {name: "Hemerson"}),
  document.getElementById('main')
);

Micro-bibliotecas

Sendo apenas uma biblioteca, não seria possível criar aplicações complexas, apenas com React. Por isso, vamos falar um pouco nas micro-bibliotecas que ajudam muito no desenvolvimento.

As mais utilizadas nos projetos são react-router e react-redux. Com elas, já é capaz de criar uma projeto SPA complexo.

Cada vez mais o caminho tem sido separar as responsabilidades, por uma questão de manutenção, peso e mais.

Nesse link, temos muitas micro-bibliotecas para nos ajudar.

Considerações finais

Tenho gostado de utilizar o React, pela liberdade no desenvolvimento de componentes e pela estabilidade e flexibilidade da ferramenta. Nos dias de hoje, podemos usar no navegador, servidor e aplicativos móveis. A comunidade está empenhada no crescimento e melhorias. A cada ano temos evoluções consideráveis da biblioteca e ferramentas que utilizamos como suporte no desenvolvimento das aplicações.