From 46e16888f7fa8cb1da707a6204be321be496d542 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 20:44:05 +0000 Subject: [PATCH 1/4] translate(reference): createContext (#691) Signed-off-by: Alessandro De Blasis Co-authored-by: Cursor --- src/content/reference/react/createContext.md | 77 +++++++++++--------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index e4e9bcf62..2645896fd 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -1,10 +1,17 @@ --- title: createContext +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/createContext.md). + + + -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` ti permette di creare un [context](/learn/passing-data-deeply-with-context) che i componenti possono fornire o leggere. ```js const SomeContext = createContext(defaultValue) @@ -20,7 +27,7 @@ const SomeContext = createContext(defaultValue) ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +Chiama `createContext` al di fuori di qualsiasi componente per creare un context. ```js import { createContext } from 'react'; @@ -28,27 +35,27 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*parameters*/} -* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time. +* `defaultValue`: Il valore che vuoi che il context abbia quando non c'è un context provider corrispondente nell'albero sopra il componente che legge il context. Se non hai un valore predefinito significativo, specifica `null`. Il valore predefinito è pensato come fallback "d'ultima risorsa". È statico e non cambia mai nel tempo. #### Returns {/*returns*/} -`createContext` returns a context object. +`createContext` restituisce un oggetto context. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**L'oggetto context in sé non contiene alcuna informazione.** Rappresenta _quale_ context altri componenti leggono o forniscono. In genere, userai [`SomeContext`](#provider) nei componenti sopra per specificare il valore del context, e chiamerai [`useContext(SomeContext)`](/reference/react/useContext) nei componenti sotto per leggerlo. L'oggetto context ha alcune proprietà: -* `SomeContext` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. -* `SomeContext.Provider` is a legacy way to provide the context value before React 19. +* `SomeContext` ti permette di fornire il valore del context ai componenti. +* `SomeContext.Consumer` è un modo alternativo e raramente usato per leggere il valore del context. +* `SomeContext.Provider` è un modo legacy per fornire il valore del context prima di React 19. --- -### `SomeContext` Provider {/*provider*/} +### Provider di `SomeContext` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +Avvolgi i tuoi componenti in un context provider per specificare il valore di questo context per tutti i componenti al suo interno: ```js function App() { @@ -64,25 +71,25 @@ function App() { -Starting in React 19, you can render `` as a provider. +A partire da React 19, puoi renderizzare `` come provider. -In older versions of React, use ``. +Nelle versioni precedenti di React, usa ``. #### Props {/*provider-props*/} -* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. +* `value`: Il valore che vuoi passare a tutti i componenti che leggono questo context all'interno di questo provider, indipendentemente dalla profondità. Il valore del context può essere di qualsiasi tipo. Un componente che chiama [`useContext(SomeContext)`](/reference/react/useContext) all'interno del provider riceve il `value` del context provider corrispondente più interno sopra di esso. --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +Prima che esistesse `useContext`, c'era un modo più vecchio per leggere il context: ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 Modo legacy (sconsigliato) return ( {theme => ( @@ -93,11 +100,11 @@ function Button() { } ``` -Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +Anche se questo modo più vecchio funziona ancora, **il codice scritto di recente dovrebbe leggere il context con [`useContext()`](/reference/react/useContext) invece:** ```js function Button() { - // ✅ Recommended way + // ✅ Modo consigliato const theme = useContext(ThemeContext); return @@ -269,16 +276,16 @@ label { -To make your component re-render only when a _part_ of some context changes, split your component in two. Read what you need from the context in the outer component, and pass it down to a memoized child as a prop. +Per far ri-renderizzare il tuo componente solo quando cambia _una parte_ di un context, dividi il componente in due. Leggi ciò che ti serve dal context nel componente esterno, e passalo a un figlio memorizzato come prop. --- -### Minimizing props changes {/*minimizing-props-changes*/} +### Minimizzare i cambiamenti delle props {/*minimizing-props-changes*/} -When you use `memo`, your component re-renders whenever any prop is not *shallowly equal* to what it was previously. This means that React compares every prop in your component with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Note that `Object.is(3, 3)` is `true`, but `Object.is({}, {})` is `false`. +Quando usi `memo`, il tuo componente viene ri-renderizzato ogni volta che una prop non è *superficialmente uguale* a quella precedente. Ciò significa che React confronta ogni prop del tuo componente con il suo valore precedente usando il confronto [`Object.is`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Nota che `Object.is(3, 3)` è `true`, ma `Object.is({}, {})` è `false`. -To get the most out of `memo`, minimize the times that the props change. For example, if the prop is an object, prevent the parent component from re-creating that object every time by using [`useMemo`:](/reference/react/useMemo) +Per ottenere il massimo da `memo`, minimizza le volte in cui le props cambiano. Per esempio, se la prop è un oggetto, evita che il componente genitore ricrei quell'oggetto ogni volta usando [`useMemo`:](/reference/react/useMemo) ```js {5-8} function Page() { @@ -298,7 +305,7 @@ const Profile = memo(function Profile({ person }) { }); ``` -A better way to minimize props changes is to make sure the component accepts the minimum necessary information in its props. For example, it could accept individual values instead of a whole object: +Un modo migliore per minimizzare i cambiamenti delle props è assicurarsi che il componente accetti nelle props solo le informazioni minime necessarie. Per esempio, potrebbe accettare valori individuali invece di un intero oggetto: ```js {4,7} function Page() { @@ -312,7 +319,7 @@ const Profile = memo(function Profile({ name, age }) { }); ``` -Even individual values can sometimes be projected to ones that change less frequently. For example, here a component accepts a boolean indicating the presence of a value rather than the value itself: +Anche i valori individuali a volte possono essere proiettati su altri che cambiano meno frequentemente. Per esempio, qui un componente accetta un booleano che indica la presenza di un valore piuttosto che il valore stesso: ```js {3} function GroupsLanding({ person }) { @@ -325,13 +332,13 @@ const CallToAction = memo(function CallToAction({ hasGroups }) { }); ``` -When you need to pass a function to memoized component, either declare it outside your component so that it never changes, or [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) to cache its definition between re-renders. +Quando devi passare una funzione a un componente memorizzato, dichiara la funzione fuori dal tuo componente in modo che non cambi mai, oppure usa [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) per memorizzare la sua definizione tra le ri-renderizzazioni. --- -### Specifying a custom comparison function {/*specifying-a-custom-comparison-function*/} +### Specificare una funzione di confronto personalizzata {/*specifying-a-custom-comparison-function*/} -In rare cases it may be infeasible to minimize the props changes of a memoized component. In that case, you can provide a custom comparison function, which React will use to compare the old and new props instead of using shallow equality. This function is passed as a second argument to `memo`. It should return `true` only if the new props would result in the same output as the old props; otherwise it should return `false`. +In casi rari può essere impraticabile minimizzare i cambiamenti delle props di un componente memorizzato. In quel caso, puoi fornire una funzione di confronto personalizzata, che React userà per confrontare le props vecchie e nuove invece di usare l'uguaglianza superficiale. Questa funzione viene passata come secondo argomento a `memo`. Dovrebbe restituire `true` solo se le nuove props produrrebbero lo stesso output delle vecchie props; altrimenti dovrebbe restituire `false`. ```js {3} const Chart = memo(function Chart({ dataPoints }) { @@ -349,30 +356,30 @@ function arePropsEqual(oldProps, newProps) { } ``` -If you do this, use the Performance panel in your browser developer tools to make sure that your comparison function is actually faster than re-rendering the component. You might be surprised. +Se lo fai, usa il pannello Performance negli strumenti per sviluppatori del browser per assicurarti che la tua funzione di confronto sia effettivamente più veloce della ri-renderizzazione del componente. Potresti rimanere sorpreso. -When you do performance measurements, make sure that React is running in the production mode. +Quando fai misurazioni delle prestazioni, assicurati che React sia in esecuzione in modalità produzione. -If you provide a custom `arePropsEqual` implementation, **you must compare every prop, including functions.** Functions often [close over](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) the props and state of parent components. If you return `true` when `oldProps.onClick !== newProps.onClick`, your component will keep "seeing" the props and state from a previous render inside its `onClick` handler, leading to very confusing bugs. +Se fornisci un'implementazione personalizzata di `arePropsEqual`, **devi confrontare ogni prop, incluse le funzioni.** Le funzioni spesso [catturano](https://developer.mozilla.org/it/docs/Web/JavaScript/Closures) le props e lo state dei componenti genitori. Se restituisci `true` quando `oldProps.onClick !== newProps.onClick`, il tuo componente continuerà a "vedere" le props e lo state di una renderizzazione precedente dentro il suo gestore `onClick`, portando a bug molto confusi. -Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure that the data structure you're working with has a known limited depth. **Deep equality checks can become incredibly slow** and can freeze your app for many seconds if someone changes the data structure later. +Evita di fare controlli di uguaglianza profonda dentro `arePropsEqual` a meno che non sia sicuro al 100% che la struttura dati su cui lavori abbia una profondità nota e limitata. **I controlli di uguaglianza profonda possono diventare incredibilmente lenti** e possono bloccare la tua app per molti secondi se qualcuno cambia la struttura dati in seguito. --- -### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/} +### Ho ancora bisogno di React.memo se uso React Compiler? {/*react-compiler-memo*/} -When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you. +Quando abiliti [React Compiler](/learn/react-compiler), di solito non hai più bisogno di `React.memo`. Il compiler ottimizza automaticamente la ri-renderizzazione dei componenti per te. -Here's how it works: +Ecco come funziona: -**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders: +**Senza React Compiler**, hai bisogno di `React.memo` per evitare ri-renderizzazioni non necessarie: ```js -// Parent re-renders every second +// Il genitore si ri-renderizza ogni secondo function Parent() { const [seconds, setSeconds] = useState(0); @@ -391,30 +398,30 @@ function Parent() { ); } -// Without memo, this re-renders every second even though props don't change +// Senza memo, questo si ri-renderizza ogni secondo anche se le props non cambiano const ExpensiveChild = memo(function ExpensiveChild({ name }) { console.log('ExpensiveChild rendered'); return
Hello, {name}!
; }); ``` -**With React Compiler enabled**, the same optimization happens automatically: +**Con React Compiler abilitato**, la stessa ottimizzazione avviene automaticamente: ```js -// No memo needed - compiler prevents re-renders automatically +// Nessun memo necessario: il compiler previene le ri-renderizzazioni automaticamente function ExpensiveChild({ name }) { console.log('ExpensiveChild rendered'); return
Hello, {name}!
; } ``` -Here's the key part of what the React Compiler generates: +Ecco la parte chiave di ciò che genera React Compiler: ```js {6-12} function Parent() { const $ = _c(7); const [seconds, setSeconds] = useState(0); - // ... other code ... + // ... altro codice ... let t3; if ($[4] === Symbol.for("react.memo_cache_sentinel")) { @@ -423,28 +430,28 @@ function Parent() { } else { t3 = $[4]; } - // ... return statement ... + // ... istruzione return ... } ``` -Notice the highlighted lines: The compiler wraps `` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed. +Nota le righe evidenziate: il compiler avvolge `` in un controllo della cache. Poiché la prop `name` è sempre `"John"`, questo JSX viene creato una volta e riusato a ogni ri-renderizzazione del genitore. Questo è esattamente ciò che fa `React.memo`: impedisce al figlio di ri-renderizzarsi quando le sue props non sono cambiate. -The React Compiler automatically: -1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed -2. Reuses the previously created JSX for `` -3. Skips re-rendering `ExpensiveChild` entirely +React Compiler automaticamente: +1. Traccia che la prop `name` passata a `ExpensiveChild` non è cambiata +2. Riutilizza il JSX creato in precedenza per `` +3. Salta completamente la ri-renderizzazione di `ExpensiveChild` -This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain. +Ciò significa che **puoi rimuovere `React.memo` dai tuoi componenti in sicurezza quando usi React Compiler**. Il compiler fornisce la stessa ottimizzazione automaticamente, rendendo il tuo codice più pulito e più facile da mantenere. -The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree. +L'ottimizzazione del compiler è in realtà più completa di `React.memo`. Memorizza anche valori intermedi e computazioni costose all'interno dei tuoi componenti, in modo simile a combinare `React.memo` con `useMemo` in tutto l'albero dei componenti. --- ## Troubleshooting {/*troubleshooting*/} -### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} +### Il mio componente si ri-renderizza quando una prop è un oggetto, un array o una funzione {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} -React compares old and new props by shallow equality: that is, it considers whether each new prop is reference-equal to the old prop. If you create a new object or array each time the parent is re-rendered, even if the individual elements are each the same, React will still consider it to be changed. Similarly, if you create a new function when rendering the parent component, React will consider it to have changed even if the function has the same definition. To avoid this, [simplify props or memoize props in the parent component](#minimizing-props-changes). +React confronta le props vecchie e nuove per uguaglianza superficiale: cioè, considera se ogni nuova prop è reference-equal alla prop vecchia. Se crei un nuovo oggetto o array ogni volta che il genitore viene ri-renderizzato, anche se i singoli elementi sono gli stessi, React lo considererà comunque cambiato. Allo stesso modo, se crei una nuova funzione quando renderizzi il componente genitore, React la considererà cambiata anche se la funzione ha la stessa definizione. Per evitare questo, [semplifica le props o memorizza le props nel componente genitore](#minimizing-props-changes). From 1fa3fbd9e632759e9dfa57b6edd2a0d6ac3bd5b4 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 20:45:47 +0000 Subject: [PATCH 3/4] translate(reference): forwardRef (#693) Signed-off-by: Alessandro De Blasis Co-authored-by: Cursor --- src/content/reference/react/forwardRef.md | 91 ++++++++++++----------- 1 file changed, 49 insertions(+), 42 deletions(-) diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index db42bfae0..765c2f28a 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -1,18 +1,25 @@ --- title: forwardRef +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/forwardRef.md). + + + -In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. +In React 19, `forwardRef` non è più necessario. Passa `ref` come prop. -`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). +`forwardRef` sarà deprecato in una futura release. Scopri di più [qui](/blog/2024/04/25/react-19#ref-as-a-prop). -`forwardRef` lets your component expose a DOM node to the parent component with a [ref.](/learn/manipulating-the-dom-with-refs) +`forwardRef` ti permette di esporre un nodo DOM al componente genitore con un [ref.](/learn/manipulating-the-dom-with-refs) ```js const SomeComponent = forwardRef(render) @@ -28,7 +35,7 @@ const SomeComponent = forwardRef(render) ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +Chiama `forwardRef()` per far sì che il tuo componente riceva un ref e lo inoltri a un componente figlio: ```js import { forwardRef } from 'react'; @@ -38,26 +45,26 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*parameters*/} -* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component. +* `render`: La funzione render del tuo componente. React chiama questa funzione con le props e il `ref` che il tuo componente ha ricevuto dal genitore. Il JSX che restituisci sarà l'output del tuo componente. #### Returns {/*returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop. +`forwardRef` restituisce un componente React che puoi renderizzare in JSX. A differenza dei componenti React definiti come funzioni semplici, un componente restituito da `forwardRef` può anche ricevere una prop `ref`. #### Caveats {/*caveats*/} -* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored. +* In Strict Mode, React **chiamerà la tua funzione render due volte** per [aiutarti a trovare impurità accidentali.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) Questo comportamento vale solo in sviluppo e non influisce sulla produzione. Se la tua funzione render è pura (come dovrebbe essere), non dovrebbe influire sulla logica del tuo componente. Il risultato di una delle chiamate verrà ignorato. --- -### `render` function {/*render-function*/} +### Funzione `render` {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` accetta una funzione render come argomento. React chiama questa funzione con `props` e `ref`: ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -72,21 +79,21 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: Le props passate dal componente genitore. -* `ref`: The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle) +* `ref`: L'attributo `ref` passato dal componente genitore. Il `ref` può essere un oggetto o una funzione. Se il componente genitore non ha passato un ref, sarà `null`. Dovresti inoltrare il `ref` che ricevi a un altro componente oppure passarlo a [`useImperativeHandle`.](/reference/react/useImperativeHandle) #### Returns {/*render-returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop. +`forwardRef` restituisce un componente React che puoi renderizzare in JSX. A differenza dei componenti React definiti come funzioni semplici, il componente restituito da `forwardRef` può ricevere una prop `ref`. --- ## Usage {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### Esporre un nodo DOM al componente genitore {/*exposing-a-dom-node-to-the-parent-component*/} -By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`: +Per impostazione predefinita, i nodi DOM di ogni componente sono privati. A volte però è utile esporre un nodo DOM al genitore — ad esempio, per metterlo a fuoco. Per attivare questa opzione, avvolgi la definizione del componente in `forwardRef()`: ```js {3,11} import { forwardRef } from 'react'; @@ -102,7 +109,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose: +Riceverai un ref come secondo argomento dopo le props. Passalo al nodo DOM che vuoi esporre: ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -118,7 +125,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -This lets the parent `Form` component access the `` DOM node exposed by `MyInput`: +Questo permette al componente genitore `Form` di accedere al nodo DOM `` esposto da `MyInput`: ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -139,15 +146,15 @@ function Form() { } ``` -This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `` browser tag. As a result, the `Form` component can access that `` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it. +Questo componente `Form` [passa un ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) a `MyInput`. Il componente `MyInput` *inoltra* quel ref al tag browser ``. Di conseguenza, il componente `Form` può accedere a quel nodo DOM `` e chiamare [`focus()`](https://developer.mozilla.org/it/docs/Web/API/HTMLElement/focus) su di esso. -Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment. +Tieni presente che esporre un ref al nodo DOM interno al tuo componente complica il cambiamento dei dettagli interni in seguito. In genere esporrai nodi DOM da componenti riutilizzabili di basso livello come pulsanti o campi di testo, ma non lo farai per componenti a livello applicativo come un avatar o un commento. - + -#### Focusing a text input {/*focusing-a-text-input*/} +#### Mettere a fuoco un campo di testo {/*focusing-a-text-input*/} -Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser ``. This lets the `Form` component focus the ``. +Cliccando il pulsante metterai a fuoco l'input. Il componente `Form` definisce un ref e lo passa al componente `MyInput`. Il componente `MyInput` inoltra quel ref al `` del browser. Questo permette al componente `Form` di mettere a fuoco l'``. @@ -199,9 +206,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### Riprodurre e mettere in pausa un video {/*playing-and-pausing-a-video*/} -Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `