☁️ Hospedagem Cloud e VPS - Alta performance para seus projetos com desconto imperdível 💰

Kinghost | Blog

Iniciando com o React JavaScript

Publicado em 10/05/2016

Atualizado em 26/04/2023

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ê pode até não perceber, mas as aplicações web já se tornaram parte da sua rotina. Diariamente, você acessa informações, realiza negócios e se comunica por meio dessas aplicações. Isso mesmo, desde plataformas de e-commerce que facilitam compras online até redes sociais que conectam bilhões de pessoas globalmente, as aplicações web desempenham um papel fundamental...
Ataque DDoS é uma das ameaças mais temidas por quem tem um site na internet. Imagine anos de investimento para construir a credibilidade de uma presença digital, para ver seu site sendo afetado por um ataque desse tipo.  Para se ter uma ideia, o Brasil pelo 10º ano consecutivo, é o líder do ranking de...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você