No final deste m\u00eas de abril ocorreu a quinta edi\u00e7\u00e3o do \u201cmais tradicional evento gaud\u00e9rio de javascript do Rio Grande do Sul\u201d. O evento, que conta com o apoio da iniciativa BrazilJS e patroc\u00ednio da KingHost, trouxe uma programa\u00e7\u00e3o focada nas novidades do mundo do Javascript em 2016.<\/p>\n
Durante o evento, tivemos a oportunidade de assistir oito palestras, tratando de diversos assuntos, entre eles a aplica\u00e7\u00e3o do JavaScript no desenvolvimento de aplica\u00e7\u00f5es de grande porte. Uma tend\u00eancia atual \u00e9 a utiliza\u00e7\u00e3o da biblioteca React 1.<\/p>\n
React \u00e9 uma biblioteca Javascript open source, desenvolvida pelo Facebook para criar interfaces para aplica\u00e7\u00f5es web.<\/p>\n
Ele fornece uma maneira de representar objetos na forma de componentes e gerenciar automaticamente o seu estado. As atualiza\u00e7\u00f5es na interface s\u00e3o autom\u00e1ticas, r\u00e1pidas (virtual DOM), e refletem as modifica\u00e7\u00f5es nas propriedades do objeto. Esses objetos s\u00e3o descritos declarativamente, como componentes reutiliz\u00e1veis, usando uma sintaxe pr\u00f3pria (JSX) – um dos pontos fortes do React. Os componentes podem ser compostos por outros componentes: os dados fluem em um \u00fanico sentido, propagando mudan\u00e7as de estado para os componentes filhos.<\/p>\n
O React n\u00e3o \u00e9 um framework, ele implementa apenas a view do modelo MVC (model-view-controller).<\/strong><\/p>\n Hoje o React \u00e9 usado Usado pelo Facebook, Instagram, NETFLIX, imgur e AirBnB para aplica\u00e7\u00f5es de grande porte.<\/p>\n DOM \u00e9 um padr\u00e3o de representa\u00e7\u00e3o e intera\u00e7\u00e3o de objetos para documentos HTML. Manipular o DOM normal \u00e9 algo que causa bastante gargalo nas aplica\u00e7\u00f5es web.<\/p>\n O React cria uma representa\u00e7\u00e3o do DOM em mem\u00f3ria, chamada \u201cvirtual DOM\u201d. Quando \u00e9 necess\u00e1rio redesenhar algum elemento na p\u00e1gina, o React calcula as diferen\u00e7as (diff) entre o virtual DOM e a p\u00e1gina, modificando apenas o necess\u00e1rio. \u00c9 muito mais r\u00e1pido de manipular esse pseudo-DOM do que o DOM.<\/p>\n JSX \u00e9 uma extens\u00e3o do javascript que permite escrever componentes com sintaxe XML dentro de arquivos JS. Ele transforma XML em JS. Voc\u00ea n\u00e3o precisa usar JSX para trabalhar com React, mas \u00e9 um atalho bacana. Considere a seguinte express\u00e3o em JSX:<\/p>\n <\/p>\n Essa transforma\u00e7\u00e3o \u00e9 transparente – as pr\u00f3prias ferramentas de build cuidam disso. No entanto, \u00e9 poss\u00edvel incluir uma vers\u00e3o do compilador JSX escrita em javascript numa p\u00e1gina da web, e trabalhar diretamente com JSX.<\/p>\n A maneira mais f\u00e1cil de come\u00e7ar com React \u00e9 incluindo a biblioteca em uma tag de <script> no HEAD da sua p\u00e1gina HTML:<\/p>\n <\/p>\n Na pr\u00e1tica, voc\u00ea vai acabar usando um processo de build tradicional como o grunt, gulp ou mais recentemente, o webpack.<\/p>\n Para saber mais:<\/p>\n \u00b7 https:\/\/facebook.github.io\/react\/<\/a><\/p>\n \u00b7 http:\/\/gruntjs.com\/<\/a><\/p>\n \u00b7 http:\/\/gulpjs.com\/<\/a><\/p>\nO que \u00e9 Virtual DOM?<\/h3>\n
O que \u00e9 JSX?<\/h3>\n
var x = <div><strong>abcdef<\/strong><\/div>\n\nEssa mesma express\u00e3o \u00e9 transformada no seguinte trecho em JS:\n\nvar x = React.createElement(\n\n\"div\", null, React.createElement(\n\n\"strong\", null, \"abcdef\"\n\n)\n\n);<\/pre>\n
Como eu uso?<\/h3>\n
<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/0.14.6\/react.js\"><\/script>\n\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/0.14.6\/react-dom.js\"><\/script>\n\n<\/head>\n\n<body>\n\n<div id=\"meuapp\"><\/div>\n\n<script>\n\nvar MeuApp = React.createClass({\n\nrender: function() {\n\nreturn <div>M\u00e3e to no react<\/div>;\n\n}\n\n});\n\nReactDOM.render(\n\n<MeuApp \/>,\n\ndocument.getElementById('meuapp')\n\n);\n\n<\/script>\n\n<\/body>\n\n<\/html><\/pre>\n