📅 Ebook GRATUITO 🚀 Como preparar o seu site para receber muitos acessos? 💰

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

Conteúdos relacionados

As notas fiscais são uma obrigatoriedade para empresas em todo o território nacional, mas nem todo mundo sabe como fazer uma nota fiscal. E, pensando nisso, criamos um conteúdo completo, com tudo o que você precisa saber sobre as notas fiscais e como fazer uma. Por isso, vamos explicar mais sobre os diversos tipos de...
Nos últimos anos, o empreendedorismo digital tem ganhado cada vez mais destaque no mundo dos negócios e a presença digital tem se tornado imprescindível. Assim, com o avanço da tecnologia e a crescente presença da internet em nossas vidas, empreender no ambiente digital se tornou uma opção atraente e lucrativa para muitas pessoas.  Neste artigo,...
Você já ouviu falar de chatbot? Provavelmente a resposta é sim. Isso porque, essa tecnologia tem ganhado cada vez mais espaço na comunicação digital. Afinal, com a evolução tecnológica e as inúmeras ferramentas que prometem facilitar nossa rotina, os chatbots garantem destaque em diversos setores, desde atendimento ao cliente até vendas e marketing. Neste artigo,...
Você provavelmente já se deparou com a palavra “SPAM” em algum momento enquanto navegava na internet ou verificava sua caixa de emails.  Mas você sabe o que realmente significa SPAM? Neste artigo, vamos falar sobre aquele monte de mensagens chatas e inconvenientes que inundam nossa caixa de entrada. Ouça o conteúdo completo apertando no play!...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você