📅 Conexão KingHost 🚀 Conteúdos exclusivos para o seu negócio evoluir no digital 💰

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 ameaças virtuais estão mudando constantemente e se tornando cada dia mais sofisticadas. Por isso, para quem tem um negócio online, a segurança é um ponto que merece grande atenção. De acordo com o Relatório do Sitelock que analisou 14 milhões de sites em 2022, sites recebem cerca de 5.5 vezes mais tráfego de bots...
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,...

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ê