{"id":58830,"date":"2023-04-13T03:31:11","date_gmt":"2023-04-13T06:31:11","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=58830&#038;post_type=knowledgebase&#038;preview_id=58830"},"modified":"2025-10-01T17:02:23","modified_gmt":"2025-10-01T20:02:23","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"Como Corrigir o Erro &#8220;React Must be in Scope When Using JSX&#8221; (5 M\u00e9todos)"},"content":{"rendered":"<p>Trabalhar com <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> pode ser um pouco complicado \u00e0s vezes, especialmente ao lidar com erros que nem sempre s\u00e3o f\u00e1ceis de entender.<\/p>\n<p>Um erro comum que os desenvolvedores podem encontrar \u00e9 o erro &#8220;React must be in scope when using JSX&#8221;. Esse erro ocorre quando o React n\u00e3o \u00e9 importado ou inicializado corretamente em um componente que utiliza a sintaxe JSX.<\/p>\n<p>Neste artigo, discutiremos as causas deste erro e forneceremos solu\u00e7\u00f5es sobre como corrigi-lo.<\/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>O que causa o erro &#8220;React must be in scope when using JSX&#8221;?<\/h2>\n<p>JSX (JavaScript XML) \u00e9 uma extens\u00e3o de sintaxe que permite escrever c\u00f3digo semelhante a <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> em <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Os navegadores n\u00e3o entendem JSX, mas frameworks pr\u00e9-configurados como o Create React App incluem uma ferramenta de transforma\u00e7\u00e3o de JSX nos bastidores que converte o c\u00f3digo JSX em c\u00f3digo JavaScript v\u00e1lido, que pode ser interpretado pelos navegadores.<\/p>\n<p>Nas vers\u00f5es anteriores ao React 17.0, o JSX era transformado em chamadas de fun\u00e7\u00e3o <code>React.createElement()<\/code> pelo transformador de JSX em compile-time. Isso exigia a importa\u00e7\u00e3o do React para que os elementos do React funcionassem corretamente. Com a introdu\u00e7\u00e3o de uma nova transforma\u00e7\u00e3o de JSX no React v17.0, fun\u00e7\u00f5es especiais dos novos pontos de entrada do pacote React s\u00e3o importadas automaticamente, eliminando a necessidade de importar explicitamente o React em cada arquivo que usa JSX.<\/p>\n<p>Como exemplo, vamos dar uma olhada no seguinte componente funcional:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return &lt;h1&gt;Welcome to Kinsta!&lt;\/h1&gt;;\n}<\/code><\/pre>\n<p>Durante o tempo de compila\u00e7\u00e3o (compile-time), ele \u00e9 transformado em JavaScript regular:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<p>Como React \u00e9 indefinido, isso sempre causar\u00e1 o erro \u201c\u2018react\u2019 must be in scope when using jsx.\u201d<\/p>\n\n<h2>2 maneiras de corrigir o erro &#8220;React must be in scope when using JSX&#8221;<\/h2>\n<p>Este erro pode ser corrigido de algumas maneiras, dependendo da vers\u00e3o do React que voc\u00ea est\u00e1 usando.<\/p>\n<ul>\n<li>Antes do React v17<\/li>\n<li>React v17 e superior<\/li>\n<\/ul>\n<h3>1. Inclua ou corrija a declara\u00e7\u00e3o de importa\u00e7\u00e3o do React (Corre\u00e7\u00e3o para vers\u00f5es anteriores ao React v17)<\/h3>\n<p>Se voc\u00ea estiver usando uma vers\u00e3o mais antiga do React, pode estar faltando ou ter uma declara\u00e7\u00e3o de importa\u00e7\u00e3o incorreta para &#8216;react&#8217;. Certifique-se de ter a declara\u00e7\u00e3o de importa\u00e7\u00e3o correta no topo do seu arquivo (com a letra &#8220;R&#8221; mai\u00fascula em &#8220;React&#8221;):<\/p>\n<pre><code class=\"language-jsx\">\/\/ Wrong \u274c\nimport react  from 'react';\n\n\/\/ Correct \u2705\nimport React  from 'react';<\/code><\/pre>\n<p>Seu componente funcional ficar\u00e1 assim quando transformado em <a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-no-javascript\/\">JavaScript<\/a> regular:<\/p>\n<pre><code class=\"language-jsx\">import React  from 'react';\n\nfunction App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<h3>2. Atualize a configura\u00e7\u00e3o ESLint (Corre\u00e7\u00e3o para o React v17 e superior)<\/h3>\n<p>No React v17.0, uma <a href=\"https:\/\/legacy.reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\">nova transforma\u00e7\u00e3o JSX<\/a> foi introduzida, que importa automaticamente fun\u00e7\u00f5es especiais dos novos pontos de entrada do pacote React, eliminando a necessidade de importar explicitamente o React em cada arquivo que usa JSX.<\/p>\n<p>Por exemplo, considere o seguinte componente funcional:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return &lt;h1&gt;Welcome to Kinsta!&lt;\/h1&gt;;\n}<\/code><\/pre>\n<p>Compile a nova transforma\u00e7\u00e3o JSX assim:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Welcome to Kinsta!' });\n}<\/code><\/pre>\n<p>Isso significa que voc\u00ea n\u00e3o precisa mais importar React em seus componentes para usar o JSX. Se voc\u00ea continuar recebendo este erro mesmo ap\u00f3s verificar seu arquivo <strong>package.json<\/strong> para confirmar sua vers\u00e3o do React, voc\u00ea ter\u00e1 que atualizar suas <a href=\"https:\/\/www.npmjs.com\/package\/eslint-config-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">configura\u00e7\u00f5es do ESLint<\/a>.<\/p>\n<p>Nesta etapa, tecnicamente n\u00e3o se trata mais de um erro do React, mas sim de um erro do ESLint.<\/p>\n<p><strong>Nota:<\/strong> Voc\u00ea costuma usar ferramentas de linting como o ESLint no seu projeto React, pois ele verifica seu c\u00f3digo em busca de poss\u00edveis erros que possam quebrar o c\u00f3digo agora ou no futuro. Essa ferramenta for\u00e7a voc\u00ea a importar o React quando detecta qualquer JSX no arquivo.<\/p>\n<p>Quando voc\u00ea tem certeza de que sua vers\u00e3o do React \u00e9 v17.0 ou superior, \u00e9 seguro desabilitar as regras que exigem a importa\u00e7\u00e3o do React ao usar JSX no seu projeto React.<\/p>\n<p>Existem duas maneiras principais de atualizar as configura\u00e7\u00f5es do ESLint. Se voc\u00ea tiver um arquivo <strong>.eslintrc.js<\/strong> ou <strong>.eslintrc.json<\/strong>, adicione as seguintes regras ao seu arquivo <strong>.eslintrc.js<\/strong>:<\/p>\n<pre><code class=\"language-json\">\"rules\": {\n  \/\/ ...\n  \"react\/react-in-jsx-scope\": \"off\",\n  \"react\/jsx-uses-react\": \"off\",\n }<\/code><\/pre>\n<p>Caso contr\u00e1rio, voc\u00ea pode atualizar o objeto <code>eslintConfig<\/code> em seu arquivo <strong>package.json:<\/strong><\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"quotes-circle\",\n  \/\/ ...\n  \"dependencies\": {\n    \/\/ ...\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app\/jest\"\n    ],\n    \"rules\": {\n      \"react\/jsx-uses-react\": \"off\",\n      \"react\/react-in-jsx-scope\": \"off\"\n    }\n  },\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, a regra de <a href=\"https:\/\/github.com\/jsx-eslint\/eslint-plugin-react\/blob\/master\/docs\/rules\/react-in-jsx-scope.md\" target=\"_blank\" rel=\"noopener noreferrer\">rea\u00e7\u00e3o no jsx escopo<\/a> est\u00e1 desativada, assim a ESLint n\u00e3o vai lan\u00e7ar erros quando voc\u00ea n\u00e3o importar o React.<\/p>\n<p>Neste ponto, voc\u00ea deve ter corrigido o erro &#8220;React Must be in Scope When Using JSX&#8221; de uma vez por todas. No entanto, pode haver casos em que o erro persiste e algo pode ter interferido em sua solu\u00e7\u00e3o.<\/p>\n<p>Vamos explorar mais algumas maneiras de tentar corrigi-lo:<\/p>\n<h2>3 maneiras adicionais para corrigir o erro &#8220;React must be in scope when using JSX&#8221;<\/h2>\n<p>Supondo que o erro ainda persista. Aqui est\u00e3o tr\u00eas maneiras adicionais para corrigir o erro &#8220;React must be in scope when using JSX&#8221;.<\/p>\n<h3>1. Atualize a vers\u00e3o do React-Scripts<\/h3>\n<p>Voc\u00ea pode atualizar a vers\u00e3o do<strong> react-scripts<\/strong> do seu projeto executando o seguinte comando no terminal:<\/p>\n<pre><code class=\"language-bash\">\/\/ npm\nnpm install react-scripts@latest\n\n\/\/ yarn\nyarn add react-scripts@latest<\/code><\/pre>\n<h3>2. Exclua a pasta node_modules e o arquivo package-lock.json<\/h3>\n<p>se o erro persistir, ent\u00e3o \u00e9 poss\u00edvel que algumas de suas depend\u00eancias estejam instaladas erroneamente. Voc\u00ea pode corrigir isso excluindo sua pasta <strong>node_modules<\/strong> e o arquivo <strong>package-lock.json<\/strong> (n\u00e3o <strong>package.json<\/strong>). Em seguida, execute o seguinte comando para instalar novamente as depend\u00eancias:<\/p>\n<pre><code class=\"language-bash\">npm install<\/code><\/pre>\n<p>Ent\u00e3o reinicie seu servidor de desenvolvimento.<\/p>\n<h3>3. Atualize as vers\u00f5es do React e React-Dom<\/h3>\n<p>Finalmente, se o erro persistir, atualize as vers\u00f5es do <strong>React<\/strong> e<strong> React-Dom <\/strong>usando os comandos abaixo:<\/p>\n<pre><code class=\"language-bash\">\/\/ npm\nnpm install react@latest react-dom@latest\n\n\/\/ if you use TypeScript\nnpm install --save-dev @types\/react@latest @types\/react-dom@latest\n\n\/\/ OR\n\n\/\/ Yarn\nyarn add react@latest react-dom@latest\n\n\/\/ if you use TypeScript\nyarn add @types\/react@latest @types\/react-dom@latest --dev<\/code><\/pre>\n<p>Neste ponto, voc\u00ea pode ter certeza de que esse erro est\u00e1 corrigido.<\/p>\n<h2>Resumo<\/h2>\n<p>O erro &#8220;React must be in scope when using JSX&#8221; \u00e9 um problema comum que os <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">desenvolvedores<\/a> podem encontrar ao trabalhar com o React. Esse erro ocorre principalmente em vers\u00f5es anteriores do React v17 quando a sintaxe JSX \u00e9 usada em um arquivo, mas a biblioteca React n\u00e3o est\u00e1 corretamente importada ou inclu\u00edda. Tamb\u00e9m pode ocorrer em vers\u00f5es mais recentes do React v17 quando as configura\u00e7\u00f5es do ESLint geram o erro ou quando algumas depend\u00eancias na pasta <strong>node_modules<\/strong> est\u00e3o instaladas incorretamente.<\/p>\n<p>Com base na vers\u00e3o do React com a qual voc\u00ea est\u00e1 trabalhando, existem diferentes maneiras de corrigir esse erro, conforme descrito no artigo.<\/p>\n<p><em>Agora \u00e9 a sua vez: Voc\u00ea j\u00e1 encontrou esse problema? Como voc\u00ea o resolveu? Existem outras abordagens que voc\u00ea utilizou e que n\u00e3o est\u00e3o mencionadas neste artigo? Nos informe nos coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trabalhar com React pode ser um pouco complicado \u00e0s vezes, especialmente ao lidar com erros que nem sempre s\u00e3o f\u00e1ceis de entender. Um erro comum que &#8230;<\/p>\n","protected":false},"author":287,"featured_media":58831,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1003,1002],"class_list":["post-58830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-do-react","topic-react"],"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>Como Corrigir o Erro &quot;React Must be in Scope When Using JSX&quot; (5 M\u00e9todos) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda como corrigir facilmente o erro &quot;react must be in scope when using jsx&quot; usando qualquer um dos 5 m\u00e9todos listados nesse artigo!\" \/>\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\/react-must-be-in-scope-when-using-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Corrigir o Erro &quot;React Must be in Scope When Using JSX&quot; (5 M\u00e9todos)\" \/>\n<meta property=\"og:description\" content=\"Aprenda como corrigir facilmente o erro &quot;react must be in scope when using jsx&quot; usando qualquer um dos 5 m\u00e9todos listados nesse artigo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\" \/>\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-04-13T06:31:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:02:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda como corrigir facilmente o erro &quot;react must be in scope when using jsx&quot; usando qualquer um dos 5 m\u00e9todos listados nesse artigo!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Corrigir o Erro &#8220;React Must be in Scope When Using JSX&#8221; (5 M\u00e9todos)\",\"datePublished\":\"2023-04-13T06:31:11+00:00\",\"dateModified\":\"2025-10-01T20:02:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"wordCount\":1082,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"name\":\"Como Corrigir o Erro \\\"React Must be in Scope When Using JSX\\\" (5 M\u00e9todos) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"datePublished\":\"2023-04-13T06:31:11+00:00\",\"dateModified\":\"2025-10-01T20:02:23+00:00\",\"description\":\"Aprenda como corrigir facilmente o erro \\\"react must be in scope when using jsx\\\" usando qualquer um dos 5 m\u00e9todos listados nesse artigo!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erros do React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Corrigir o Erro &#8220;React Must be in Scope When Using JSX&#8221; (5 M\u00e9todos)\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Corrigir o Erro \"React Must be in Scope When Using JSX\" (5 M\u00e9todos) - Kinsta\u00ae","description":"Aprenda como corrigir facilmente o erro \"react must be in scope when using jsx\" usando qualquer um dos 5 m\u00e9todos listados nesse artigo!","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\/react-must-be-in-scope-when-using-jsx\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Corrigir o Erro \"React Must be in Scope When Using JSX\" (5 M\u00e9todos)","og_description":"Aprenda como corrigir facilmente o erro \"react must be in scope when using jsx\" usando qualquer um dos 5 m\u00e9todos listados nesse artigo!","og_url":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-04-13T06:31:11+00:00","article_modified_time":"2025-10-01T20:02:23+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda como corrigir facilmente o erro \"react must be in scope when using jsx\" usando qualquer um dos 5 m\u00e9todos listados nesse artigo!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Corrigir o Erro &#8220;React Must be in Scope When Using JSX&#8221; (5 M\u00e9todos)","datePublished":"2023-04-13T06:31:11+00:00","dateModified":"2025-10-01T20:02:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/"},"wordCount":1082,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/","url":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/","name":"Como Corrigir o Erro \"React Must be in Scope When Using JSX\" (5 M\u00e9todos) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","datePublished":"2023-04-13T06:31:11+00:00","dateModified":"2025-10-01T20:02:23+00:00","description":"Aprenda como corrigir facilmente o erro \"react must be in scope when using jsx\" usando qualquer um dos 5 m\u00e9todos listados nesse artigo!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Erros do React","item":"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/"},{"@type":"ListItem","position":3,"name":"Como Corrigir o Erro &#8220;React Must be in Scope When Using JSX&#8221; (5 M\u00e9todos)"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58830","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=58830"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58830\/revisions"}],"predecessor-version":[{"id":59778,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58830\/revisions\/59778"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58830\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/58831"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=58830"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=58830"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=58830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}