{"id":59875,"date":"2023-06-01T06:03:43","date_gmt":"2023-06-01T09:03:43","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59875&#038;preview=true&#038;preview_id=59875"},"modified":"2025-01-31T11:15:13","modified_gmt":"2025-01-31T14:15:13","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/","title":{"rendered":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React"},"content":{"rendered":"<p>Atualmente, o <a href=\"https:\/\/kinsta.com\/pt\/topicos\/react\/\">React<\/a> \u00e9 uma das <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">bibliotecas JavaScript<\/a> mais populares. Ela pode ser usada para criar aplicativos din\u00e2micos e responsivos, permite melhor desempenho e pode ser facilmente ampliada. A l\u00f3gica subjacente \u00e9 baseada em componentes que podem ser reutilizados em diferentes contextos, reduzindo a necessidade de escrever o mesmo c\u00f3digo v\u00e1rias vezes. Em resumo, com o React voc\u00ea pode criar <a href=\"https:\/\/kinsta.com\/pt\/topicos\/react\/\">aplicativos eficientes e poderosos<\/a>.<\/p>\n<p>Portanto, nunca houve um momento melhor para aprender a criar aplicativos React.<\/p>\n<p>No entanto, sem um entendimento s\u00f3lido de alguns recursos-chave do <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, construir aplicativos React pode ser dif\u00edcil ou at\u00e9 mesmo imposs\u00edvel.<\/p>\n<p>Por esse motivo, compilamos uma lista de recursos e conceitos do JavaScript que voc\u00ea precisa conhecer antes de come\u00e7ar com o React. Quanto melhor voc\u00ea entender esses conceitos, mais f\u00e1cil ser\u00e1 para voc\u00ea construir aplicativos React profissionais.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript e ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a> \u00e9 uma linguagem de script popular usada em conjunto com <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> e CSS para criar p\u00e1ginas din\u00e2micas na web. Enquanto o HTML \u00e9 usado para criar a estrutura de uma p\u00e1gina da web e o CSS para criar o estilo e o layout de seus elementos, o JavaScript \u00e9 a linguagem usada para adicionar comportamento \u00e0 p\u00e1gina, ou seja, para criar funcionalidade e interatividade.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O JavaScript foi desenvolvido por Brendan Eich, da Netscape Communications, em 1995, com o objetivo de adicionar interatividade \u00e0s p\u00e1ginas da web no navegador Netscape Navigator.<\/strong><\/p>\n<\/aside>\n\n<p>Desde ent\u00e3o, a linguagem foi adotada pelos principais navegadores e um documento foi escrito para descrever a maneira como o JavaScript deveria funcionar: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">o padr\u00e3o ECMAScript<\/a>.<\/p>\n<p>A partir de 2015, uma atualiza\u00e7\u00e3o do padr\u00e3o ECMAScript \u00e9 lan\u00e7ada anualmente e, portanto, novos recursos s\u00e3o adicionados ao JavaScript todos os anos.<\/p>\n<p>O <a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> foi a sexta vers\u00e3o do padr\u00e3o e, portanto, tamb\u00e9m \u00e9 conhecido como <strong>ES6<\/strong>. As vers\u00f5es seguintes s\u00e3o marcadas em progress\u00e3o, de modo que nos referimos ao ECMAScript 2016 como ES7, ao ECMAScript 2017 como ES8 e assim por diante.<\/p>\n<p>Para garantir que os recursos mais recentes do JavaScript adicionados ao seu aplicativo JS funcionem como esperado em todos os navegadores da web, voc\u00ea tem tr\u00eas op\u00e7\u00f5es:<\/p>\n<ol>\n<li>Esperar pelo Suporte dos Navegadores: Voc\u00ea pode aguardar at\u00e9 que todos os principais navegadores forne\u00e7am suporte para os novos recursos que voc\u00ea est\u00e1 usando. No entanto, isso pode n\u00e3o ser vi\u00e1vel se voc\u00ea precisar dos recursos espec\u00edficos para o seu aplicativo e n\u00e3o puder esperar pela ado\u00e7\u00e3o generalizada pelos navegadores.<\/li>\n<li>Usar um Polyfill: Um polyfill \u00e9 &#8220;um snippet de c\u00f3digo (geralmente JavaScript na web) usado para fornecer funcionalidade moderna em navegadores mais antigos que n\u00e3o a suportam nativamente&#8221; (consulte tamb\u00e9m a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>. Os polyfills preenchem as lacunas de compatibilidade, permitindo que voc\u00ea use os recursos mais recentes do JavaScript, mesmo em navegadores mais antigos.<\/li>\n<li>Usar um Transpilador JavaScript<strong>:<\/strong> Voc\u00ea pode usar um transpilador JavaScript, como o\u00a0<a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> ou o <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, que converte o c\u00f3digo ECMAScript 2015+ em uma vers\u00e3o JavaScript compat\u00edvel com todos os navegadores.<\/li>\n<\/ol>\n\n<h2>Declara\u00e7\u00f5es vs express\u00f5es<\/h2>\n<p>Entender a diferen\u00e7a entre declara\u00e7\u00f5es (statements) e express\u00f5es (expressions) \u00e9 essencial ao construir aplicativos React. Vamos voltar aos conceitos b\u00e1sicos de programa\u00e7\u00e3o por um momento.<\/p>\n<p>Um programa de computador \u00e9 uma lista de instru\u00e7\u00f5es a serem executadas por um computador. Essas instru\u00e7\u00f5es s\u00e3o chamadas de <strong>declara\u00e7\u00f5es<\/strong>.<\/p>\n<p>Ao contr\u00e1rio das declara\u00e7\u00f5es, <strong>express\u00f5es<\/strong> s\u00e3o fragmentos de c\u00f3digo que produzem um valor. Em uma declara\u00e7\u00e3o, uma express\u00e3o \u00e9 uma parte que retorna um valor e geralmente a vemos no lado direito de um sinal de igual.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Uma declara\u00e7\u00e3o \u00e9 um bloco de c\u00f3digo que faz algo.<\/strong><\/p>\n<\/aside>\n\n<p>Considerando que:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Uma express\u00e3o \u00e9 um fragmento de c\u00f3digo que produz um valor.<\/strong><\/p>\n<\/aside>\n\n<p>As declara\u00e7\u00f5es em JavaScript podem ser blocos ou linhas de c\u00f3digo que geralmente terminam com ponto e v\u00edrgula ou est\u00e3o entre chaves.<\/p>\n<p>Aqui est\u00e1 um exemplo simples de uma declara\u00e7\u00e3o em JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>A declara\u00e7\u00e3o acima escreve <code>\"Hello World!\"<\/code> em um elemento DOM com <code>id=\"hello\"<\/code>.<\/p>\n<p>Como j\u00e1 mencionamos, as express\u00f5es produzem um valor ou s\u00e3o elas pr\u00f3prias um valor. Considere o exemplo a seguir:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> \u00e9 uma express\u00e3o, pois retorna um valor.<\/p>\n<p>Um exemplo adicional deve ajudar a esclarecer a diferen\u00e7a entre express\u00f5es e declara\u00e7\u00f5es:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>No exemplo acima,<\/p>\n<ul>\n<li>a primeira linha \u00e9 uma instru\u00e7\u00e3o, em que <code>\"Hello World!\"<\/code> \u00e9 uma express\u00e3o,<\/li>\n<li>a declara\u00e7\u00e3o da fun\u00e7\u00e3o \u00e9 uma instru\u00e7\u00e3o, em que o par\u00e2metro <code>msg<\/code> passado para a fun\u00e7\u00e3o \u00e9 uma express\u00e3o,<\/li>\n<li>a linha que imprime a mensagem no console \u00e9 uma instru\u00e7\u00e3o, em que novamente o par\u00e2metro <code>msg<\/code> \u00e9 uma express\u00e3o.<\/li>\n<\/ul>\n<h3>Por que as express\u00f5es s\u00e3o importantes no React?<\/h3>\n<p>Ao <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-react\/\">criar um aplicativo React<\/a>, voc\u00ea pode <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">injetar express\u00f5es JavaScript em seu c\u00f3digo JSX<\/a>. Por exemplo, voc\u00ea pode passar uma vari\u00e1vel, escrever um manipulador de eventos ou uma condi\u00e7\u00e3o. Para fazer isso, voc\u00ea precisa incluir seu c\u00f3digo JS entre par\u00eanteses.<\/p>\n<p>Por exemplo, voc\u00ea pode passar uma vari\u00e1vel:<\/p>\n<pre><code class=\"language-javascript\">const Message = () =&gt; {\n\tconst name = \"Carlo\";\n\treturn &lt;p&gt;Welcome {name}!&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>Em resumo, os par\u00eanteses informam ao transpilador que voc\u00ea deve processar o c\u00f3digo entre par\u00eanteses como c\u00f3digo JS. Tudo o que vem antes da tag de abertura <code>&lt;p&gt;<\/code> e depois da tag de fechamento <code>&lt;\/p&gt;<\/code> \u00e9 c\u00f3digo JavaScript normal. Tudo o que estiver dentro das tags de abertura <code>&lt;p&gt;<\/code> e de fechamento <code>&lt;\/p&gt;<\/code> \u00e9 processado como c\u00f3digo JSX.<\/p>\n<p>Aqui est\u00e1 outro exemplo:<\/p>\n<pre><code class=\"language-jsx\">const Message = () =&gt; {\t\n\tconst name = \"Ann\";\n\tconst heading = &lt;h3&gt;Welcome {name}&lt;\/h3&gt;;\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t{heading}\n\t\t\t&lt;p&gt;This is your dashboard.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode passar um objeto:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22',\n\t\tdescription: 'Content Writer'\n\t}\n\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h2&gt;Welcome {person.name}&lt;\/h2&gt;\n\t\t\t&lt;img\n\t\t\t\tclassName=\"card\"\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;Description: {person.description}.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>E abaixo voc\u00ea encontra um exemplo mais abrangente:<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Observe os par\u00eanteses duplos nos atributos <code>style<\/code> nos elementos <code>img<\/code> e <code>div<\/code>. Usamos par\u00eanteses duplos para passar dois objetos que cont\u00eam estilos de cart\u00e3o e imagem.<\/p>\n<figure id=\"attachment_152320\" aria-describedby=\"caption-attachment-152320\" style=\"width: 1360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152320 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/card-example.jpg\" alt=\"Um exemplo de cart\u00e3o criado com o React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Um exemplo de cart\u00e3o criado com o React<\/figcaption><\/figure>\n<p>Voc\u00ea deve ter notado que, em todos os exemplos acima, inclu\u00edmos express\u00f5es JavaScript em <a href=\"https:\/\/kinsta.com\/pt\/blog\/sintaxe-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O JSX s\u00f3 aceita express\u00f5es JavaScript entre par\u00eanteses. Voc\u00ea n\u00e3o tem permiss\u00e3o para escrever declara\u00e7\u00f5es em seu c\u00f3digo JSX.<\/strong><\/p>\n<p><strong>Isso inclui:<\/strong><\/p>\n<ul>\n<li><strong>Vari\u00e1veis<\/strong><\/li>\n<li><strong>Strings com aspas<\/strong><\/li>\n<li><strong>Chamadas de fun\u00e7\u00e3o<\/strong><\/li>\n<li><strong>Objetos<\/strong><\/li>\n<li><strong>Express\u00f5es condicionais<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Imutabilidade no React<\/h2>\n<p>Mutabilidade e imutabilidade s\u00e3o <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">dois conceitos fundamentais<\/a> na programa\u00e7\u00e3o funcional e orientada a objetos.<\/p>\n<p>Imutabilidade significa que um valor n\u00e3o pode ser alterado depois de ter sido criado. Mutabilidade significa, \u00e9 claro, o oposto.<\/p>\n<p>No Javascript, os <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">valores primitivos<\/a> s\u00e3o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">imut\u00e1veis<\/a>, o que significa que, uma vez criado, ele n\u00e3o pode ser alterado. Por outro lado, arrays e objetos s\u00e3o mut\u00e1veis, pois suas propriedades e elementos podem ser alterados sem atribuir um novo valor.<\/p>\n<p>H\u00e1 v\u00e1rios motivos para voc\u00ea usar objetos imut\u00e1veis no JavaScript:<\/p>\n<ul>\n<li>Melhor desempenho<\/li>\n<li>Redu\u00e7\u00e3o do consumo de mem\u00f3ria<\/li>\n<li>Seguran\u00e7a da thread (thread-safety)<\/li>\n<li>Facilidade de codifica\u00e7\u00e3o e depura\u00e7\u00e3o<\/li>\n<\/ul>\n<p>Seguindo o padr\u00e3o de imutabilidade, uma vez que uma vari\u00e1vel ou objeto \u00e9 atribu\u00eddo, ele n\u00e3o pode ser reatribu\u00eddo ou alterado. Quando precisar modificar dados, voc\u00ea deve criar uma c\u00f3pia deles e modificar seu conte\u00fado, deixando o conte\u00fado original inalterado.<\/p>\n<p>A<strong> imutabilidade<\/strong> tamb\u00e9m \u00e9 um conceito fundamental no React.<\/p>\n<p>A <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o do React<\/a> afirma que:<\/p>\n<blockquote><p>O estado de um componente de classe est\u00e1 dispon\u00edvel como <code>this.state<\/code>. O campo state deve ser um objeto. N\u00e3o altere o estado diretamente. Se voc\u00ea quiser alterar o estado, chame o m\u00e9todo <code>setState<\/code> com o novo estado.<\/p><\/blockquote>\n<p>Sempre que o estado de um componente muda, o React calcula se voc\u00ea deve renderizar novamente o componente e atualizar o Virtual DOM. Se o React n\u00e3o tivesse o registro do estado anterior, n\u00e3o poderia determinar se o componente deveria ser renderizado novamente ou n\u00e3o. A documenta\u00e7\u00e3o do React fornece um <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">excelente exemplo disso<\/a>.<\/p>\n<p>Quais recursos JavaScript podemos usar para garantir a imutabilidade do objeto de estado no React? Vamos descobrir!<\/p>\n<h3>Declarando vari\u00e1veis<\/h3>\n<p>Voc\u00ea tem tr\u00eas maneiras de declarar uma vari\u00e1vel em JavaScript: <code>var<\/code>, <code>let<\/code>, e <code>const<\/code>.<\/p>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">declara\u00e7\u00e3o<code>var<\/code><\/a> existe desde o in\u00edcio do JavaScript. Ela \u00e9 usada para declarar uma vari\u00e1vel com escopo de fun\u00e7\u00e3o ou global, opcionalmente inicializando com um valor.<\/p>\n<p>Ao declarar uma vari\u00e1vel usando <code>var<\/code>, voc\u00ea pode declarar novamente e atualizar essa vari\u00e1vel no escopo global e local. O c\u00f3digo a seguir \u00e9 permitido:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a variable\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same variable\nvar msg = \"Goodbye!\"\n\n\/\/ Update the variable\nmsg = \"Hello again!\"<\/code><\/pre>\n<p>As declara\u00e7\u00f5es <code>var<\/code> s\u00e3o processadas antes da execu\u00e7\u00e3o de qualquer c\u00f3digo. Como resultado, declarar uma vari\u00e1vel em qualquer lugar do c\u00f3digo \u00e9 equivalente a declar\u00e1-la no topo. Esse comportamento \u00e9 chamado de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>.<\/p>\n<p>Vale ressaltar que apenas a declara\u00e7\u00e3o da vari\u00e1vel \u00e9 &#8220;hoisted&#8221;, n\u00e3o a inicializa\u00e7\u00e3o, que ocorre apenas quando o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\">fluxo de controle<\/a> alcan\u00e7a a instru\u00e7\u00e3o de atribui\u00e7\u00e3o. At\u00e9 esse ponto, a vari\u00e1vel \u00e9 <code>undefined<\/code>:<\/p>\n<pre><code class=\"language-js\">console.log(msg); \/\/ undefined\nvar msg = \"Hello!\";\nconsole.log(msg); \/\/ Hello!<\/code><\/pre>\n<p>O escopo de uma <code>var<\/code> declarada com var em uma fun\u00e7\u00e3o JavaScript abrange todo o <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">corpo dessa fun\u00e7\u00e3o<\/a>.<\/p>\n<p>Isso significa que a vari\u00e1vel n\u00e3o \u00e9 definida no n\u00edvel do bloco, mas no n\u00edvel da fun\u00e7\u00e3o inteira. Isso leva a v\u00e1rios problemas que podem tornar seu c\u00f3digo JavaScript problem\u00e1tico e de dif\u00edcil manuten\u00e7\u00e3o.<\/p>\n<p>Para corrigir esses problemas, o ES6 introduziu a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">palavra-chave <code>let<\/code><\/a>.<\/p>\n<blockquote><p>A declara\u00e7\u00e3o <code>let<\/code> declara uma vari\u00e1vel local com<strong> escopo de bloco<\/strong> e, opcionalmente, a inicializa com um valor.<\/p><\/blockquote>\n<p>Quais s\u00e3o as vantagens de <code>let<\/code> em rela\u00e7\u00e3o ao <code>var<\/code>? Aqui est\u00e3o algumas:<\/p>\n<ul>\n<li><strong><code>let<\/code> declara uma vari\u00e1vel com escopo de bloco<\/strong>, enquanto <code>var<\/code> declara uma vari\u00e1vel globalmente ou localmente para uma fun\u00e7\u00e3o inteira, independentemente do escopo de bloco.<\/li>\n<li><strong>Vari\u00e1veis globais <code>let<\/code> n\u00e3o s\u00e3o propriedades do objeto <code>window<\/code><\/strong>. Voc\u00ea n\u00e3o pode acess\u00e1-las usando <code>window.nomeDaVariavel<\/code>.<\/li>\n<li><strong>A vari\u00e1vel <code>let<\/code> s\u00f3 pode ser acessada ap\u00f3s \u00e0 sua declara\u00e7\u00e3o ser alcan\u00e7ada<\/strong>. A vari\u00e1vel n\u00e3o \u00e9 inicializada at\u00e9 que o fluxo de controle alcance a linha de c\u00f3digo onde ela \u00e9 declarada (as declara\u00e7\u00f5es <code>let<\/code> <strong>n\u00e3o s\u00e3o &#8220;hoisted&#8221;<\/strong>).<\/li>\n<li><strong>Tentar redeclarar uma vari\u00e1vel com <code>let<\/code> resulta em um erro de sintaxe (<code>SyntaxError<\/code>)<\/strong>.<\/li>\n<\/ul>\n<p>Como as vari\u00e1veis declaradas usando <code>var<\/code> n\u00e3o podem ter escopo de bloco, se voc\u00ea definir uma vari\u00e1vel usando <code>var<\/code> em um loop ou dentro de uma declara\u00e7\u00e3o <code>if<\/code>, ela poder\u00e1 ser acessada de fora do bloco, o que pode levar a um c\u00f3digo com erros.<\/p>\n<p>O c\u00f3digo no primeiro exemplo \u00e9 executado sem erros. Agora, substitua <code>var<\/code> por <code>let<\/code> no bloco de c\u00f3digo visto acima:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>No segundo exemplo, o uso de <code>let<\/code> em vez de <code>var<\/code> produz um <code>Uncaught ReferenceError<\/code>:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Uncaught ReferenceError no Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError no Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Portanto, como regra geral, voc\u00ea deve sempre usar <code>let<\/code> em vez de <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>O ES6 tamb\u00e9m introduz uma terceira palavra-chave: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> \u00e9 bastante semelhante a <code>let<\/code>, mas com uma diferen\u00e7a fundamental:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f As vari\u00e1veis declaradas com <code>const<\/code> n\u00e3o podem receber um valor, exceto no momento em que s\u00e3o declaradas.<\/strong><\/p>\n<\/aside>\n\n<p>Considere o exemplo a seguir:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>O c\u00f3digo acima resultaria em um <a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-no-javascript\/#typeerror\">TypeError<\/a>:<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"Uncaught TypeError: Atribui\u00e7\u00e3o a uma vari\u00e1vel constante no Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\">Uncaught TypeError: Atribui\u00e7\u00e3o a uma vari\u00e1vel constante no Google Chrome<\/figcaption><\/figure>\n<p>Al\u00e9m disso:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Voc\u00ea n\u00e3o pode declarar um <code>const<\/code> sem atribuir um valor a ele.<\/strong><\/p>\n<\/aside>\n\n<p>Se voc\u00ea declarar um <code>const<\/code> sem dar a ele um valor, ocorrer\u00e1 o seguinte <code>SyntaxError<\/code> (consulte tamb\u00e9m <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let e const<\/a>):<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught TypeError: Assignment to constant variable no Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\">Uncaught TypeError: Assignment to constant variable no Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Uma constante n\u00e3o pode ser redeclarada e seu valor n\u00e3o pode ser alterado por meio de reatribui\u00e7\u00e3o.<\/strong><\/p>\n<\/aside>\n\n<p>Mas se uma constante for uma array ou um objeto, voc\u00ea poder\u00e1 editar propriedades ou itens dentro dessa array, ou objeto.<\/p>\n<p>Por exemplo, voc\u00ea pode alterar, adicionar e remover itens da array:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant array\nconst cities = [\"London\", \"New York\", \"Sydney\"];\n\n\/\/ Change an item\ncities[0] = \"Madrid\";\n\n\/\/ Add an item\ncities.push(\"Paris\");\n\n\/\/ Remove an item\ncities.pop();\n\nconsole.log(cities);\n\n\/\/ Array(3)\n\/\/ 0: \"Madrid\"\n\/\/ 1: \"New York\"\n\/\/ 2: \"Sydney\"<\/code><\/pre>\n<p>Mas voc\u00ea n\u00e3o tem permiss\u00e3o para reatribuir a array:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>O c\u00f3digo acima resultaria em um <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a>.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError: Assignment to constant variable no Chrome\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError: Assignment to constant variable<\/em> no Chrome<\/figcaption><\/figure>\n<p>Voc\u00ea pode adicionar, reatribuir e remover propriedades e m\u00e9todos de objetos:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Mas voc\u00ea n\u00e3o tem permiss\u00e3o para reatribuir o pr\u00f3prio objeto. O c\u00f3digo a seguir passaria por um <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\npost = {\n\tid: 1,\n\tname: 'React is powerful',\n\texcerpt: 'React lets you build user interfaces'\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f No React, declarar vari\u00e1veis com <code>const<\/code> \u00e9 o padr\u00e3o. <code>let<\/code> deve ser usado quando <code>const<\/code> n\u00e3o for apropriado. O uso de <code>var<\/code> \u00e9 altamente desencorajado.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>Agora concordamos que o uso do <code>const<\/code> nem sempre garante uma imutabilidade forte (especialmente quando voc\u00ea trabalha com objetos arrays). Ent\u00e3o, como voc\u00ea pode implementar o padr\u00e3o de imutabilidade em seus aplicativos React?<\/p>\n<p>Primeiro, quando quiser impedir que os elementos de uma array ou as propriedades de um objeto sejam modificados, voc\u00ea pode usar o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo est\u00e1tico <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Congelar um objeto impede extens\u00f5es e torna as propriedades existentes n\u00e3o grav\u00e1veis e n\u00e3o configur\u00e1veis. Um objeto congelado n\u00e3o pode mais ser alterado: novas propriedades n\u00e3o podem ser adicionadas, propriedades existentes n\u00e3o podem ser removidas, sua enumerabilidade, configurabilidade, escrevibilidade ou valor n\u00e3o podem ser alterados, e o prot\u00f3tipo do objeto n\u00e3o pode ser reatribu\u00eddo. O m\u00e9todo <code>freeze()<\/code> retorna o mesmo objeto que foi passado como argumento.<\/p><\/blockquote>\n<p>Qualquer tentativa de adicionar, alterar ou remover uma propriedade falhar\u00e1, seja silenciosamente ou lan\u00e7ando um <code>TypeError<\/code>, mais comumente no <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">modo estrito<\/a>.<\/p>\n<p>Voc\u00ea pode usar o <code>Object.freeze()<\/code> dessa forma:<\/p>\n<pre><code class=\"language-js\">'use strict'\n\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\/\/ Freeze the object\nObject.freeze(post);<\/code><\/pre>\n<p>Se agora voc\u00ea tentar adicionar uma propriedade, receber\u00e1 um <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151753 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError: can't define property \"slug\": Object is not extensible no Firefox\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: can&#8217;t define property &#8220;slug&#8221;: Object is not extensible<\/em> no Firefox<\/figcaption><\/figure>\n<p>Quando voc\u00ea tenta reatribuir uma propriedade, obt\u00e9m outro tipo de <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Reassign property\npost.id = 5; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151865\" aria-describedby=\"caption-attachment-151865\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151865 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-read-only-property.jpg\" alt=\"Reatribuir uma propriedade somente leitura gera um Uncaught TypeError\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Reatribuir uma propriedade somente leitura gera um Uncaught TypeError<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151868 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError: Cannot assign to read only property 'id' of object '#&lt;Object&gt;'\u00a0 no Google Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError: Cannot assign to read only property &#8216;id&#8217; of object &#8216;#&lt;Object&gt;&#8217;<\/em>\u00a0 no Google Chrome<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode tentar excluir uma propriedade. O resultado ser\u00e1 outro <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError: property \"excerpt\" is non-configurable and can't be deleted no Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: property &#8220;excerpt&#8221; is non-configurable and can&#8217;t be deleted<\/em> no Firefox<\/figcaption><\/figure>\n<h2>Template Literals<\/h2>\n<p>Quando voc\u00ea precisa combinar strings de caracteres com a sa\u00edda de express\u00f5es em JavaScript, geralmente usa o operador de adi\u00e7\u00e3o <code>+<\/code>. No entanto, voc\u00ea tamb\u00e9m pode usar um recurso do JavaScript que permite incluir express\u00f5es em strings de caracteres sem usar o operador de adi\u00e7\u00e3o: <strong>Template Literals<\/strong>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\" target=\"_blank\" rel=\"noopener noreferrer\">Template Literals<\/a> s\u00e3o um tipo especial de strings de caracteres delimitadas por caracteres de backtick (<code>`<\/code>).<\/p>\n<p>Em Template Literals, voc\u00ea pode incluir placeholders, que s\u00e3o express\u00f5es incorporadas delimitadas por um caractere de d\u00f3lar e envolvidas por par\u00eanteses.<\/p>\n<p>Aqui est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>As strings de caracteres e os placeholders s\u00e3o passados para uma fun\u00e7\u00e3o padr\u00e3o que executa a interpola\u00e7\u00e3o de strings de caracteres para substituir os placeholders e juntar as partes em uma \u00fanica string de caracteres. Voc\u00ea tamb\u00e9m pode substituir a fun\u00e7\u00e3o padr\u00e3o por uma fun\u00e7\u00e3o personalizada.<\/p>\n<p>Voc\u00ea pode usar Template Literals para:<\/p>\n<p><strong>Strings com v\u00e1rias linhas<\/strong>: os caracteres de nova linha fazem parte do template literal.<\/p>\n<pre><code class=\"language-js\">console.log(`Twinkle, twinkle, little bat!\nHow I wonder what you\u2019re at!`);<\/code><\/pre>\n<p><strong>Interpola\u00e7\u00e3o de strings<\/strong>: Sem os Template Literals, voc\u00ea s\u00f3 pode usar o operador de adi\u00e7\u00e3o para combinar a sa\u00edda de express\u00f5es com strings. Veja o exemplo a seguir:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(\"The result of \" + a + \" + \" + b + \" is \" + (a + b));<\/code><\/pre>\n<p>\u00c9 um pouco confuso, n\u00e3o \u00e9? Mas voc\u00ea pode escrever esse c\u00f3digo de uma forma mais leg\u00edvel e de f\u00e1cil manuten\u00e7\u00e3o usando Template Literals:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(`The result of ${ a } + ${ b } is ${ a + b }`);<\/code><\/pre>\n<p>Mas lembre-se de que h\u00e1 uma <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">diferen\u00e7a entre as duas sintaxes<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template literals convertem suas express\u00f5es diretamente em strings de caracteres, enquanto a adi\u00e7\u00e3o converte seus operandos primeiro em primitivos.<\/strong><\/p>\n<\/aside>\n\n<p>Template literals se prestam a v\u00e1rios usos. No exemplo a seguir, usamos um <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">operador tern\u00e1rio<\/a> para atribuir um valor para um atributo <code>class<\/code>.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Abaixo, estamos realizando um c\u00e1lculo simples:<\/p>\n<pre><code class=\"language-js\">const price = 100;\nconst VAT = 0.22;\n\nconsole.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);<\/code><\/pre>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel aninhar Template Literals, incluindo dentro de um espa\u00e7o reservado <code>${expression}<\/code> (mas <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">use modelos aninhados com cuidado<\/a>, pois as estruturas complexas de strings podem ser dif\u00edceis de ler e manter).<\/p>\n<p><strong>Modelos com tags<\/strong>: Como mencionamos acima, tamb\u00e9m \u00e9 poss\u00edvel definir uma fun\u00e7\u00e3o personalizada para realizar a concatena\u00e7\u00e3o de strings. Esse tipo de Template Literals \u00e9 chamado de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">Tagged Template<\/a>.<\/p>\n<blockquote><p>As tags permitem que voc\u00ea analise os Template Literals com uma fun\u00e7\u00e3o. O primeiro argumento de uma fun\u00e7\u00e3o de tag cont\u00e9m uma array de valores de string de caracteres. Os argumentos restantes est\u00e3o relacionados \u00e0s express\u00f5es.<\/p><\/blockquote>\n<p>As tags permitem que voc\u00ea analise Template Literals com uma fun\u00e7\u00e3o personalizada. O primeiro argumento dessa fun\u00e7\u00e3o \u00e9 uma array de strings de caracteres inclu\u00eddas no Template Literals, e os outros argumentos s\u00e3o as express\u00f5es.<\/p>\n<p>Voc\u00ea pode criar uma fun\u00e7\u00e3o personalizada para executar qualquer tipo de opera\u00e7\u00e3o nos argumentos do template e retornar a string manipulada. Aqui est\u00e1 um exemplo muito b\u00e1sico de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">Tagged Template<\/a>.<\/p>\n<pre><code class=\"language-js\">const name = \"Carlo\";\nconst role = \"student\";\nconst organization = \"North Pole University\";\nconst age = 25;\n\nfunction customFunc(strings, ...tags) {\n\tconsole.log(strings); \/\/ ['My name is ', \", I'm \", ', and I am ', ' at ', '', raw: Array(5)]\n\tconsole.log(tags); \/\/ ['Carlo', 25, 'student', 'North Pole University']\n\tlet string = '';\n\tfor ( let i = 0; i &lt; strings.length - 1; i++ ){\n\t\tconsole.log(i + \"\" + strings[i] + \"\" + tags[i]);\n\t\tstring += strings[i] + tags[i];\n\t}\n\treturn string.toUpperCase();\n}\n\nconst output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;\nconsole.log(output);<\/code><\/pre>\n<p>O c\u00f3digo acima imprime os elementos de arrays de <code>strings<\/code> e <code>tags<\/code> e, em seguida, coloca os caracteres da string em mai\u00fasculas antes de imprimir a sa\u00edda no console do navegador.<\/p>\n<h2>Arrow Functions<\/h2>\n<p>Arrow Functions s\u00e3o uma alternativa \u00e0s fun\u00e7\u00f5es an\u00f4nimas (fun\u00e7\u00f5es sem nomes) no JavaScript, mas com algumas diferen\u00e7as e limita\u00e7\u00f5es.<\/p>\n<p>As declara\u00e7\u00f5es a seguir s\u00e3o exemplos v\u00e1lidos de Arrow Functions:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>Voc\u00ea pode omitir os par\u00eanteses se passar apenas um par\u00e2metro para a fun\u00e7\u00e3o. Se voc\u00ea passar dois ou mais par\u00e2metros, dever\u00e1 coloc\u00e1-los entre par\u00eanteses. Aqui est\u00e1 um exemplo disso:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; `${id}: ${title} - ${category}`;\nconsole.log( render ( 5, 'Hello World!', \"JavaScript\" ) );<\/code><\/pre>\n<p>A Arrow function de uma linha retornam um valor por padr\u00e3o. Se voc\u00ea usar a sintaxe de v\u00e1rias linhas, ter\u00e1 de retornar manualmente um valor:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; {\n\tconsole.log( `Post title: ${ title }` );\n\treturn `${ id }: ${ title } - ${ category }`;\n}\nconsole.log( `Post details: ${ render ( 5, 'Hello World!', \"JavaScript\" ) }` );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Voc\u00ea normalmente usar\u00e1 Arrow Function em aplicativos React, a menos que haja um motivo espec\u00edfico para n\u00e3o us\u00e1-las.<\/strong><\/p>\n<\/aside>\n\n<p>Uma diferen\u00e7a fundamental entre fun\u00e7\u00f5es normais e Arrow Functions \u00e9 que Arrow Functions n\u00e3o possuem seu pr\u00f3prio v\u00ednculo com a palavra-chave <code>this<\/code>. Se voc\u00ea tentar usar <code>this<\/code> em uma Arrow Function, ele ser\u00e1 buscado fora do escopo da fun\u00e7\u00e3o.<\/p>\n<p>Para obter uma descri\u00e7\u00e3o mais detalhada das Arrow functions\u00a0e exemplos de uso, leia tamb\u00e9m a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>.<\/p>\n<h2>Classes<\/h2>\n<p>As <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">classes em JavaScript<\/a> s\u00e3o um tipo especial de fun\u00e7\u00e3o para criar objetos que usam o mecanismo de heran\u00e7a protot\u00edpica.<\/p>\n<p>De acordo com a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>,<\/p>\n<blockquote><p>Quando se trata de heran\u00e7a, o JavaScript possui apenas um mecanismo: objetos. Cada objeto tem uma propriedade privada que cont\u00e9m um link para outro objeto chamado de seu prot\u00f3tipo. Esse objeto prot\u00f3tipo tem seu pr\u00f3prio prot\u00f3tipo, e assim por diante, at\u00e9 que um objeto com <code>null<\/code> como prot\u00f3tipo seja alcan\u00e7ado.<\/p><\/blockquote>\n<p>Assim como acontece com as fun\u00e7\u00f5es, voc\u00ea tem duas maneiras de definir uma classe:<\/p>\n<ul>\n<li>Express\u00e3o de classe (class expression)<\/li>\n<li>Declara\u00e7\u00e3o de classe (class declaration)<\/li>\n<\/ul>\n<p>Voc\u00ea pode usar a palavra-chave <code>class<\/code> para definir uma classe dentro de uma express\u00e3o, conforme mostrado no exemplo a seguir:<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Uma classe possui um corpo, que \u00e9 o c\u00f3digo inclu\u00eddo entre chaves. \u00c9 nele que voc\u00ea ir\u00e1 definir o construtor e os m\u00e9todos, que tamb\u00e9m s\u00e3o chamados de membros da classe. O corpo da classe \u00e9 executado no modo estrito (strict mode), mesmo sem usar a diretiva <code>'strict mode'<\/code>.<\/p>\n<p>O m\u00e9todo <code>constructor<\/code> \u00e9 usado para criar e inicializar um objeto criado com uma classe sendo executado automaticamente quando a classe \u00e9 instanciada. Se voc\u00ea n\u00e3o definir um m\u00e9todo construtor em sua classe, o JavaScript usar\u00e1 automaticamente um construtor padr\u00e3o.<\/p>\n<p>Uma classe pode ser estendida usando a palavra-chave <code>extends<\/code>.<\/p>\n<pre><code class=\"language-javascript\">class Book {\n\tconstructor(title, author) {\n\t\tthis.booktitle = title;\n\t\tthis.authorname = author;\n\t}\n\tpresent() {\n\t\treturn this.booktitle + ' is a great book from ' + this.authorname;\n\t}\n}\n\nclass BookDetails extends Book {\n\tconstructor(title, author, cat) {\n\t\tsuper(title, author);\n\t\tthis.category = cat;\n\t}\n\tshow() {\n\t\treturn this.present() + ', it is a ' + this.category + ' book';\n\t}\n}\n\nconst bookInfo = new BookDetails(\"The Fellowship of the Ring\", \"J. R. R. Tolkien\", \"Fantasy\");\nconsole.log(bookInfo.show());<\/code><\/pre>\n<p>Um construtor pode usar a palavra-chave <code>super<\/code> para chamar o construtor principal. Se voc\u00ea passar um argumento para o m\u00e9todo <code>super()<\/code>, esse argumento tamb\u00e9m estar\u00e1 dispon\u00edvel na classe do construtor principal.<\/p>\n<p>Para que voc\u00ea possa se aprofundar mais nas classes JavaScript e em v\u00e1rios exemplos de uso, consulte tamb\u00e9m <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>.<\/p>\n<p>As classes s\u00e3o frequentemente usadas para criar componentes React. Normalmente, voc\u00ea n\u00e3o criar\u00e1 suas pr\u00f3prias classes, mas estender\u00e1 as classes React incorporadas.<\/p>\n<p>Todas as <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">classes no React<\/a> t\u00eam um m\u00e9todo <code>render()<\/code> que retorna um elemento React:<\/p>\n<pre><code class=\"language-javascript\">class Animal extends React.Component {\n\trender() {\n\t\treturn &lt;h2&gt;Hey, I am a {this.props.name}!&lt;\/h2&gt;;\n\t}\n}<\/code><\/pre>\n<p>No exemplo acima, <code>Animal<\/code> \u00e9 um componente de classe. Lembre-se de que:<\/p>\n<ul>\n<li>O nome do componente deve come\u00e7ar com uma letra mai\u00fascula<\/li>\n<li>O componente deve incluir a express\u00e3o <code>extends React.Component<\/code>. Isso d\u00e1 acesso aos m\u00e9todos do <code>React.Component<\/code>.<\/li>\n<li>O m\u00e9todo <code>render()<\/code> retorna o HTML e \u00e9 obrigat\u00f3rio.<\/li>\n<\/ul>\n<p>Ap\u00f3s criar seu componente de classe, voc\u00ea pode renderizar o HTML na p\u00e1gina:<\/p>\n<pre><code class=\"language-javascript\">const root = ReactDOM.createRoot(document.getElementById('root'));\nconst element = &lt;Animal name=\"Rabbit\" \/&gt;;\nroot.render(element);<\/code><\/pre>\n<p>A imagem abaixo mostra o resultado na p\u00e1gina (voc\u00ea pode v\u00ea-lo em <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">a\u00e7\u00e3o no CodePen<\/a>).<\/p>\n<figure id=\"attachment_151880\" aria-describedby=\"caption-attachment-151880\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151880 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"Um componente de classe React simples\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Um componente de classe React simples<\/figcaption><\/figure>\n<p>Observe, no entanto, que o uso de <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">componentes de classe no React n\u00e3o \u00e9 recomendado<\/a>, sendo <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-react\/#12-make-use-of-functional-components\">prefer\u00edvel definir componentes como fun\u00e7\u00f5es<\/a>.<\/p>\n<h2>A palavra-chave &#8216;this&#8217;<\/h2>\n<p>Em JavaScript, a palavra-chave <code>this<\/code> \u00e9 um espa\u00e7o reservado gen\u00e9rico normalmente usado dentro de objetos, classes e fun\u00e7\u00f5es, e se refere a diferentes elementos, dependendo do contexto ou do escopo.<\/p>\n<p><strong>A palavra-chave <code>this<\/code> pode ser usada no escopo global.<\/strong> Se voc\u00ea digitar <code>this<\/code> no console do navegador, obter\u00e1:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Voc\u00ea pode acessar qualquer um dos m\u00e9todos e propriedades do objeto <code>Window<\/code>. Portanto, se voc\u00ea executar <code>this.location<\/code> no console do navegador, obter\u00e1 a seguinte sa\u00edda:<\/p>\n<pre><code>Location {ancestorOrigins: DOMStringList, href: 'https:\/\/kinsta.com\/', origin: 'https:\/\/kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}<\/code><\/pre>\n<p><strong>Quando voc\u00ea usa <code>this<\/code> em um objeto, ele se refere ao pr\u00f3prio objeto.<\/strong> Dessa forma, voc\u00ea pode se referir aos valores de um objeto nos m\u00e9todos do pr\u00f3prio objeto:<\/p>\n<pre><code class=\"language-javascript\">const post = { \n\tid: 5,\n\tgetSlug: function(){\n\t\treturn `post-${this.id}`;\n\t},\n\ttitle: 'Awesome post', \n\tcategory: 'JavaScript' \n};\nconsole.log( post.getSlug );<\/code><\/pre>\n<p>Agora vamos tentar usar <code>this<\/code> em uma fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Se voc\u00ea n\u00e3o estiver no modo estrito, obter\u00e1:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Mas se voc\u00ea invocar o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">modo estrito<\/a>, obter\u00e1 um resultado diferente:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>Nesse caso, a fun\u00e7\u00e3o retorna <code>undefined<\/code>. Isso ocorre porque <code>this<\/code> em uma fun\u00e7\u00e3o se refere ao seu valor expl\u00edcito.<\/p>\n<p>Ent\u00e3o, como voc\u00ea pode definir <code>this<\/code> em uma fun\u00e7\u00e3o?<\/p>\n<p>Primeiro, voc\u00ea pode atribuir manualmente propriedades e m\u00e9todos \u00e0 fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">function doSomething( post ) {\n\tthis.id = post.id;\n\tthis.title = post.title;\n\tconsole.log( `${this.id} - ${this.title}` );\n}\nnew doSomething( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Mas voc\u00ea tamb\u00e9m pode usar os m\u00e9todos <code>call<\/code>, <code>apply<\/code> e <code>bind<\/code>, bem como as arrow functions.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O m\u00e9todo <code>call()<\/code> em uma fun\u00e7\u00e3o aceita um objeto ao qual <code>this<\/code> se refere.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function() {\n\tconsole.log( `${this.id} - ${this.title}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>O m\u00e9todo <code>call()<\/code> pode ser usado em qualquer fun\u00e7\u00e3o e faz exatamente o que diz: chama a fun\u00e7\u00e3o.<\/p>\n<p>Al\u00e9m disso, <code>call()<\/code> aceita qualquer outro par\u00e2metro definido na fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function( cat ) {\n\tconsole.log( `${this.id} - ${this.title} - Category: ${cat}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O m\u00e9todo <code>apply()<\/code> aceita um objeto ao qual <code>this<\/code> far\u00e1 refer\u00eancia e uma array dos par\u00e2metros da fun\u00e7\u00e3o.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function( cat1, cat2 ) {\n\tconsole.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );\n}\ndoSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p>\u270d\ufe0f <strong>O m\u00e9todo <code>bind()<\/code> associa um objeto a uma fun\u00e7\u00e3o para que sempre que voc\u00ea invocar a fun\u00e7\u00e3o, o <code>this<\/code> se refira ao objeto.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Uma alternativa \u00e0s op\u00e7\u00f5es discutidas acima \u00e9 o uso de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">arrow functions<\/a>.<\/p>\n<blockquote><p>As express\u00f5es de arrow functions devem ser usadas somente para fun\u00e7\u00f5es que n\u00e3o sejam de m\u00e9todo, pois elas n\u00e3o t\u00eam seu pr\u00f3prio <code>this<\/code>.<\/p><\/blockquote>\n<p>Isso torna as arrow functions particularmente \u00fateis com manipuladores de eventos.<\/p>\n<p>Isso porque &#8220;quando o c\u00f3digo \u00e9 chamado a partir de um atributo de manipulador de eventos em linha, seu <code>this<\/code> \u00e9 definido como o elemento DOM no qual o ouvinte est\u00e1 posicionado&#8221; (consulte <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>.<\/p>\n<p>Mas as coisas mudam com as arrow functions porque&#8230;<\/p>\n<blockquote><p>&#8230; as arrow functions estabelecem <code>this<\/code> com base no escopo em que a arrow function\u00a0\u00e9 definida, e o valor <code>this<\/code> n\u00e3o muda com base em como a fun\u00e7\u00e3o \u00e9 chamada.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O uso de arrow functions permite que voc\u00ea vincule diretamente o contexto a um manipulador de eventos.<\/strong><\/p>\n<\/aside>\n\n<h3>Vinculando &#8220;this&#8221; aos manipuladores de eventos no React<\/h3>\n<p>No contexto do React, voc\u00ea tem algumas maneiras de garantir que o manipulador de eventos n\u00e3o perca seu contexto:<\/p>\n<p><strong>1. Use <code>bind()<\/code> dentro do m\u00e9todo render:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage.bind( this ) }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>2. Vincule o contexto ao manipulador de eventos no construtor:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. Defina o manipulador de eventos usando arrow functions:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage = () =&gt; {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={this.showMessage}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>4. Use arrow functions no m\u00e9todo de renderiza\u00e7\u00e3o:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage() {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={()=&gt;{this.showMessage()}}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Independentemente do m\u00e9todo escolhido, quando voc\u00ea clica no bot\u00e3o, o console do navegador mostra a seguinte sa\u00edda:<\/p>\n<pre><code>This refers to:  MyComponent {props: {\u2026}, context: {\u2026}, refs: {\u2026}, updater: {\u2026}, state: {\u2026}, \u2026}\nThe message is:  Hello World!<\/code><\/pre>\n<h2>Operador tern\u00e1rio<\/h2>\n<p>O <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">operador condicional<\/a> (ou operador tern\u00e1rio) permite que voc\u00ea escreva express\u00f5es condicionais simples em JavaScript. Ele usa tr\u00eas operandos:<\/p>\n<ul>\n<li>uma condi\u00e7\u00e3o seguida de um ponto de interroga\u00e7\u00e3o (<code>?<\/code>),<\/li>\n<li>uma express\u00e3o a ser executada se a condi\u00e7\u00e3o for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">verdadeira<\/a>, seguida de dois pontos (<code>:<\/code>),<\/li>\n<li>uma segunda express\u00e3o a ser executada se a condi\u00e7\u00e3o for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsa<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel encadear v\u00e1rias express\u00f5es:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>No entanto, tenha cuidado, pois encadear v\u00e1rias express\u00f5es pode levar a um c\u00f3digo confuso e dif\u00edcil de manter.<\/p>\n<p>O operador tern\u00e1rio \u00e9 particularmente \u00fatil no React, especialmente no c\u00f3digo JSX, que aceita apenas express\u00f5es dentro de chaves.<\/p>\n<p>Por exemplo, voc\u00ea pode usar o operador tern\u00e1rio para definir o valor de um atributo com base em uma condi\u00e7\u00e3o espec\u00edfica:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/...',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'light'\n\t}\n\n\treturn (\n\t\t&lt;div\n\t\t\tclassName='card' \n\t\t\tstyle={\n\t\t\t\tperson.theme === 'dark' ? \n\t\t\t\t{ background: 'black', color: 'white' } : \n\t\t\t\t{ background: 'white', color: 'black'} \n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, verificamos a condi\u00e7\u00e3o <code>person.theme === 'dark'<\/code> para definir o valor do atributo <code>style<\/code> do cont\u00eainer <code>div<\/code>.<\/p>\n<h2>Avalia\u00e7\u00e3o de curto-circuito<\/h2>\n<p>O operador l\u00f3gico AND (<code>&&<\/code>) avalia os operandos da esquerda para a direita e retorna <code>true<\/code> somente se todos os operandos forem <code>true<\/code>.<\/p>\n<p>O operador l\u00f3gico AND \u00e9 um <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">operador de curto-circuito<\/a>. Cada operando \u00e9 convertido em um booleano e, se o resultado da convers\u00e3o for <code>false<\/code>, o operador AND para e retorna o valor original do operando falso. Se todos os valores forem <code>true<\/code>, ele retornar\u00e1 o valor original do \u00faltimo operando.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Em JavaScript, <code>true &amp;&amp; expression<\/code> sempre retorna <code>expression<\/code>, e <code>false &amp;&amp; expression<\/code> sempre retorna <code>false<\/code>.<\/strong><\/p>\n<\/aside>\n<strong><br \/>\n<\/strong><br \/>\nA avalia\u00e7\u00e3o de curto-circuito \u00e9 um recurso JavaScript comumente usado no React, pois permite que voc\u00ea produza blocos de c\u00f3digo com base em condi\u00e7\u00f5es espec\u00edficas. <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#add-the-excerpt\">Aqui<\/a> est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, se <code>displayExcerpt<\/code> <strong>AND<\/strong> <code>post.excerpt.rendered<\/code> for avaliado como <code>true<\/code>, o React retornar\u00e1 o bloco final de JSX.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Para recapitular<\/a>, &#8220;se a condi\u00e7\u00e3o for <code>true<\/code>, o elemento logo ap\u00f3s <code>&&<\/code> aparecer\u00e1 na sa\u00edda. Se for <code>false<\/code>, o React o ignorar\u00e1 e omitir\u00e1&#8221;.<\/p>\n<h2>Sintaxe de espalhamento (Spread Syntax)<\/h2>\n<p>No JavaScript, a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\">sintaxe de espalhamento<\/a> permite expandir um elemento iter\u00e1vel, como um array ou objeto, em argumentos de fun\u00e7\u00e3o, literais de array ou literais de objeto.<\/p>\n<p>No exemplo a seguir, estamos desempacotando um array em uma chamada de fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-jsx\">function doSomething( x, y, z ){\n\treturn `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;\n}\nconst numbers = [3, 4, 7];\nconsole.log( doSomething( ...numbers ) );<\/code><\/pre>\n<p>Voc\u00ea pode usar a sintaxe de propaga\u00e7\u00e3o para duplicar uma array (at\u00e9 mesmo arrays multidimensionais) ou para concatenar arrays. Nos exemplos a seguir, concatenamos duas arrays de duas maneiras diferentes:<\/p>\n<pre><code class=\"language-jsx\">const firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray.push( ...secondArray );\nconsole.log( firstArray );<\/code><\/pre>\n<p>Alternativamente:<\/p>\n<pre><code class=\"language-jsx\">let firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray = [ ...firstArray, ...secondArray];\nconsole.log( firstArray );<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode usar a sintaxe de propaga\u00e7\u00e3o para clonar ou mesclar dois objetos:<\/p>\n<pre><code class=\"language-jsx\">const firstObj = { id: '1', title: 'JS is awesome' };\nconst secondObj = { cat: 'React', description: 'React is easy' };\n\n\/\/ clone object\nconst thirdObj = { ...firstObj };\n\n\/\/ merge objects\nconst fourthObj = { ...firstObj, ...secondObj }\n\nconsole.log( { ...thirdObj } );\nconsole.log( { ...fourthObj } );<\/code><\/pre>\n<h2>Atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o<\/h2>\n<p>Outra estrutura sint\u00e1tica que voc\u00ea encontrar\u00e1 com frequ\u00eancia usada no React \u00e9 a sintaxe de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f A sintaxe de atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o permite que voc\u00ea desempacote valores de uma array ou propriedades de um objeto em vari\u00e1veis separadas.<\/strong><\/p>\n<\/aside>\n\n<p>No exemplo a seguir, desempacotamos valores de uma array:<\/p>\n<pre><code class=\"language-javascript\">const user = ['Carlo', 'Content writer', 'Kinsta'];\nconst [name, description, company] = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>E aqui est\u00e1 um exemplo simples de atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o com um objeto:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta'\n}\nconst { name, description, company } = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Mas podemos fazer ainda mais. No exemplo a seguir, desempacotamos algumas propriedades de um objeto e atribu\u00edmos as propriedades restantes a outro objeto usando a sintaxe de propaga\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tfamily: 'Daniele',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta',\n\tpower: 'swimming'\n}\nconst { name, description, company, ...rest } = user;\nconsole.log( rest ); \/\/ {family: 'Daniele', power: 'swimming'}<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode atribuir valores a uma array:<\/p>\n<pre><code class=\"language-javascript\">const user = [];\nconst object = { name: 'Carlo', company: 'Kinsta' };\n( { name: user[0], company: user[1] } = object );\nconsole.log( user ); \/\/ (2) ['Carlo', 'Kinsta']<\/code><\/pre>\n<p>Observe que os par\u00eanteses ao redor da instru\u00e7\u00e3o de atribui\u00e7\u00e3o s\u00e3o necess\u00e1rios quando voc\u00ea usa a atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o literal de objeto sem uma declara\u00e7\u00e3o.<\/p>\n<p>Para obter uma an\u00e1lise mais detalhada da atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o, com v\u00e1rios exemplos de uso, consulte <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>.<\/p>\n<h2>filter(), map() e reduce()<\/h2>\n<p>O JavaScript fornece v\u00e1rios m\u00e9todos \u00fateis que voc\u00ea ver\u00e1 serem usados com frequ\u00eancia no React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\">m\u00e9todo <\/a><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\"><code>filter()<\/code><\/a>\u00a0cria uma <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\">c\u00f3pia superficial<\/a> de uma parte de um array <\/strong><strong> filtrada at\u00e9 os elementos que atendem \u00e0 condi\u00e7\u00e3o da fun\u00e7\u00e3o fornecida.<\/strong><\/p>\n<\/aside>\n\n<p>No exemplo a seguir, aplicamos o filtro \u00e0 array <code>numbers<\/code> para obter uma array cujos elementos s\u00e3o n\u00fameros maiores que 5:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.filter( number =&gt; number &gt; 5);\nconsole.log(result); \/\/ (4) [6, 8, 9, 23]<\/code><\/pre>\n<p>No exemplo a seguir, obtemos uma array de publica\u00e7\u00f5es com a palavra &#8220;JavaScript&#8221; inclu\u00edda no t\u00edtulo:<\/p>\n<pre><code class=\"language-javascript\">const posts = [\n\t{id: 0, title: 'JavaScript is awesome', content: 'your content'},\n\t{id: 1, title: 'WordPress is easy', content: 'your content'},\n\t{id: 2, title: 'React is cool', content: 'your content'},\n\t{id: 3, title: 'With JavaScript to the moon', content: 'your content'},\n];\n\nconst jsPosts = posts.filter( post =&gt; post.title.includes( 'JavaScript' ) );\n\nconsole.log( jsPosts );<\/code><\/pre>\n<figure id=\"attachment_152106\" aria-describedby=\"caption-attachment-152106\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152106 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/filter.jpg\" alt=\"Uma array de publica\u00e7\u00f5es em que o t\u00edtulo inclui \"JavaScript\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Uma array de publica\u00e7\u00f5es em que o t\u00edtulo inclui &#8220;JavaScript<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo<code>map()<\/code><\/a> executa uma fun\u00e7\u00e3o fornecida em cada elemento de uma array e retorna uma nova array preenchida com cada elemento resultante da fun\u00e7\u00e3o de callback.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.map( number =&gt; number * 5 );\nconsole.log(result); \/\/ (7) [10, 30, 40, 10, 25, 45, 115]<\/code><\/pre>\n<p>Em um componente React, voc\u00ea encontrar\u00e1 com frequ\u00eancia o m\u00e9todo <code>map()<\/code> usado para criar listas. No exemplo a seguir, estamos mapeando o objeto <code>posts<\/code> do WordPress para <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">criar uma lista de artigos<\/a>:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f O <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo<code>reduce()<\/code><\/a> executa uma fun\u00e7\u00e3o de callback (<em>reducer<\/em>) em cada elemento de uma array e passa o valor retornado para a pr\u00f3xima itera\u00e7\u00e3o. Em resumo, o redutor &#8220;reduz&#8221; todos os elementos de uma array a um \u00fanico valor.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> aceita dois par\u00e2metros:<\/p>\n<ul>\n<li>Uma fun\u00e7\u00e3o de callback a ser executada para cada elemento da array. Ela retorna um valor que se torna o valor do par\u00e2metro acumulador na pr\u00f3xima chamada. Na \u00faltima chamada, a fun\u00e7\u00e3o retorna o valor que ser\u00e1 o valor de retorno de <code>reduce()<\/code>.<\/li>\n<li>Um valor inicial que \u00e9 o primeiro valor do acumulador passado para a fun\u00e7\u00e3o de callback.<\/li>\n<\/ul>\n<p>A fun\u00e7\u00e3o de callback recebe alguns par\u00e2metros:<\/p>\n<ul>\n<li>Um <strong>acumulador<\/strong>: O valor retornado da chamada anterior para a fun\u00e7\u00e3o de callback. Na primeira chamada, ele \u00e9 definido como um valor inicial, se especificado. Caso contr\u00e1rio, ele assume o valor do primeiro item da array.<\/li>\n<li>O valor do <strong>elemento atual<\/strong>: O valor \u00e9 definido como o primeiro elemento da array (<code>array[0]<\/code>) se um valor inicial tiver sido definido; caso contr\u00e1rio, ele assume o valor do segundo elemento (<code>array[1]<\/code>).<\/li>\n<li>O <strong>\u00edndice atual<\/strong> \u00e9 a posi\u00e7\u00e3o do \u00edndice do elemento atual.<\/li>\n<\/ul>\n<p>Um exemplo deixar\u00e1 tudo mais claro.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Vamos descobrir em detalhes o que acontece em cada itera\u00e7\u00e3o. Volte ao exemplo anterior e altere o endere\u00e7o <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 5;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);\n\t\treturn accumulator + currentValue;\n\t},\n\tinitialValue\n);\nconsole.log( sumElements );<\/code><\/pre>\n<p>A imagem a seguir mostra a sa\u00edda no console do navegador:<\/p>\n<figure id=\"attachment_152231\" aria-describedby=\"caption-attachment-152231\" style=\"width: 1172px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152231 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-with-initial-value.jpg\" alt=\"usando reduce() com valor inicial definido como 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">usando reduce() com valor inicial definido como 5<\/figcaption><\/figure>\n<p>Agora vamos ver o que acontece sem o par\u00e2metro <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );\n\t\treturn accumulator + currentValue;\n\t}\n);\nconsole.log( sumElements );<\/code><\/pre>\n<figure id=\"attachment_152232\" aria-describedby=\"caption-attachment-152232\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152232 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Usando reduce() sem valor inicial\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Usando reduce() sem valor inicial<\/figcaption><\/figure>\n<p>Mais exemplos e casos de uso s\u00e3o discutidos no site de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da MDN (Mozilla Developer Network)<\/a>.<\/p>\n<h2>Exporta\u00e7\u00f5es e importa\u00e7\u00f5es<\/h2>\n<p>A partir do ECMAScript 2015 (ES6), \u00e9 poss\u00edvel exportar valores de um m\u00f3dulo JavaScript e import\u00e1-los para outro script. Voc\u00ea usar\u00e1 as importa\u00e7\u00f5es e exporta\u00e7\u00f5es extensivamente em seus aplicativos React e, portanto, \u00e9 importante ter um bom entendimento de como elas funcionam.<\/p>\n<p>O c\u00f3digo a seguir cria um componente funcional. A primeira linha importa a biblioteca React:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\n\nfunction MyComponent() {\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'dark'\n\t}\n \n\treturn (\n\t\t&lt;div\n\t\t\tclassName = 'card'\n\t\t\tstyle = {\n\t\t\t\tperson.theme === 'dark' ?\n\t\t\t\t{ background: 'black', color: 'white' } :\n\t\t\t\t{ background: 'white', color: 'black'}\n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc = { person.avatar }\n\t\t\t\talt = { person.name }\n\t\t\t\tstyle = { { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div\n\t\t\t\tstyle = { { padding: '2px 16px' } }\n\t\t\t&gt;\n\t\t\t\t&lt;h3&gt;{ person.name }&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{ person.description }.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Usamos a palavra-chave <code>import<\/code> seguida pelo nome que queremos atribuir ao que estamos importando, seguido pelo nome do pacote que queremos instalar, conforme mencionado no arquivo <strong>package.json<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f As declara\u00e7\u00f5es <code>import<\/code> s\u00e3o usadas para <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importar liga\u00e7\u00f5es em tempo real<\/a> que s\u00e3o exportadas por outros m\u00f3dulos.<\/strong><\/p>\n<\/aside>\n\n<p>Observe que na fun\u00e7\u00e3o <code>MyComponent()<\/code> acima, usamos alguns dos recursos JavaScript discutidos nas se\u00e7\u00f5es anteriores. Inclu\u00edmos valores de propriedade entre par\u00eanteses e atribu\u00edmos o valor da propriedade <code>style<\/code> usando a sintaxe do operador condicional.<\/p>\n<p>O script termina com a exporta\u00e7\u00e3o do nosso componente personalizado.<\/p>\n<p>Agora que voc\u00ea sabe um pouco mais sobre importa\u00e7\u00f5es e exporta\u00e7\u00f5es, vamos dar uma olhada mais de perto em como elas funcionam.<\/p>\n<h3>Exporta\u00e7\u00e3o<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f A declara\u00e7\u00e3o <code>export<\/code> \u00e9 usada para exportar valores de um m\u00f3dulo JavaScript.<\/strong><\/p>\n<\/aside>\n\n<p>Cada m\u00f3dulo React pode ter <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">dois tipos diferentes de exporta\u00e7\u00e3o<\/a>: <strong>exporta\u00e7\u00e3o nomeada<\/strong> e <strong>exporta\u00e7\u00e3o padr\u00e3o<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Voc\u00ea pode ter v\u00e1rias exporta\u00e7\u00f5es nomeadas por m\u00f3dulo, mas somente uma exporta\u00e7\u00e3o padr\u00e3o.<\/strong><\/p>\n<\/aside>\n\n<p>Por exemplo, voc\u00ea pode exportar v\u00e1rios recursos de uma s\u00f3 vez com uma \u00fanica instru\u00e7\u00e3o <code>export<\/code>:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode exportar recursos individuais (<code>function<\/code>, <code>class<\/code>, <code>const<\/code>, <code>let<\/code>):<\/p>\n<pre><code class=\"language-javascript\">export function MyComponent() { ... };\nexport let myVariable = x + y;<\/code><\/pre>\n<p>Mas voc\u00ea s\u00f3 pode ter uma \u00fanica exporta\u00e7\u00e3o padr\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode usar a exporta\u00e7\u00e3o padr\u00e3o para recursos individuais:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Importa\u00e7\u00e3o<\/h3>\n<p>Depois que o componente tiver sido exportado, ele poder\u00e1 ser importado para outro arquivo, por exemplo, um arquivo <strong>index.js<\/strong>, com outros m\u00f3dulos:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport MyComponent from '.\/MyComponent';\n\nconst root = ReactDOM.createRoot( document.getElementById( 'root' ) );\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;MyComponent \/&gt;\n\t&lt;\/React.StrictMode&gt;\n);<\/code><\/pre>\n<p>No c\u00f3digo acima, usamos a declara\u00e7\u00e3o de importa\u00e7\u00e3o de v\u00e1rias maneiras.<\/p>\n<p>Nas duas primeiras linhas, atribu\u00edmos um nome aos recursos importados; na terceira linha, n\u00e3o atribu\u00edmos um nome, mas simplesmente importamos o arquivo <strong>.\/index.css<\/strong>. A \u00faltima declara\u00e7\u00e3o <code>import<\/code> importa o arquivo <strong>.\/MyComponent<\/strong> e atribui um nome.<\/p>\n<p>Vamos descobrir as diferen\u00e7as entre essas importa\u00e7\u00f5es.<\/p>\n<p>No total, h\u00e1 quatro tipos de importa\u00e7\u00f5es:<\/p>\n<p><strong>Importa\u00e7\u00e3o nomeada<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Importa\u00e7\u00e3o padr\u00e3o<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Importa\u00e7\u00e3o de espa\u00e7o de nome<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Importa\u00e7\u00e3o de efeito colateral<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Uma declara\u00e7\u00e3o <code>import<\/code> sem chaves \u00e9 usada para importar o <code>export<\/code> padr\u00e3o. Uma instru\u00e7\u00e3o <code>import<\/code> com chaves \u00e9 usada para importar um <code>export<\/code> nomeado<\/strong>.<\/p>\n<\/aside>\n\n<p>Ap\u00f3s adicionar alguns estilos ao <strong>index.css<\/strong>, o cart\u00e3o dever\u00e1 ter a apar\u00eancia da imagem abaixo, na qual voc\u00ea tamb\u00e9m pode ver o c\u00f3digo HTML correspondente:<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152317 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"Um componente React simples\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Um componente React simples<\/figcaption><\/figure>\n<p>Observe que as declara\u00e7\u00f5es do <code>import<\/code> s\u00f3 podem ser usadas em m\u00f3dulos no n\u00edvel superior (n\u00e3o dentro de fun\u00e7\u00f5es, classes etc.).<\/p>\n<p>Para obter uma vis\u00e3o geral mais abrangente das declara\u00e7\u00f5es <code>import<\/code> e <code>export<\/code>, voc\u00ea tamb\u00e9m pode consultar os seguintes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">export<\/a> (documenta\u00e7\u00e3o da MDN (Mozilla Developer Network))<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">import<\/a> (documenta\u00e7\u00e3o da MDN (Mozilla Developer Network))<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importa\u00e7\u00e3o e exporta\u00e7\u00e3o de componentes<\/a> (React dev)<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Quando devo usar chaves para importa\u00e7\u00e3o de ES6?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Resumo<\/h2>\n<p>O React \u00e9 uma das <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/#reactjs\">bibliotecas JavaScript mais <\/a><a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/#reactjs\">populares<\/a>\u00a0da atualidade e \u00e9 uma das <a href=\"https:\/\/kinsta.com\/pt\/blog\/salario-desenvolvedor-web\/\">habilidades mais <\/a><a href=\"https:\/\/kinsta.com\/pt\/blog\/salario-desenvolvedor-web\/\">requisitadas<\/a>\u00a0no mundo do <a href=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvedor-frontend\/\">desenvolvimento da web<\/a>.<\/p>\n<p>Com o React, \u00e9 poss\u00edvel criar aplicativos da web din\u00e2micos e interfaces avan\u00e7adas. Criar aplicativos grandes, din\u00e2micos e interativos pode ser f\u00e1cil gra\u00e7as a seus componentes reutiliz\u00e1veis.<\/p>\n<p>Mas o React \u00e9 uma biblioteca JavaScript, e um bom entendimento dos principais recursos do JavaScript \u00e9 essencial para come\u00e7ar sua jornada com o React. \u00c9 por isso que reunimos em um s\u00f3 lugar alguns dos recursos do JavaScript mais comumente usados no React. Dominar esses recursos dar\u00e1 a voc\u00ea uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutoriais-e-recursos-react\/\">vantagem em sua jornada de aprendizado do React<\/a>.<\/p>\n<p>E quando se trata de <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutoriais-e-recursos-react\/\">desenvolvimento web<\/a>, fazer a transi\u00e7\u00e3o do JS\/React para o WordPress requer muito pouco esfor\u00e7o.<\/p>\n<p>Agora \u00e9 a sua vez, quais recursos do JavaScript voc\u00ea acha mais \u00fateis no desenvolvimento do React? Deixamos passar alguma coisa importante que voc\u00ea gostaria de ver em nossa lista? Compartilhe suas ideias conosco nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atualmente, o React \u00e9 uma das bibliotecas JavaScript mais populares. Ela pode ser usada para criar aplicativos din\u00e2micos e responsivos, permite melhor desempenho e pode ser &#8230;<\/p>\n","protected":false},"author":36,"featured_media":59876,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[523,461,710],"topic":[1018,1017,1002,978],"class_list":["post-59875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-ferramentas-desenvolvimento-web","topic-linguagens-desenvolvimento-web","topic-react","topic-tutoriais-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React\" \/>\n<meta property=\"og:description\" content=\"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:03:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-31T14:15:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React\",\"datePublished\":\"2023-06-01T09:03:43+00:00\",\"dateModified\":\"2025-01-31T14:15:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\"},\"wordCount\":5860,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\",\"name\":\"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:03:43+00:00\",\"dateModified\":\"2025-01-31T14:15:13+00:00\",\"description\":\"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React - Kinsta\u00ae","description":"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.","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:\/\/kinsta.com\/pt\/blog\/javascript-react\/","og_locale":"pt_PT","og_type":"article","og_title":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React","og_description":"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.","og_url":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-06-01T09:03:43+00:00","article_modified_time":"2025-01-31T14:15:13+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"36 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React","datePublished":"2023-06-01T09:03:43+00:00","dateModified":"2025-01-31T14:15:13+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/"},"wordCount":5860,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/","name":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:03:43+00:00","dateModified":"2025-01-31T14:15:13+00:00","description":"Desbloqueie todo o potencial do desenvolvimento de aplicativos din\u00e2micos com o React! Descubra as principais recursos do JavaScript que voc\u00ea precisa conhecer para come\u00e7ar agora.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Recursos do JavaScript que Voc\u00ea Precisa Conhecer para Dominar o React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59875"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59875\/revisions"}],"predecessor-version":[{"id":62051,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59875\/revisions\/62051"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59875\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/59876"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59875"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59875"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}