🎯Raio-X do Marketing Digital: Tendências e desafios 🚀

Iniciando com o React JavaScript

Publicado em 10/05/2016

Atualizado em 04/06/2024

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/

· http://gruntjs.com/

· http://gulpjs.com/

· https://webpack.github.io/

· https://github.com/enaqx/awesome-react

Post escrito pelo colaborador Rodrigo Hahn – Desenvolvedor na KingHost.

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Post
Convidado
Post
Convidado

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

Você sabe o que é spyware? Esse tipo de software malicioso é uma das maiores ameaças à segurança digital atualmente. O tema “spyware” é cada vez mais relevante à medida que os ataques continuam a crescer em número e sofisticação.  Em um mundo onde a maioria das pessoas confia em dispositivos digitais para suas atividades,...

Mensagens para você