From 83cd1bab9cdc15f2f2b9bfb3e10caf02c22fd60b Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 16:41:53 +0300 Subject: [PATCH] translate(reference): createRoot Signed-off-by: Alessandro De Blasis --- .../reference/react-dom/client/createRoot.md | 203 +++++++++--------- 1 file changed, 105 insertions(+), 98 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index c42f2fabf..4ebe9a6cc 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -1,10 +1,17 @@ --- title: createRoot +translationStatus: ai-draft --- + + +Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/client/createRoot.md). + + + -`createRoot` lets you create a root to display React components inside a browser DOM node. +`createRoot` ti permette di creare una root per visualizzare componenti React all'interno di un nodo DOM del browser. ```js const root = createRoot(domNode, options?) @@ -20,7 +27,7 @@ const root = createRoot(domNode, options?) ### `createRoot(domNode, options?)` {/*createroot*/} -Call `createRoot` to create a React root for displaying content inside a browser DOM element. +Chiama `createRoot` per creare una root React che visualizza contenuto all'interno di un elemento DOM del browser. ```js import { createRoot } from 'react-dom/client'; @@ -29,73 +36,73 @@ const domNode = document.getElementById('root'); const root = createRoot(domNode); ``` -React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it: +React creerà una root per il `domNode` e prenderà in carico la gestione del DOM al suo interno. Dopo aver creato una root, devi chiamare [`root.render`](#root-render) per visualizzare un componente React al suo interno: ```js root.render(); ``` -An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed. +Un'app interamente costruita con React avrà di solito una sola chiamata a `createRoot` per il componente root. Una pagina che integra React solo in alcune parti può avere tutte le root separate necessarie. -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*parameters*/} -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content. +* `domNode`: Un [elemento DOM.](https://developer.mozilla.org/it/docs/Web/API/Element) React creerà una root per questo elemento DOM e ti permetterà di chiamare funzioni sulla root, come `render` per visualizzare contenuto React renderizzato. -* **optional** `options`: An object with options for this React root. +* **optional** `options`: Un oggetto con opzioni per questa root React. - * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. - * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. + * **optional** `onCaughtError`: Callback chiamata quando React cattura un errore in un contenitore di errori. Viene chiamata con l'`error` catturato dal contenitore di errori e un oggetto `errorInfo` che contiene il `componentStack`. + * **optional** `onUncaughtError`: Callback chiamata quando viene lanciato un errore e non viene catturato da un contenitore di errori. Viene chiamata con l'`error` lanciato e un oggetto `errorInfo` che contiene il `componentStack`. + * **optional** `onRecoverableError`: Callback chiamata quando React recupera automaticamente dagli errori. Viene chiamata con un `error` lanciato da React e un oggetto `errorInfo` che contiene il `componentStack`. Alcuni errori recuperabili possono includere la causa originale dell'errore come `error.cause`. + * **optional** `identifierPrefix`: Un prefisso stringa che React usa per gli ID generati da [`useId`.](/reference/react/useId) Utile per evitare conflitti quando usi più root sulla stessa pagina. #### Returns {/*returns*/} -`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`createRoot` restituisce un oggetto con due metodi: [`render`](#root-render) e [`unmount`.](#root-unmount) #### Caveats {/*caveats*/} -* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead. -* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you. -* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`. +* Se la tua app è renderizzata lato server, l'uso di `createRoot()` non è supportato. Usa [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) al suo posto. +* Probabilmente avrai una sola chiamata a `createRoot` nella tua app. Se usi un framework, potrebbe eseguire questa chiamata per te. +* Quando vuoi renderizzare un pezzo di JSX in una parte diversa dell'albero DOM che non è un figlio del tuo componente (ad esempio, una modale o un tooltip), usa [`createPortal`](/reference/react-dom/createPortal) invece di `createRoot`. --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node. +Chiama `root.render` per visualizzare un pezzo di [JSX](/learn/writing-markup-with-jsx) ("nodo React") nel nodo DOM del browser della root React. ```js root.render(); ``` -React will display `` in the `root`, and take over managing the DOM inside it. +React visualizzerà `` nella `root` e prenderà in carico la gestione del DOM al suo interno. -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*root-render-parameters*/} -* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. +* `reactNode`: Un *nodo React* che vuoi visualizzare. Di solito sarà un pezzo di JSX come ``, ma puoi anche passare un elemento React costruito con [`createElement()`](/reference/react/createElement), una stringa, un numero, `null` o `undefined`. #### Returns {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` restituisce `undefined`. #### Caveats {/*root-render-caveats*/} -* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it. +* La prima volta che chiami `root.render`, React cancellerà tutto il contenuto HTML esistente all'interno della root React prima di renderizzare il componente React al suo interno. -* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML. +* Se il nodo DOM della tua root contiene HTML generato da React sul server o durante la build, usa [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) al suo posto, che collega i gestori di eventi all'HTML esistente. -* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. +* Se chiami `render` sulla stessa root più di una volta, React aggiornerà il DOM secondo necessità per riflettere l'ultimo JSX che hai passato. React deciderà quali parti del DOM possono essere riutilizzate e quali devono essere ricreate ["confrontandole"](/learn/preserving-and-resetting-state) con l'albero renderizzato in precedenza. Chiamare `render` sulla stessa root di nuovo è simile a chiamare la [funzione `set`](/reference/react/useState#setstate) sul componente root: React evita aggiornamenti DOM non necessari. -* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously. +* Sebbene la renderizzazione sia sincrona una volta avviata, `root.render(...)` non lo è. Ciò significa che il codice dopo `root.render()` può essere eseguito prima che vengano attivati gli Effetti (`useLayoutEffect`, `useEffect`) di quella specifica renderizzazione. Di solito va bene e raramente richiede aggiustamenti. Nei rari casi in cui il timing degli Effetti è importante, puoi avvolgere `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) per assicurarti che la renderizzazione iniziale avvenga completamente in modo sincrono. ```js const root = createRoot(document.getElementById('root')); root.render(); - // 🚩 The HTML will not include the rendered yet: + // 🚩 L'HTML non includerà ancora renderizzato: console.log(document.body.innerHTML); ``` @@ -103,41 +110,41 @@ React will display `` in the `root`, and take over managing the DOM insid ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +Chiama `root.unmount` per distruggere un albero renderizzato all'interno di una root React. ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +Un'app interamente costruita con React di solito non avrà chiamate a `root.unmount`. -This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions. +È soprattutto utile se il nodo DOM della tua root React (o uno dei suoi antenati) può essere rimosso dal DOM da altro codice. Ad esempio, immagina un pannello a schede jQuery che rimuove le schede inattive dal DOM. Se una scheda viene rimossa, tutto al suo interno (incluse le root React al suo interno) verrebbe rimosso dal DOM. In quel caso, devi dire a React di "smettere" di gestire il contenuto della root rimossa chiamando `root.unmount`. Altrimenti, i componenti all'interno della root rimossa non saprebbero di dover fare pulizia e liberare risorse globali come le sottoscrizioni. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +Chiamare `root.unmount` smonterà tutti i componenti nella root e "scollegherà" React dal nodo DOM root, inclusa la rimozione di qualsiasi gestore di eventi o state nell'albero. #### Parameters {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` non accetta parametri. #### Returns {/*root-unmount-returns*/} -`root.unmount` returns `undefined`. +`root.unmount` restituisce `undefined`. #### Caveats {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* Chiamare `root.unmount` smonterà tutti i componenti nell'albero e "scollegherà" React dal nodo DOM root. -* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted. +* Una volta chiamato `root.unmount` non puoi chiamare di nuovo `root.render` sulla stessa root. Tentare di chiamare `root.render` su una root smontata lancerà un errore "Cannot update an unmounted root". Tuttavia, puoi creare una nuova root per lo stesso nodo DOM dopo che la root precedente per quel nodo è stata smontata. --- ## Usage {/*usage*/} -### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/} +### Renderizzare un'app interamente costruita con React {/*rendering-an-app-fully-built-with-react*/} -If your app is fully built with React, create a single root for your entire app. +Se la tua app è interamente costruita con React, crea una singola root per l'intera app. ```js [[1, 3, "document.getElementById('root')"], [2, 4, ""]] import { createRoot } from 'react-dom/client'; @@ -146,10 +153,10 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Usually, you only need to run this code once at startup. It will: +Di solito, devi eseguire questo codice solo una volta all'avvio. Farà quanto segue: -1. Find the browser DOM node defined in your HTML. -2. Display the React component for your app inside. +1. Troverà il nodo DOM del browser definito nel tuo HTML. +2. Visualizzerà il componente React della tua app al suo interno. @@ -158,7 +165,7 @@ Usually, you only need to run this code once at startup. It will: My app - +
@@ -189,7 +196,7 @@ function Counter() { const [count, setCount] = useState(0); return ( ); } @@ -197,35 +204,35 @@ function Counter() { -**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +**Se la tua app è interamente costruita con React, non dovresti aver bisogno di creare altre root o di chiamare di nuovo [`root.render`](#root-render).** -From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal) +Da questo punto in poi, React gestirà il DOM dell'intera app. Per aggiungere altri componenti, [annidali all'interno del componente `App`.](/learn/importing-and-exporting-components) Quando devi aggiornare l'UI, ciascuno dei tuoi componenti può farlo [usando lo state.](/reference/react/useState) Quando devi visualizzare contenuto extra come una modale o un tooltip fuori dal nodo DOM, [renderizzalo con un portal.](/reference/react-dom/createPortal) -When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs: +Quando il tuo HTML è vuoto, l'utente vede una pagina bianca finché il codice JavaScript dell'app non viene caricato ed eseguito: ```html
``` -This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/creating-a-react-app#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* +Questo può sembrare molto lento! Per risolvere, puoi generare l'HTML iniziale dai tuoi componenti [sul server o durante la build.](/reference/react-dom/server) Così i visitatori possono leggere testo, vedere immagini e cliccare link prima che venga caricato qualsiasi codice JavaScript. Consigliamo di [usare un framework](/learn/creating-a-react-app#full-stack-frameworks) che esegue questa ottimizzazione out of the box. A seconda di quando viene eseguita, si parla di *server-side rendering (SSR)* o *static site generation (SSG)*. -**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them. +**Le app che usano la renderizzazione lato server o la generazione statica devono chiamare [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) invece di `createRoot`.** React *idraterà* (riutilizzerà) i nodi DOM dal tuo HTML invece di distruggerli e ricrearli. --- -### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/} +### Renderizzare una pagina parzialmente costruita con React {/*rendering-a-page-partially-built-with-react*/} -If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render) +Se la tua pagina [non è interamente costruita con React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), puoi chiamare `createRoot` più volte per creare una root per ogni pezzo di UI di primo livello gestito da React. Puoi visualizzare contenuto diverso in ciascuna root chiamando [`root.render`.](#root-render) -Here, two different React components are rendered into two DOM nodes defined in the `index.html` file: +Qui, due componenti React diversi vengono renderizzati in due nodi DOM definiti nel file `index.html`: @@ -236,7 +243,7 @@ Here, two different React components are rendered into two DOM nodes defined in
-

This paragraph is not rendered by React (open index.html to verify).

+

Questo paragrafo non è renderizzato da React (apri index.html per verificare).

@@ -299,28 +306,28 @@ nav ul li { display: inline-block; margin-right: 20px; } -You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually. +Potresti anche creare un nuovo nodo DOM con [`document.createElement()`](https://developer.mozilla.org/it/docs/Web/API/Document/createElement) e aggiungerlo manualmente al documento. ```js const domNode = document.createElement('div'); const root = createRoot(domNode); root.render(); -document.body.appendChild(domNode); // You can add it anywhere in the document +document.body.appendChild(domNode); // Puoi aggiungerlo ovunque nel documento ``` -To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount) +Per rimuovere l'albero React dal nodo DOM e pulire tutte le risorse usate da esso, chiama [`root.unmount`.](#root-unmount) ```js root.unmount(); ``` -This is mostly useful if your React components are inside an app written in a different framework. +Questo è soprattutto utile se i tuoi componenti React sono all'interno di un'app scritta in un framework diverso. --- -### Updating a root component {/*updating-a-root-component*/} +### Aggiornare un componente root {/*updating-a-root-component*/} -You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +Puoi chiamare `render` più di una volta sulla stessa root. Finché la struttura dell'albero dei componenti corrisponde a quanto renderizzato in precedenza, React [preserverà lo state.](/learn/preserving-and-resetting-state) Nota come puoi digitare nell'input, il che significa che gli aggiornamenti dalle ripetute chiamate a `render` ogni secondo in questo esempio non sono distruttivi: @@ -343,7 +350,7 @@ export default function App({counter}) { return ( <>

Hello, world! {counter}

- + ); } @@ -351,11 +358,11 @@ export default function App({counter}) { -It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead. +È poco comune chiamare `render` più volte. Di solito, i tuoi componenti [aggiorneranno lo state](/reference/react/useState) al suo posto. -### Error logging in production {/*error-logging-in-production*/} +### Registrazione degli errori in produzione {/*error-logging-in-production*/} -By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: +Per impostazione predefinita, React registrerà tutti gli errori nella console. Per implementare la tua segnalazione errori, puoi fornire le opzioni root opzionali per i gestori di errori `onUncaughtError`, `onCaughtError` e `onRecoverableError`: ```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]] import { createRoot } from "react-dom/client"; @@ -374,19 +381,19 @@ const root = createRoot(container, { }); ``` -The onCaughtError option is a function called with two arguments: +L'opzione onCaughtError è una funzione chiamata con due argomenti: -1. The error that was thrown. -2. An errorInfo object that contains the componentStack of the error. +1. L'error che è stato lanciato. +2. Un oggetto errorInfo che contiene il componentStack dell'errore. -Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system: +Insieme a `onUncaughtError` e `onRecoverableError`, puoi implementare il tuo sistema di segnalazione errori: ```js src/reportError.js function reportError({ type, error, errorInfo }) { - // The specific implementation is up to you. - // `console.error()` is only used for demonstration purposes. + // L'implementazione specifica dipende da te. + // `console.error()` è usato solo a scopo dimostrativo. console.error(type, error, "Component Stack: "); console.error("Component Stack: ", errorInfo.componentStack); } @@ -417,9 +424,9 @@ import { const container = document.getElementById("root"); const root = createRoot(container, { - // Keep in mind to remove these options in development to leverage - // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // Tieni presente di rimuovere queste opzioni in development per sfruttare + // i gestori predefiniti di React o implementare il tuo overlay per development. + // I gestori sono specificati incondizionatamente qui solo a scopo dimostrativo. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, @@ -443,7 +450,7 @@ class ErrorBoundary extends Component { render() { if (this.state.hasError) { - return

Something went wrong.

; + return

Qualcosa è andato storto.

; } return this.props.children; } @@ -456,11 +463,11 @@ export default function App() { return ( <> {triggerUncaughtError && } {triggerCaughtError && ( @@ -476,9 +483,9 @@ export default function App() { ## Troubleshooting {/*troubleshooting*/} -### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/} +### Ho creato una root, ma non viene visualizzato nulla {/*ive-created-a-root-but-nothing-is-displayed*/} -Make sure you haven't forgotten to actually *render* your app into the root: +Assicurati di non aver dimenticato di *renderizzare* effettivamente la tua app nella root: ```js {5} import { createRoot } from 'react-dom/client'; @@ -488,13 +495,13 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Until you do that, nothing is displayed. +Finché non lo fai, non viene visualizzato nulla. --- -### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/} +### Ricevo un errore: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/} -A common mistake is to pass the options for `createRoot` to `root.render(...)`: +Un errore comune è passare le opzioni per `createRoot` a `root.render(...)`: @@ -502,23 +509,23 @@ Warning: You passed a second argument to root.render(...) but it only accepts on -To fix, pass the root options to `createRoot(...)`, not `root.render(...)`: +Per risolvere, passa le opzioni root a `createRoot(...)`, non a `root.render(...)`: ```js {2,5} -// 🚩 Wrong: root.render only takes one argument. +// 🚩 Sbagliato: root.render accetta un solo argomento. root.render(App, {onUncaughtError}); -// ✅ Correct: pass options to createRoot. +// ✅ Corretto: passa le opzioni a createRoot. const root = createRoot(container, {onUncaughtError}); root.render(); ``` --- -### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} +### Ricevo un errore: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} -This error means that whatever you're passing to `createRoot` is not a DOM node. +Questo errore significa che ciò che passi a `createRoot` non è un nodo DOM. -If you're not sure what's happening, try logging it: +Se non sei sicuro di cosa stia succedendo, prova a registrarlo: ```js {2} const domNode = document.getElementById('root'); @@ -527,46 +534,46 @@ const root = createRoot(domNode); root.render(); ``` -For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it: +Ad esempio, se `domNode` è `null`, significa che [`getElementById`](https://developer.mozilla.org/it/docs/Web/API/Document/getElementById) ha restituito `null`. Succederà se non c'è nessun nodo nel documento con l'ID dato al momento della chiamata. Potrebbero esserci alcune ragioni: -1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos! -2. Your bundle's `