React.js, o que é? – Introdução ao React

Se você tem acompanhado o mundo do Front-end nos últimos anos, com certeza você percebeu um boom em Frameworks e bibliotecas Javascript, como o AngularJS, React.js e vários outros.

O que é o React.js?

React.js é uma biblioteca JavaScript, desenvolvida por engenheiros do Facebook (só de colocar o nome do Facebook aqui você já se interessou né?!).

Porque usar React.js?

Muitas são as razões possíveis pra você adotar o React.js em algum de seus projetos, abaixo alguns motivos:

• React é popular. Sim, é isso mesmo. Eu não sei se você costuma pesquisar suas dúvidas no Google (faça isso antes de postar nos grupos do Facebook por favor!), mas pesquisar qualquer coisa sobre uma tecnologia popular, já é uma grande mão na roda.
• React é rápido. Aplicações feitas com ele podem sofrer atualizações complexas e ainda assim ser rápido e responsivo.
• React é modular. E pra mim, esse é a grande sacada. Ao invés de você escrever aqueles gigantescos arquivos, você deve pode escrever vários arquivos menores, e reutilizáveis. A modularidade, ajuda a resolver um grande problema do JavaScript: manutenção de código.
• React é flexível. Seu principal uso é para criar aplicações web, mas nada impede que você o utilize em outros tipos de projetos.

Por onde começar?

Pois bem, como eu disse lá em cima, React é uma biblioteca JavaScript, então obviamente, o primeiro passo é saber um pouco de JS.

JSX

Bom, aqui talvez uma parte ‘estranha’ quando você começa com React. A sintaxe da biblioteca é o JSX. Quando um arquivo JavaScript tem pedaços em JSX, esse arquivo tem que ser compilado (para JavaScript normal), para depois ser interpretado pelo navegador.

Um código JSX seria como :

Obs¹: O uso de JSX é opcional para o desenvolvimento com React.

Obs²: JSX é tão extenso que precisa ser explicado separado.

Virtual DOM

Outro grande ganho do React é o Virtual DOM. Para cada objeto DOM, tem um objeto DOM virtual correspondente.

Um objeto virtual tem as mesmas propriedades que um objeto DOM real, porém ele não altera diretamente o que está sendo exibido na tela. E o motivo é simples: performance. Manipular o DOM é lento (eu não sei se você já teve problemas com isso, mas manipular muitos elementos, ficar escrevendo modificando objetos, faz a aplicação ficar bem lerda), mas manipular o Virtual DOM não, exatamente porque nada é desenhado na tela, diretamente.

Quando o Virtual DOM é atualizado, React compara com a versão anterior do Virtual DOM. Depois ele faz um ‘diffing’ descobrindo exatamente quais objetos virtuais tiveram modificações. Depois de saber exatamente quais objetos sofreram alterações, React atualiza esses objetos, e somente esses objetos, no DOM real. E pode ter certeza, atualizar apenas o que é necessário torna as coisas, muito mais rápidas!

Gostou? Eu estou curtindo estudar React.js. Em breve, mais posts, pra colocar a mão na massa.
Qualquer coisa, deixa nos comentários!