{"id":11299,"date":"2020-11-27T15:19:37","date_gmt":"2020-11-27T18:19:37","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=11299"},"modified":"2024-10-29T11:25:57","modified_gmt":"2024-10-29T14:25:57","slug":"como-aprender-react","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/como-aprender-react\/","title":{"rendered":"Como aprender React JS e dicas de carreira"},"content":{"rendered":"\r\n<p class=\"wp-block-paragraph\">A popularidade do <strong><a href=\"https:\/\/www.geekhunter.com/pt/blog\/criando-componentes-react-componentes-de-classe-e-funcional-sem-estado\/\">React<\/a><\/strong> JS \u00e9 grande, por isso achei necess\u00e1rio trazer um conte\u00fado introdut\u00f3rio para guiar o seu conhecimento e te ajudar a aprender React JS!<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Uma das bibliotecas mais famosas do mundo de front-end possui diversas ferramentas para auxiliar no desenvolvimento de aplicativos web. Voc\u00ea vai conhecer mais sobre as vantagens de usar o React, seus elementos, como trabalhar os componentes da ferramenta de v\u00e1rias formas e como come\u00e7ar a trabalhar e aprender React!<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-o-que-react\">O que \u00e9 React?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><strong>O React JS \u00e9 uma biblioteca de front-end baseada em JavaScript<\/strong>. Ela foi criada pelo time de desenvolvimento do Facebook e tem como principal objetivo fornecer aos desenvolvedores uma interface geral reutiliz\u00e1vel.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">A sua primeira vers\u00e3o foi lan\u00e7ada em 2013, e apesar de ser um framework um pouco recente, j\u00e1 \u00e9 popular, contando com mais de mil colaboradores ativos no <a href=\"https:\/\/geekblogti.wpengine.com\/github-o-que-e-como-usar\/\" target=\"_blank\" rel=\"noreferrer noopener\">Github<\/a>.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Ele usa componentes, que ajudam a encapsular c\u00f3digo e estado. O uso de componentes facilita a constru\u00e7\u00e3o de interfaces de usu\u00e1rio mais complexas.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O React ainda usa JSX, que \u00e9 uma sintaxe semelhante ao XML que combina JavaScript e\u00a0<strong><a href=\"https:\/\/geekblogti.wpengine.com\/tudo-sobre-html-para-front-ends\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a><\/strong>, mas vou falar sobre isso mais para frente.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-mas-por-que-o-react-js-t-o-popular\">Mas por que o React JS \u00e9 t\u00e3o popular?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O React JS tomou conta do desenvolvimento Front-end como uma tempestade. Existem algumas raz\u00f5es para que isso tenha acontecido:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-menos-complexo-que-as-outras-alternativas\">Menos complexo que as outras alternativas<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Quando o React foi anunciado em 2013, <a href=\"https:\/\/geekblogti.wpengine.com\/um-overview-sobre-o-framework-angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a> 1.x e Ember.JS eram na \u00e9poca os frameworks predominantes. Mesmo assim, <strong>o React JS entrou no mercado como sendo o framework f\u00e1cil de integrar com projetos j\u00e1 existentes.<\/strong><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Isso atraiu a aten\u00e7\u00e3o de grande parte da comunidade de front-end, visto que os benef\u00edcios de utilizar o React superavam os frameworks j\u00e1 existentes.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-perfect-timing\">Perfect timing<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Nesse tempo, Angular 2.x foi anunciado pelo Google, trazendo v\u00e1rias mudan\u00e7as e incompatibilidades. Fazer a transi\u00e7\u00e3o do Angular 1.x para o Angular 2.x era a mesma coisa que mudar para um novo framework.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Com isso, o React se destacou ainda mais como a melhor alternativa. Se daria tanto trabalho atualizar a vers\u00e3o do Angular, porque j\u00e1 n\u00e3o mudar de framework e evitar ainda mais trabalho no futuro? E foi isso que fizeram.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-mantido-pelo-facebook\">Mantido pelo Facebook<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Uma das raz\u00f5es que faz com que o React seja t\u00e3o popular \u00e9 pelo fato de <strong>ter o Facebook como a mantenedora principal do projeto<\/strong>. E n\u00e3o apenas isso, \u00e9 utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, entre outros, provando a sua capacidade de atender grandes projetos.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"585\" class=\"wp-image-11368\" src=\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/11\/biblioteca-react-1024x585.jpg\" alt=\"biblioteca-aprender-react\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-1024x585.jpg 1024w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-150x86.jpg 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-100x57.jpg 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-600x343.jpg 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-450x257.jpg 450w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-945x540.jpg 945w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-300x171.jpg 300w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-768x439.jpg 768w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-1536x878.jpg 1536w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-390x223.jpg 390w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-820x469.jpg 820w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react-1180x674.jpg 1180w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/biblioteca-react.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-por-que-usar-o-react-js\">Por que usar o React JS?<\/h2>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>DOM virtual em vez do DOM real;<\/li>\r\n<li>R\u00e1pido e escal\u00e1vel;<\/li>\r\n<li>O JSX fornece um c\u00f3digo f\u00e1cil de ler e escrever;<\/li>\r\n<li>Facilmente integr\u00e1vel a outras estruturas JavaScript.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-dom-virtual-vs-dom-real\">DOM virtual vs DOM real<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">DOM \u00e9 a abrevia\u00e7\u00e3o de <strong>Document Object Model<\/strong>, que \u00e9 uma interface multiplataforma que representa e interage com objetos em documentos XML e HTML.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Essa interface interpreta esses documentos como a estrutura de uma \u00e1rvore, onde cada galho \u00e9 um objeto representado uma parte do documento.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Dando um exemplo, quando estamos falando de Desenvolvimento Web ou de Aplica\u00e7\u00f5es m\u00f3veis, o DOM \u00e9 usado para representar os textos no HTML.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O React utiliza o que \u00e9 conhecido como DOM virtual, que basicamente \u00e9 uma c\u00f3pia simplificada dos textos HTML do React, al\u00e9m de ser uma representa\u00e7\u00e3o do DOM real. O DOM virtual \u00e9 superior ao DOM real por ser muito mais r\u00e1pido e mais barato de ser utilizado.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-simples-aprender-react\">\u00c9 simples aprender React?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">As informa\u00e7\u00f5es que eu trouxe at\u00e9 aqui podem dizer que React \u00e9 um framework f\u00e1cil, mas entrar nas profundezas do React \u00e9 complicado. N\u00e3o por causa do framework em si, mas devido \u00e0s tecnologias integradas a ele, como Redux e GraphQL.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O React JS tem uma API simples e basicamente o que voc\u00ea precisa saber para trabalhar com ele s\u00e3o 4 conceitos:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Componentes;<\/li>\r\n<li>JSX;<\/li>\r\n<li>State;<\/li>\r\n<li>Props;<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/geekblogti.wpengine.com\/um-guia-para-usar-react-js\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" width=\"720\" height=\"200\" class=\"wp-image-11377\" src=\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/11\/cta1-aprender-react.png\" alt=\"\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta1-aprender-react.png 720w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta1-aprender-react-150x42.png 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta1-aprender-react-100x28.png 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta1-aprender-react-600x167.png 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta1-aprender-react-450x125.png 450w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-como-fazer-o-setup-e-come-ar-a-aprender-react-js\">Como fazer o setup e come\u00e7ar a aprender React JS?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\" id=\"h-existem-in-meras-formas-de-fazer-o-setup-do-react-para-o-desenvolvimento-do-seu-projeto\">Existem in\u00fameras formas de fazer o setup do React para o desenvolvimento do seu projeto.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Uma das formas mais simples \u00e9 <strong>adicionando o arquivo React JavaScript direito na p\u00e1gina<\/strong>. Optamos por isso quando a aplica\u00e7\u00e3o React vai interagir com os elementos presentes nessa p\u00e1gina.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\r\n...\r\n    &lt;body&gt;\r\n &lt;script&gt;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/16.9.0-alpha.0\/umd\/react-dom.production.min.js&lt;\/script&gt;\r\n &lt;script&gt;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/16.1.0-beta\/cjs\/react.development.js&lt;\/script&gt;\r\n    &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-group\">\r\n<div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\r\n<p class=\"wp-block-paragraph\">Nesse caso, adicionamos dois scripts no final da tag <em>body. <\/em>Note que adicionamos o React e o React DOM, mas por que? Porque o React n\u00e3o depende do browser, podendo ser usado fora dele. Temos como exemplo em dispositivos m\u00f3veis usando o React Native.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Ap\u00f3s adicionar as tags, j\u00e1 podemos rodar o arquivo JavaScript, visto que j\u00e1 temos o React. Podemos fazer isso de forma <em>inline <\/em>ou importando.<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;script src=\u201dapp.js\u201d&gt;\r\n   &lt;!-- or \u2192\r\n&lt;script&gt;\r\n\t\/\/meu app \r\n&lt;\/script&gt;\r\n&lt;\/script&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Para usarmos o <strong>JSX <\/strong>precisamos de um arquivo extra: <strong>Babel<\/strong><\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;script src=\u201dhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/6.0.0\/browser.min.js\u201d&gt;&lt;\/script&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Feito isso, vamos adicionar um script especial <em>text\/babel <\/em>do tipo MIME:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;script src=\u201dapp.js\u201d type=\u201dtext\/babel\u201d&gt;&lt;\/script&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Com isso configurado, j\u00e1 podemos adicionar o <strong>JSX <\/strong>no arquivo <strong>app.js<\/strong><\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const Button = () =&gt; {\r\nreturn &lt;button&gt;Clic a me&lt;\/button&gt;\r\nReactDOM.render(&lt;Button \/&gt;, document.getElementById(\u2018root\u2019));\r\n\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Esse tipo de configura\u00e7\u00e3o \u00e9 ideal quando desejamos fazer um prot\u00f3tipo de forma mais r\u00e1pida, sem precisar fazer uma configura\u00e7\u00e3o mais complexa.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-usando-create-react-app\">Usando create-react-app<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><strong>Create-react-app, <\/strong>\u00e9 um projeto que te ajuda a come\u00e7ar a desenvolver projetos React com o p\u00e9 direito, sem a necessidade de fazer qualquer configura\u00e7\u00e3o extra, sem se preocupar em configurar o <em>babel<\/em> ou <em>webpack.<\/em><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Para que isso seja poss\u00edvel, vai precisar ter instalado na sua m\u00e1quina o Node.JS e o npm ou o yarn, se preferir.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-componentes-no-reactjs\">Componentes no ReactJS<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Um componente \u00e9 um peda\u00e7o isolado de uma interface. Por exemplo, em uma p\u00e1gina de um blog, \u00e9 t\u00edpico termos na homepage uma componente sidebar e um componente que \u00e9 a lista dos posts. Em resumo, na filosofia do React tudo \u00e9 componente.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Isso torna o desenvolvimento e o ato de aprender react muito mais simples!<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" class=\"wp-image-11369\" src=\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/11\/componentes-react.png\" alt=\"componentes-aprender-react\" width=\"592\" height=\"409\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/componentes-react.png 608w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/componentes-react-150x104.png 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/componentes-react-100x69.png 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/componentes-react-600x414.png 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/componentes-react-450x311.png 450w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p>Conhe\u00e7a os <a href=\"https:\/\/geekblogti.wpengine.com\/criando-componentes-react-componentes-de-classe-e-funcional-sem-estado\/\" target=\"_blank\" rel=\"noreferrer noopener\">Componentes do React<\/a>!<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-custom-components\">Custom components<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Existem duas formas que escrevemos componentes no React:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-functional-component\">Functional component<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const BlogPost = () =&gt; {\r\n return (\r\n&lt;div&gt;\r\n     &lt;h1&gt;Titulo&lt;\/h1&gt;\r\n     &lt;p&gt;Descri\u00e7\u00e3o&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n)\r\n} <\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-class-component\">Class component<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import React, { Component } from \u2018react;\r\n\r\nclass BlogPost extends Component {\r\n  render () {\r\n  return (\r\n  &lt;div&gt;\r\n    &lt;h1&gt;Titulo&lt;\/h1&gt;\r\n    &lt;p&gt;Descri\u00e7\u00e3o&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n)\r\n}\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">At\u00e9 recentemente, <em>class component<\/em> era a \u00fanica forma que t\u00ednhamos de definir um componente que poderia armazenar um estado e que poderia acessar os ciclos de vidas de um componente, quando ele renderiza, atualiza ou remove.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Mas com a chegada dos <em>Hooks <\/em>essa forma foi mudada, hoje temos os nossos componentes funcionais mais poderosos e teremos no futuro poucos casos de uso dos <em>class components.<\/em><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-jsx\">JSX<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">JSX \u00e9 abrevia\u00e7\u00e3o de JavaScriptXML. O React usa o JSX para facilitar a leitura e grava\u00e7\u00e3o do c\u00f3digo HTML, al\u00e9m de melhorar o desempenho do site ou app. O JSX foi introduzido pelo React.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">\u00c9 bem legal trabalhar com o JSX na constru\u00e7\u00e3o de componentes de UI. Em um primeiro momento, voc\u00ea pode pensar que ao usar o JSX, estamos misturando HTML com JavaScript, mas n\u00e3o \u00e9 a verdade!<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O que acontece quando usamos a syntax JSX \u00e9 que estamos escrevendo uma syntax de um componente declarativo.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const element = &lt;h1&gt;Hello, World!&lt;\/h1&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Essa \u00e9 a forma como declaramos um <em>h1<\/em> usando JSX. Parece que estamos misturando <em>html <\/em>e <em>JavaScript, <\/em>mas \u00e9 tudo <em>JavaScript <\/em>a\u00ed<em>. <\/em>O que est\u00e1 parecendo <strong>HTML, <\/strong>na verdade \u00e9 uma syntatic sugar para definirmos os componentes e suas posi\u00e7\u00f5es dentro da marca\u00e7\u00e3o. Existe muito ainda a se falar sobre o <strong>JSX, <\/strong>mas para esse artigo, acredito ser o essencial.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-state\">State<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-como-interagir-com-os-estados-dos-seus-componentes\">Como interagir com os estados dos seus componentes<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Vamos ver um exemplo de como definir um state, usando como exemplo um componente de blog que ter\u00e1 um state de <strong>clicked.<\/strong> No componente construtor vamos inicializar com o <strong>this.state.<\/strong><\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>class BlogPost extends Component {\r\n constructor(props) {\r\n super(props)\r\nthis.state = { clicked: false}\r\n\r\n}\r\n  render () {\r\n  return (\r\n  &lt;div&gt;\r\n    &lt;h1&gt;Titulo&lt;\/h1&gt;\r\n    &lt;p&gt;Descri\u00e7\u00e3o&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n)\r\n}\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-acessando-o-estado-aka-state\">Acessando o estado aka state<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Acessamos o <em>estado clicked <\/em>referenciando ele <em>this.state.clicked:<\/em><\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>class BlogPost extends Component {\r\n constructor(props) {\r\n super(props)\r\nthis.state = { clicked: false}\r\n\r\n}\r\n  render () {\r\n  return (\r\n  &lt;div&gt;\r\n    &lt;h1&gt;Titulo&lt;\/h1&gt;\r\n    &lt;p&gt;Descri\u00e7\u00e3o&lt;\/p&gt;\r\n     &lt;p&gt;Clicked: {this.state.clicked}&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n)\r\n}\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-mudando-o-estado\">Mudando o estado<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">O estado de uma aplica\u00e7\u00e3o nunca deve ser mudado diretamente:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>this.state.clicked = true;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Pelo contr\u00e1rio, devemos sempre usar o <strong>setState(), <\/strong>passando ele em um objeto.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>this.setState({ clicked: true })<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-porque-devemos-usar-sempre-o-setstate\">Porque devemos usar sempre o setState?<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Usamos isso por que o <em>setState <\/em>informa ao React que o estado do componente mudou, o que vai gerar uma s\u00e9rie de eventos e atualiza\u00e7\u00f5es posteriores.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-props\">Props<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-como-usar-props-para-passar-dados-em-componentes-react\">Como usar props para passar dados em componentes React<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><strong>Props <\/strong>\u00e9 como passamos propriedades nos nossos componentes, come\u00e7ando pelo componente principal, todo o componente filho vai receber as propriedades do parente. Em um <em>function component<\/em>, as props devem ser passadas, usando a palavra reservada <strong>props<\/strong> como o argumento da fun\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>class BlogPost = props =&gt; {\r\n  render () {\r\n  return (\r\n  &lt;div&gt;\r\n    &lt;h1&gt;{props.titulo}&lt;\/h1&gt;\r\n    &lt;p&gt;{props.descricao}&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n)\r\n}\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Em uma <em>class component<\/em>, as props s\u00e3o passadas por default, sem a necessidade de adicionar nenhuma palavra especial, e conseguimos acessar a props usando o <strong>this.props<\/strong> no componente.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import React, { Component } from \u2018react;\r\n\r\nclass BlogPost extends Component {\r\n  render () {\r\n  return (\r\n  &lt;div&gt;\r\n    &lt;h1&gt;{this.props.titulo}&lt;\/h1&gt;\r\n    &lt;p&gt;{this.props.descricao}&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n)\r\n}\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Passando propriedades nos componentes \u00e9 uma forma excelente de passar valores para a nossa aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-conclus-o\">Conclus\u00e3o<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Aprender React pode te exigir algumas horas de estudo e mais algumas horas em projetos pr\u00e1ticos para que se entenda tudo da melhor forma. Mesmo com o certo n\u00edvel de complexidade, continua sendo uma das melhores op\u00e7\u00f5es para atuar no Front-End e aplica\u00e7\u00f5es web.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Espero que voc\u00ea tenha gostado do artigo! Deixe seu coment\u00e1rio abaixo e at\u00e9 o pr\u00f3ximo artigo!<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bit.ly\/2V9r2YL\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"200\" class=\"wp-image-11376\" src=\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/11\/cta2-aprender-react.png\" alt=\"\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta2-aprender-react.png 720w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta2-aprender-react-150x42.png 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta2-aprender-react-100x28.png 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta2-aprender-react-600x167.png 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/cta2-aprender-react-450x125.png 450w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/figure>\r\n","protected":false},"excerpt":{"rendered":"<p>A popularidade do React JS \u00e9 grande, por isso achei necess\u00e1rio trazer um conte\u00fado introdut\u00f3rio para guiar o seu conhecimento e te ajudar a aprender React JS! Uma das bibliotecas mais famosas do mundo de front-end possui diversas ferramentas para auxiliar no desenvolvimento de aplicativos web. Voc\u00ea vai conhecer mais sobre as vantagens de usar [&hellip;]<\/p>\n","protected":false},"author":167,"featured_media":11370,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-11299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.3 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como aprender React: um guia para iniciar seus estudos!<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a os motivos que fizeram o React Js se tornar t\u00e3o popular e acompanhe o guia para aprender React JS de uma forma f\u00e1cil e direcionada.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como aprender React JS e dicas de carreira\" \/>\n<meta property=\"og:description\" content=\"A popularidade do React JS \u00e9 grande, por isso achei necess\u00e1rio trazer um conte\u00fado introdut\u00f3rio para guiar o seu conhecimento e te ajudar a aprender React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-27T18:19:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-29T14:25:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"796\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Como aprender React JS e dicas de carreira\",\"datePublished\":\"2020-11-27T18:19:37+00:00\",\"dateModified\":\"2024-10-29T14:25:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/\"},\"wordCount\":1486,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/aprender-react.png\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/\",\"name\":\"Como aprender React: um guia para iniciar seus estudos!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/aprender-react.png\",\"datePublished\":\"2020-11-27T18:19:37+00:00\",\"dateModified\":\"2024-10-29T14:25:57+00:00\",\"description\":\"Conhe\u00e7a os motivos que fizeram o React Js se tornar t\u00e3o popular e acompanhe o guia para aprender React JS de uma forma f\u00e1cil e direcionada.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/como-aprender-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/aprender-react.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/aprender-react.png\",\"width\":796,\"height\":350,\"caption\":\"como-aprender-react\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/como-aprender-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Como aprender React JS e dicas de carreira\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como aprender React: um guia para iniciar seus estudos!","description":"Conhe\u00e7a os motivos que fizeram o React Js se tornar t\u00e3o popular e acompanhe o guia para aprender React JS de uma forma f\u00e1cil e direcionada.","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.geekhunter.com\/pt\/blog\/como-aprender-react\/","og_locale":"pt_BR","og_type":"article","og_title":"Como aprender React JS e dicas de carreira","og_description":"A popularidade do React JS \u00e9 grande, por isso achei necess\u00e1rio trazer um conte\u00fado introdut\u00f3rio para guiar o seu conhecimento e te ajudar a aprender React","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2020-11-27T18:19:37+00:00","article_modified_time":"2024-10-29T14:25:57+00:00","og_image":[{"width":796,"height":350,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png","type":"image\/png"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Como aprender React JS e dicas de carreira","datePublished":"2020-11-27T18:19:37+00:00","dateModified":"2024-10-29T14:25:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/"},"wordCount":1486,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/","name":"Como aprender React: um guia para iniciar seus estudos!","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png","datePublished":"2020-11-27T18:19:37+00:00","dateModified":"2024-10-29T14:25:57+00:00","description":"Conhe\u00e7a os motivos que fizeram o React Js se tornar t\u00e3o popular e acompanhe o guia para aprender React JS de uma forma f\u00e1cil e direcionada.","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/como-aprender-react\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/aprender-react.png","width":796,"height":350,"caption":"como-aprender-react"},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/como-aprender-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Como aprender React JS e dicas de carreira"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/11299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=11299"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/11299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/11370"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=11299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=11299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=11299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}