{"id":2493,"date":"2016-10-18T08:51:22","date_gmt":"2016-10-18T10:51:22","guid":{"rendered":"https:\/\/www.kinghost.com.br\/wiki\/?post_type=article&p=2493"},"modified":"2021-06-10T08:49:56","modified_gmt":"2021-06-10T11:49:56","slug":"react-javascript","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/react-javascript\/","title":{"rendered":"React Javascript"},"content":{"rendered":"\n

O React<\/strong> \u00e9 uma biblioteca Javascript open source, desenvolvida pelo Facebook para criar interfaces para aplica\u00e7\u00f5es web. Atrav\u00e9s dele, pode-se criar interfaces de usu\u00e1rios utilizando c\u00f3digo Javascript.
\nPode ser utilizado em aplica\u00e7\u00f5es de grande porte e grandes empresas o utilizam como, por exemplo: Facebook, Instagram e Netflix.
\nSite oficial: https:\/\/facebook.github.io\/react\/<\/a><\/p>\n\n\n\n

<\/span>Sobre o React Javascript<\/span><\/h2>\n\n\n\n

O React 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) \u2013 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\n\n\n

O React n\u00e3o \u00e9 um framework (como o Node.js ou AngularJS, por exemplo), ele implementa apenas a view do modelo MVC (model-view-controller).<\/strong><\/p>\n\n\n\n

<\/span>Virtual DOM<\/span><\/h2>\n\n\n\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.
\nO React cria uma representa\u00e7\u00e3o do DOM em mem\u00f3ria, chamada Virtual DOM<\/strong>. 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\n\n\n

<\/span>Uso do JSX<\/span><\/h2>\n\n\n\n

JSX \u00e9 uma extens\u00e3o do javascript que permite escrever componentes com sintaxe XML dentro de arquivos JS. Ele transforma XML em JS<\/strong>. Voc\u00ea n\u00e3o precisa usar JSX para trabalhar com React, mas \u00e9 uma boa op\u00e7\u00e3o para dar agilidade ao seu projeto. <\/p>\n\n\n\n

Veja um exemplo de uso:<\/p>\n\n\n\n

var x = <div><strong>abcdef<\/strong><\/div><\/code><\/pre>\n\n\n\n
Essa mesma express\u00e3o \u00e9 transformada no seguinte trecho em JS:<\/p>\n\n\n\n
var x = React.createElement(\n\"div\", null, React.createElement(\n\"strong\", null, \"abcdef\" \n)\n);<\/code><\/pre>\n\n\n\n
Essa transforma\u00e7\u00e3o \u00e9 transparente \u2013 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\n\n\n
<\/span>Como usar o React?<\/span><\/h2>\n\n\n\n
A maneira mais f\u00e1cil de come\u00e7ar com React \u00e9 incluindo a biblioteca em uma tag de <script><\/code> no HEAD da sua p\u00e1gina HTML. Veja um exemplo:
<\/p>\n\n\n\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>To usando 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><\/code><\/pre>\n","protected":false},"author":9,"featured_media":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[181],"article-tag":[],"class_list":["post-2493","article","type-article","status-publish","format-standard","hentry","article-category-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t