{"id":14200,"date":"2019-02-27T11:02:37","date_gmt":"2019-02-27T14:02:37","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=14200"},"modified":"2019-02-27T11:02:37","modified_gmt":"2019-02-27T14:02:37","slug":"saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/","title":{"rendered":"Saiba o que \u00e9 React e entenda como us\u00e1-lo no desenvolvimento"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\"><em>N\u00e3o pode ler esse artigo agora? Ou\u00e7a a mat\u00e9ria no Player abaixo:<\/em><\/span><br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" style=\"height: 83px !important;\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/fab00a22\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<span style=\"font-size: 14pt;\">Para quem j\u00e1 trabalha ou sonha em\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/06\/04\/saiba-como-e-o-mercado-de-trabalho-para-programacao\/\" target=\"_blank\" rel=\"noopener noreferrer\">ser um programador<\/a>, \u00e9 muito importante estar cada vez mais atento \u00e0 experi\u00eancia que o usu\u00e1rio tem com os sistemas desenvolvidos. Para isso, algumas a\u00e7\u00f5es devem ser tomadas\u00a0com o objetivo de otimizar a rela\u00e7\u00e3o\u00a0homem x\u00a0m\u00e1quina.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Justamente devido \u00e0 crescente preocupa\u00e7\u00e3o das empresas em oferecer interfaces agrad\u00e1veis em seus softwares, aplicativos e sites para o p\u00fablico, o mercado de programadores front-end tem ampliado bastante.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O conhecimento de <a href=\"https:\/\/www.impacta.com.br\/curso\/Desenvolvimento-de-Componentes-Web-e-Mobile-com-ReactJS-Redux-e-React-Native.php\" target=\"_blank\" rel=\"noopener noreferrer\">programa\u00e7\u00e3o em React<\/a>,\u00a0\u00e9 essencial para qualquer profissional em front-end, uma vez que existe uma alta demanda do mercado por esses programadores. Se voc\u00ea deseja aproveitar essa oportunidade e ter sucesso na carreira, continue a leitura para saber o que \u00e9 React, como us\u00e1-lo e os principais motivos para escolher essa op\u00e7\u00e3o!<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">O que \u00e9 React?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Antes de explicar o que \u00e9 <a href=\"https:\/\/blog.geekhunter.com.br\/react-vs-vue-vs-angular-qual-escolher\/\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a>, precisamos dizer que ele n\u00e3o \u00e9 um framework (esp\u00e9cie de template usado por desenvolvedores para aproveitar e adaptar c\u00f3digos de um outro projeto). Ele, na verdade, \u00e9 uma biblioteca do\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2017\/12\/26\/saiba-o-que-e-javascript-e-por-que-voce-deve-conhece-la\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a>\u00a0focada exclusivamente na interface do usu\u00e1rio.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O React foi criado em 2011 para o feed do Instagram. Quando a empresa foi comprada pelo Facebook, a biblioteca ficou muito popular entre os desenvolvedores. No ano de 2013, o c\u00f3digo foi aberto para desenvolvedores e ela se popularizou ainda mais.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para trabalhar com React, o principal conhecimento que voc\u00ea precisa desenvolver \u00e9 sobre\u00a0<a href=\"https:\/\/www.impacta.com.br\/online\/Java-Web-online.php\" target=\"_blank\" rel=\"noopener noreferrer\">Java<\/a>, pois as fun\u00e7\u00f5es e aplica\u00e7\u00f5es s\u00e3o poucas.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Como usar React no desenvolvimento?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para\u00a0usar o React\u00a0\u00e9 preciso uma extens\u00e3o, sendo que a mais comum \u00e9 a JSX. Al\u00e9m disso, o React \u00e9 declarativo, ou seja, \u00e9 preciso apenas fazer a declara\u00e7\u00e3o (est\u00e1tica ou din\u00e2mica) que o React vai executar essa declara\u00e7\u00e3o na interface do usu\u00e1rio. Os componentes de UI (interface do usu\u00e1rio) desenvolvidos com React poder\u00e3o, ainda, ser reutilizados em outros projetos.<\/span><br \/>\n<strong><span style=\"font-size: 14pt;\">Confira a seguir algumas das suas caracter\u00edsticas:<\/span><\/strong><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\"><strong>componentes<\/strong>: ele usa apenas componentes (como as fun\u00e7\u00f5es no Java), o que facilita a reutiliza\u00e7\u00e3o do c\u00f3digo para outros projetos e tamb\u00e9m o acompanhamento do c\u00f3digo. Se houver um bug, por exemplo, fica muito mais f\u00e1cil encontrar o erro dessa maneira;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong>props (ou properties)<\/strong>: quando \u00e9 preciso usar um par\u00e2metro para alterar algum componente;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong>state (estado)<\/strong>: o ideal \u00e9 que os componentes sejam sem estado, n\u00e3o apenas por serem mais f\u00e1ceis de desenvolver, mas tamb\u00e9m para fazer os testes e manter. A outra possibilidade s\u00e3o os componentes com estado, ou container. Para estes, \u00e9 preciso ter uma classe e tamb\u00e9m \u00e9 necess\u00e1rio a transforma\u00e7\u00e3o de dados ou l\u00f3gica;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong>virtual DOM<\/strong>: apesar do modelo do objeto do documento ser fundamental quando falamos de front-end, esse \u00e9 um processo lento e que pode sofrer altera\u00e7\u00f5es desnecess\u00e1rias. O React usa o virtual DOM com a finalidade de deixar a a\u00e7\u00e3o mais din\u00e2mica e certeira, pois ele guarda todos os n\u00f3s do DOM, promovendo altera\u00e7\u00f5es somente quando necess\u00e1rio;<\/span><\/li>\n<li>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\"><strong>JSX<\/strong>: como n\u00e3o \u00e9 poss\u00edvel escrever <a title=\"5 motivos para voc\u00ea aprender HTML5\" href=\"https:\/\/www.impacta.com.br\/blog\/2016\/04\/25\/5-motivos-para-aprender-html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a> dentro do JavaScript, o JSX \u00e9 uma extens\u00e3o de sintaxe que oferece essa alternativa.<\/span><\/p>\n<\/li>\n<\/ul>\n<h2 style=\"text-align: left;\"><strong><span style=\"font-size: 14pt;\">Por que o React \u00e9 mais atrativo e eficiente?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">O React se popularizou provavelmente devido \u00e0s suas in\u00fameras vantagens. Confira a seguir alguns motivos para desenvolver usando essa biblioteca.<\/span><\/p>\n<h3><strong><span style=\"font-size: 14pt;\">Tenha mais foco na interface do usu\u00e1rio<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">Se voc\u00ea j\u00e1 est\u00e1 na \u00e1rea de programa\u00e7\u00e3o h\u00e1 algum tempo, deve saber que a preocupa\u00e7\u00e3o com a intera\u00e7\u00e3o homem-m\u00e1quina deveria ser primordial para os profissionais dessa \u00e1rea. Com o React voc\u00ea consegue definir seus componentes, desenvolvendo desde bot\u00f5es de uma p\u00e1gina at\u00e9 a forma como o feed de uma rede social carrega.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Principalmente hoje, quando o comportamento do usu\u00e1rio tem mudado (ficando mais consciente desta rela\u00e7\u00e3o e, ao mesmo tempo, exigente aos aspectos da intera\u00e7\u00e3o), \u00e9 importante ter uma forma de otimizar a dedica\u00e7\u00e3o a essa \u00e1rea. Escreva suas interfaces usando Java e trabalhando com objetos.<\/span><\/p>\n<h3><strong><span style=\"font-size: 14pt;\">Fa\u00e7a testes com facilidade<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">Assim como em qualquer entrega de um projeto de programa\u00e7\u00e3o, os projetos de UI precisam ser testados. Com o React voc\u00ea pode usar o Jest (ferramenta para testes unit\u00e1rios desenvolvida pelo Facebook). Al\u00e9m de ter uma configura\u00e7\u00e3o f\u00e1cil, voc\u00ea ainda consegue testar:<\/span><\/p>\n<ul>\n<li><strong><span style=\"font-size: 14pt;\">runner;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">assertions;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">report de coverage;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">snapshots.<\/span><\/strong><\/li>\n<\/ul>\n<h3><strong><span style=\"font-size: 14pt;\">Crie aplicativos de forma eficiente<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">Outra qualidade do React \u00e9 o DOM virtual (Document Object Model ou modelo de objeto de documento). Ent\u00e3o, toda vez que voc\u00ea renderizar HTML usando JavaScript, o React ficar\u00e1 na mem\u00f3ria com a representa\u00e7\u00e3o virtual. Dessa forma, no momento em que voc\u00ea atualizar, o React far\u00e1 uma compara\u00e7\u00e3o dessas duas vers\u00f5es e conseguir\u00e1 apenas introduzir a diferen\u00e7a existente entre elas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Esse processo tamb\u00e9m \u00e9 conhecido como algoritmo de reconcilia\u00e7\u00e3o do React e agiliza a escrita de c\u00f3digos. Usando a fun\u00e7\u00e3o render, voc\u00ea consegue sempre uma nova \u00e1rvore de elementos React (diferente da anterior).<\/span><\/p>\n<h3><strong><span style=\"font-size: 14pt;\">Seja compat\u00edvel com outros plugins<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">Um desenvolvedor precisa de um\u00a0kit de ferramentas\u00a0e carregadores e o React n\u00e3o impedir\u00e1 que voc\u00ea prossiga com o conhecimento que j\u00e1 adquiriu at\u00e9 ent\u00e3o. Al\u00e9m de comportar o JavaScript, como j\u00e1 citamos, ele tamb\u00e9m \u00e9 compat\u00edvel com:<\/span><\/p>\n<ul>\n<li><strong><span style=\"font-size: 14pt;\">AMD;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">Bower;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">Brownserify;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">CommonJS;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">Gulp;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">Grunt;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">npm;<\/span><\/strong><\/li>\n<li><strong><span style=\"font-size: 14pt;\">Webpack.<\/span><\/strong><\/li>\n<\/ul>\n<h3><strong><span style=\"font-size: 14pt;\">Use em diversas aplica\u00e7\u00f5es<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">Seja um aplicativo para dispositivos m\u00f3veis ou em um projeto de site, usando o React e o React Native (para apps), voc\u00ea consegue desenvolver a interface. Por isso, \u00e9 importante que, em vez de escrever grandes arquivos, voc\u00ea pense na fun\u00e7\u00e3o e monte o projeto em v\u00e1rios pequenos arquivos. Afinal, com a possibilidade de reutilizar o c\u00f3digo, essa pr\u00e1tica otimiza o seu trabalho.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Como voc\u00ea p\u00f4de perceber, o React \u00e9 uma biblioteca importante para o desenvolvimento do front-end, que torna a interface do usu\u00e1rio mais aperfei\u00e7oada e atende \u00e0s demandas para proporcionar uma excelente\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/04\/04\/guia-pratico-para-desbravar-o-universo-do-ux\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX (experi\u00eancia do usu\u00e1rio)<\/a>. Outra vantagem importante \u00e9 que voc\u00ea consegue usar o React em um ambiente online de desenvolvimento.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Se voc\u00ea gostou do texto, compartilhe nas suas redes sociais! Assim, al\u00e9m de\u00a0fortalecer a comunidade de desenvolvedores com um assunto interessante e que contribui para a otimiza\u00e7\u00e3o do trabalho, voc\u00ea nos indica que esse tipo de conte\u00fado \u00e9 relevante para os nossos leitores. Desse modo, podemos continuar entregando mais <a href=\"https:\/\/www.impacta.com.br\/materiais-educativos.php?tag=11\" target=\"_blank\" rel=\"noopener noreferrer\">materiais ricos sobre programa\u00e7\u00e3o<\/a>!<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-size: 14pt;\">Quer saber mais sobre o uso do React? <\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-size: 14pt;\"><a href=\"https:\/\/www.impacta.com.br\/curso\/Desenvolvimento-de-Componentes-Web-e-Mobile-com-ReactJS-Redux-e-React-Native.php\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14255\" title=\"Curso de React\" src=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2019\/02\/linkedin-1200x512-react-1024x535.png\" alt=\"Curso de React\" width=\"350\" height=\"183\" \/><\/a><\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-size: 14pt;\"><a href=\"https:\/\/www.impacta.com.br\/curso\/Desenvolvimento-de-Componentes-Web-e-Mobile-com-ReactJS-Redux-e-React-Native.php\" target=\"_blank\" rel=\"noopener noreferrer\">Conhe\u00e7a o Curso<\/a> que te ensina a desenvolver componentes web com ReactJS, Redux e React Native!<\/span><\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-14200\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>N\u00e3o pode ler esse artigo agora? Ou\u00e7a a mat\u00e9ria no Player abaixo: Para quem j\u00e1 trabalha ou sonha em\u00a0ser um programador, \u00e9 muito importante estar cada vez mais atento \u00e0 experi\u00eancia que o usu\u00e1rio tem com os sistemas desenvolvidos. Para isso, algumas a\u00e7\u00f5es devem ser tomadas\u00a0com o objetivo de otimizar a rela\u00e7\u00e3o\u00a0homem x\u00a0m\u00e1quina. Justamente devido [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":17032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[66,366,57,780,18,781],"class_list":["post-14200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-desenvolvimento-2","tag-desenvolvimento-web","tag-javascript","tag-o-que-e-react","tag-programacao","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento<\/title>\r\n<meta name=\"description\" content=\"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento\" \/>\r\n<meta property=\"og:description\" content=\"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2019-02-27T14:02:37+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"284\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\",\"name\":\"Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg\",\"datePublished\":\"2019-02-27T14:02:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\"},\"description\":\"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg\",\"width\":850,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Saiba o que \u00e9 React e entenda como us\u00e1-lo no desenvolvimento\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\",\"name\":\"Reda\u00e7\u00e3o Impacta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"caption\":\"Reda\u00e7\u00e3o Impacta\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento","description":"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/","og_locale":"pt_BR","og_type":"article","og_title":"Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento","og_description":"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!","og_url":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2019-02-27T14:02:37+00:00","og_image":[{"width":850,"height":284,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg","type":"image\/jpeg"}],"author":"Reda\u00e7\u00e3o Impacta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Reda\u00e7\u00e3o Impacta","Est. reading time":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/","url":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/","name":"Saiba o que \u00e9 React e veja como us\u00e1-lo no desenvolvimento","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg","datePublished":"2019-02-27T14:02:37+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c"},"description":"Talvez voc\u00ea ainda n\u00e3o saiba o que \u00e9 React, mas com certeza j\u00e1 navegou por um site com essa tecnologia. Entenda melhor como us\u00e1-la na programa\u00e7\u00e3o nesse post!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_react.jpg","width":850,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Saiba o que \u00e9 React e entenda como us\u00e1-lo no desenvolvimento"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c","name":"Reda\u00e7\u00e3o Impacta","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","caption":"Reda\u00e7\u00e3o Impacta"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/"}]}},"acf":{"post_description":null,"capa_mobile":null},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14200"}],"version-history":[{"count":0,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/17032"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}