No final deste mês de abril ocorreu a quinta edição do “mais tradicional evento gaudério de javascript do Rio Grande do Sul”. O evento, que conta com o apoio da iniciativa BrazilJS e patrocínio da KingHost, trouxe uma programação focada nas novidades do mundo do Javascript em 2016.
Durante o evento, tivemos a oportunidade de assistir oito palestras, tratando de diversos assuntos, entre eles a aplicação do JavaScript no desenvolvimento de aplicações de grande porte. Uma tendência atual é a utilização da biblioteca React 1.
O que é React? Pra que serve?
React é uma biblioteca Javascript open source, desenvolvida pelo Facebook para criar interfaces para aplicações web.
Ele fornece uma maneira de representar objetos na forma de componentes e gerenciar automaticamente o seu estado. As atualizações na interface são automáticas, rápidas (virtual DOM), e refletem as modificações nas propriedades do objeto. Esses objetos são descritos declarativamente, como componentes reutilizáveis, usando uma sintaxe própria (JSX) – um dos pontos fortes do React. Os componentes podem ser compostos por outros componentes: os dados fluem em um único sentido, propagando mudanças de estado para os componentes filhos.
O React não é um framework, ele implementa apenas a view do modelo MVC (model-view-controller).
Hoje o React é usado Usado pelo Facebook, Instagram, NETFLIX, imgur e AirBnB para aplicações de grande porte.
O que é Virtual DOM?
DOM é um padrão de representação e interação de objetos para documentos HTML. Manipular o DOM normal é algo que causa bastante gargalo nas aplicações web.
O React cria uma representação do DOM em memória, chamada “virtual DOM”. Quando é necessário redesenhar algum elemento na página, o React calcula as diferenças (diff) entre o virtual DOM e a página, modificando apenas o necessário. É muito mais rápido de manipular esse pseudo-DOM do que o DOM.
O que é JSX?
JSX é uma extensão do javascript que permite escrever componentes com sintaxe XML dentro de arquivos JS. Ele transforma XML em JS. Você não precisa usar JSX para trabalhar com React, mas é um atalho bacana. Considere a seguinte expressão em JSX:
var x = <div><strong>abcdef</strong></div> Essa mesma expressão é transformada no seguinte trecho em JS: var x = React.createElement( "div", null, React.createElement( "strong", null, "abcdef" ) );
Essa transformação é transparente – as próprias ferramentas de build cuidam disso. No entanto, é possível incluir uma versão do compilador JSX escrita em javascript numa página da web, e trabalhar diretamente com JSX.
Como eu uso?
A maneira mais fácil de começar com React é incluindo a biblioteca em uma tag de <script> no HEAD da sua página HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
</head>
<body>
<div id="meuapp"></div>
<script>
var MeuApp = React.createClass({
render: function() {
return <div>Mãe to no react</div>;
}
});
ReactDOM.render(
<MeuApp />,
document.getElementById('meuapp')
);
</script>
</body>
</html>
Na prática, você vai acabar usando um processo de build tradicional como o grunt, gulp ou mais recentemente, o webpack.
Para saber mais:
· https://facebook.github.io/react/
· https://github.com/enaqx/awesome-react
Post escrito pelo colaborador Rodrigo Hahn – Desenvolvedor na KingHost.
