• Mostrando resultados da busca por {{ posts_busca["corrected"] }} {{termo_busca}}
  • {{post.title}}
  • Não foram encontrados resultados para {{ posts_busca["corrected"] }} {{termo_busca}}

React Javascript

André Brasil - Time de Atendimento da KingHost

O React é uma biblioteca Javascript open source, desenvolvida pelo Facebook para criar interfaces para aplicações web. Através dele, pode-se criar interfaces de usuários utilizando código Javascript.
Pode ser utilizado em aplicações de grande porte e grandes empresas o utilizam como, por exemplo: Facebook, Instagram e Netflix.
Site oficial: https://facebook.github.io/react/

Sobre o React Javascript

O React 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 (como o Node.js ou AngularJS, por exemplo), ele implementa apenas a view do modelo MVC (model-view-controller).

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.

Uso do 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 é uma boa opção para dar agilidade ao seu projeto.

Veja um exemplo de uso:

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 usar o React?

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. Veja um exemplo:

<!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>To usando react</div>;
 
}
 
});
 
ReactDOM.render(
 
<MeuApp />,
 
document.getElementById('meuapp')
 
);
 
</script>
 
</body>
 
</html>

Esse artigo foi útil pra você?