{"id":67947,"date":"2023-04-13T07:32:52","date_gmt":"2023-04-13T06:32:52","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=67947&#038;post_type=knowledgebase&#038;preview_id=67947"},"modified":"2025-10-01T20:44:10","modified_gmt":"2025-10-01T19:44:10","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"Come Risolvere l&#8217;Errore &#8220;React must be in scope when using JSX&#8221; (5 Metodi)"},"content":{"rendered":"<p>A volte pu\u00f2 essere complicato lavorare con <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a>, soprattutto quando si ha a che fare con errori difficili da capire.<\/p>\n<p>&#8220;React must be in scope when using JSX&#8221; \u00e8 uno degli errori pi\u00f9 frequenti. Questo errore si verifica quando React non viene importato o inizializzato correttamente in un componente che utilizza la sintassi JSX.<\/p>\n<p>In questo articolo analizzeremo le cause di questo errore e forniremo le soluzioni per risolverlo.<\/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>Quali sono le cause dell&#8217;errore &#8220;React Must Be in Scope When Using JSX&#8221;?<\/h2>\n<p>JSX (JavaScript XML) \u00e8 un&#8217;estensione della sintassi che consente di scrivere codice <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">simile all&#8217;HTML<\/a> in <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. I browser non comprendono JSX, ma i toolkit pre-configurati come Create React App includono uno strumento di trasformazione che converte il codice JSX in codice JavaScript valido, interpretabile dai browser.<\/p>\n<p>Nelle versioni di React precedenti alla 17.0, JSX veniva trasformato in chiamate di funzione <code>React.createElement()<\/code> dal JSX transformer durante la compilazione. Questo richiedeva l&#8217;importazione di React per far funzionare gli elementi React. Con l&#8217;introduzione di un nuovo JSX transform in React v17.0, le funzioni speciali dei nuovi punti di ingresso del pacchetto React vengono importate automaticamente, e non \u00e8 pi\u00f9 necessario importare React in ogni file che utilizza esplicitamente JSX.<\/p>\n<p>A titolo di esempio, diamo un&#8217;occhiata al seguente componente funzionale:<\/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>Al momento della compilazione, viene trasformato in normale JavaScript:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<p>Dato che React non \u00e8 definito, verr\u00e0 sempre lanciato l&#8217;errore &#8220;React must be in scope when using JSX&#8221;.<\/p>\n\n<h2>2 metodi per risolvere l&#8217;errore &#8220;React must be in scope when using JSX&#8221;<\/h2>\n<p>Questo errore pu\u00f2 essere risolto in diversi modi, a seconda della versione di React in uso.<\/p>\n<ul>\n<li>Precedenti a React v17<\/li>\n<li>React v17 e superiori<\/li>\n<\/ul>\n<h3>1. Includere o correggere la dichiarazione di importazione di React (correzione per React v17)<\/h3>\n<p>Se si utilizza una versione precedente di React, \u00e8 possibile che manchi o sia presente una dichiarazione di importazione errata per &#8220;react&#8221;. Controllate di avere inserito la dichiarazione di importazione corretta all&#8217;inizio del file (con la &#8220;R&#8221; maiuscola in &#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>Il componente funzionale avr\u00e0 ora questo aspetto quando sar\u00e0 trasformato in <a href=\"https:\/\/kinsta.com\/it\/blog\/errori-in-javascript\/\">JavaScript<\/a>:<\/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. Aggiornare la configurazione di ESLint (correzione per React v17 e versioni successive)<\/h3>\n<p>In React v17.0 \u00e8 stato introdotto un <a href=\"https:\/\/legacy.reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\" target=\"_blank\" rel=\"noopener noreferrer\">nuovo JSX transform<\/a> che importa automaticamente le funzioni speciali dai nuovi punti di ingresso del pacchetto React. Questo permette di evitare di importare React in ogni file che utilizza esplicitamente JSX.<\/p>\n<p>Ad esempio, prendiamo il seguente componente funzionale:<\/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>Ecco come viene compilato dal nuovo JSX transform:<\/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>Ci\u00f2 significa che non \u00e8 pi\u00f9 necessario importare React nei componenti per utilizzare JSX. Se continuate a ricevere questo errore anche dopo aver controllato la versione di React nel file <strong>package.json<\/strong>, dovete aggiornare le <a href=\"https:\/\/www.npmjs.com\/package\/eslint-config-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">configurazioni di ESLint<\/a>.<\/p>\n<p>A questo punto, tecnicamente non si tratta pi\u00f9 di un errore di React ma di un errore di ESLint.<\/p>\n<p><strong>Nota:<\/strong> in un progetto React spesso si utilizzano strumenti di linting come ESLint perch\u00e9 controllano il codice per individuare eventuali errori. Questo strumento obbliga a importare React quando rileva la presenza di JSX nel file.<\/p>\n<p>Quando sarete sicuri che la vostra versione di React \u00e8 la v17.0 o superiore, allora potrete disattivare le regole che vi assicurano di importare React quando usate JSX.<\/p>\n<p>Esistono essenzialmente due modi per aggiornare le configurazioni di ESLint. Se avete un file <strong>.eslintrc.js<\/strong> o <strong>.eslintrc.json<\/strong>, aggiungete le seguenti regole al file <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>In alternativa, potete aggiornare l&#8217;oggetto <code>eslintConfig<\/code> nel file <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>Nel codice qui sopra, la regola <a href=\"https:\/\/github.com\/jsx-eslint\/eslint-plugin-react\/blob\/master\/docs\/rules\/react-in-jsx-scope.md\" target=\"_blank\" rel=\"noopener noreferrer\">react-in-jsx-scope<\/a> \u00e8 disattivata, quindi ESLint non lancer\u00e0 errori quando React non viene importato.<\/p>\n<p>A questo punto dovreste aver risolto una volta per tutte l&#8217;errore &#8220;React must be in scope when using JSX&#8221;. Ma potrebbe esserci stato qualche altro intoppo e l&#8217;errore potrebbe essere ancora l\u00ec.<\/p>\n<p>Vediamo alcune altre soluzioni al problema.<\/p>\n<h2>Altre 3 soluzioni per risolvere l&#8217;errore &#8220;React must be in scope when using JSX<\/h2>\n<p>Supponiamo che l&#8217;errore persista. Ecco altri tre metodi per risolvere l&#8217;errore &#8220;React must be in scope when using JSX&#8221;.<\/p>\n<h3>1. Aggiornare la versione degli script di React<\/h3>\n<p>Potete aggiornare la versione degli <strong>script di React<\/strong> del progetto eseguendo questo comando nel terminale:<\/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. Eliminare la cartella Node_modules e il file package-lock.json<\/h3>\n<p>Se l&#8217;errore persiste, \u00e8 possibile che alcune dipendenze siano state installate in modo errato. \u00c8 possibile risolvere il problema cancellando la cartella <strong>node_modules<\/strong> e il file <strong>package-lock.json<\/strong> (non <strong>package.json<\/strong>). Quindi eseguite il seguente comando per installare nuovamente i pacchetti:<\/p>\n<pre><code class=\"language-bash\">npm install<\/code><\/pre>\n<p>A questo punto, riavviate il server dev.<\/p>\n<h3>3. Aggiornare le versioni di React e React-Dom<\/h3>\n<p>Infine, se l&#8217;errore \u00e8 ancora l\u00ec, aggiornate le versioni di <strong>react<\/strong> e <strong>react-dom<\/strong> utilizzando i comandi seguenti:<\/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>Arrivati a questo punto, l&#8217;errore sar\u00e0 sicuramente stato risolto.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Gli <a href=\"https:\/\/kinsta.com\/it\/blog\/tipi-di-developer\/\">sviluppatori<\/a> possono imbattersi spesso nell&#8217;errore &#8220;React must be in scope when using JSX&#8221; quando lavorano con React. Si verifica soprattutto nelle versioni precedenti a React v17 quando viene utilizzata la sintassi JSX, ma la libreria React non \u00e8 stata importata o inclusa correttamente. Si verifica anche nelle versioni superiori a React v17 quando le configurazioni di ESLint lanciano l&#8217;errore o quando alcune dipendenze presenti nella cartella <strong>node_modules<\/strong> sono installate in modo errato.<\/p>\n<p>In base alla versione di React con cui state lavorando, avrete a disposizione diverse soluzioni per risolvere questo errore, tutte illustrate nell&#8217;articolo.<\/p>\n<p><em>Ora tocca a voi: Avete mai riscontrato questo problema? Come l&#8217;avete risolto? Ci sono altri approcci che avete seguito e che non sono stati trattati in questo articolo? Fatecelo sapere nei commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A volte pu\u00f2 essere complicato lavorare con React, soprattutto quando si ha a che fare con errori difficili da capire. &#8220;React must be in scope when &#8230;<\/p>\n","protected":false},"author":287,"featured_media":67948,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26229,26186,26212],"class_list":["post-67947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errori-di-react","topic-errori-php","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>Come Risolvere l&#039;Errore \u201cReact Must Be in Scope When Using JSX\u201d- Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come risolvere l&#039;errore &quot;react must be in scope when using jsx&quot; seguendo uno dei 5 metodi illustrati in questo articolo.\" \/>\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\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Risolvere l&#039;Errore &quot;React must be in scope when using JSX&quot; (5 Metodi)\" \/>\n<meta property=\"og:description\" content=\"Scopri come risolvere l&#039;errore &quot;react must be in scope when using jsx&quot; seguendo uno dei 5 metodi illustrati in questo articolo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/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\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-13T06:32:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:44:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Scopri come risolvere l&#039;errore &quot;react must be in scope when using jsx&quot; seguendo uno dei 5 metodi illustrati in questo articolo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come Risolvere l&#8217;Errore &#8220;React must be in scope when using JSX&#8221; (5 Metodi)\",\"datePublished\":\"2023-04-13T06:32:52+00:00\",\"dateModified\":\"2025-10-01T19:44:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"wordCount\":943,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"name\":\"Come Risolvere l'Errore \u201cReact Must Be in Scope When Using JSX\u201d- Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"datePublished\":\"2023-04-13T06:32:52+00:00\",\"dateModified\":\"2025-10-01T19:44:10+00:00\",\"description\":\"Scopri come risolvere l'errore \\\"react must be in scope when using jsx\\\" seguendo uno dei 5 metodi illustrati in questo articolo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Risolvere l&#8217;Errore &#8220;React must be in scope when using JSX&#8221; (5 Metodi)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Risolvere l'Errore \u201cReact Must Be in Scope When Using JSX\u201d- Kinsta\u00ae","description":"Scopri come risolvere l'errore \"react must be in scope when using jsx\" seguendo uno dei 5 metodi illustrati in questo articolo.","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\/it\/blog\/react-must-be-in-scope-when-using-jsx\/","og_locale":"it_IT","og_type":"article","og_title":"Come Risolvere l'Errore \"React must be in scope when using JSX\" (5 Metodi)","og_description":"Scopri come risolvere l'errore \"react must be in scope when using jsx\" seguendo uno dei 5 metodi illustrati in questo articolo.","og_url":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-04-13T06:32:52+00:00","article_modified_time":"2025-10-01T19:44:10+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri come risolvere l'errore \"react must be in scope when using jsx\" seguendo uno dei 5 metodi illustrati in questo articolo.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come Risolvere l&#8217;Errore &#8220;React must be in scope when using JSX&#8221; (5 Metodi)","datePublished":"2023-04-13T06:32:52+00:00","dateModified":"2025-10-01T19:44:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/"},"wordCount":943,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/","url":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/","name":"Come Risolvere l'Errore \u201cReact Must Be in Scope When Using JSX\u201d- Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","datePublished":"2023-04-13T06:32:52+00:00","dateModified":"2025-10-01T19:44:10+00:00","description":"Scopri come risolvere l'errore \"react must be in scope when using jsx\" seguendo uno dei 5 metodi illustrati in questo articolo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Come Risolvere l&#8217;Errore &#8220;React must be in scope when using JSX&#8221; (5 Metodi)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/67947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=67947"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/67947\/revisions"}],"predecessor-version":[{"id":72881,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/67947\/revisions\/72881"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/translations\/dk"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/67947\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/67948"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=67947"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=67947"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=67947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}