From b5288fbf5f41b5152c2c2d6233b2886c0499e409 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 15 Sep 2026 06:57:51 +0300 Subject: [PATCH 1/4] =?UTF-8?q?translate(blog):=20index=20and=202020?= =?UTF-8?q?=E2=80=932022=20posts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AI-translated blog index and seven posts from 2020–2022, with sidebar title sync and ai-draft markers. Signed-off-by: Alessandro De Blasis --- ...a-fetching-with-react-server-components.md | 29 ++- .../blog/2021/06/08/the-plan-for-react-18.md | 73 ++++--- .../blog/2021/12/17/react-conf-2021-recap.md | 113 ++++++----- .../blog/2022/03/08/react-18-upgrade-guide.md | 173 ++++++++-------- src/content/blog/2022/03/29/react-v18.md | 191 +++++++++--------- ...-what-we-have-been-working-on-june-2022.md | 73 ++++--- src/content/blog/index.md | 123 +++++------ src/sidebarBlog.json | 20 +- 8 files changed, 422 insertions(+), 373 deletions(-) diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index b0bc9f558..e55ab0e14 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -1,34 +1,41 @@ --- -title: "Introducing Zero-Bundle-Size React Server Components" +title: "Presentazione dei React Server Components a zero dimensione del bundle" author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage date: 2020/12/21 -description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. +description: Il 2020 è stato un anno lungo. Mentre volge al termine, volevamo condividere un aggiornamento speciale per le feste sulla nostra ricerca sui React Server Components a zero dimensione del bundle. +translationStatus: ai-draft --- -December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) + + +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/blog/2020/12/21/data-fetching-with-react-server-components.md). + + + +21 dicembre 2020 di [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) e [Sebastian Markbåge](https://twitter.com/sebmarkbage) --- -2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size **React Server Components**. +Il 2020 è stato un anno lungo. Mentre volge al termine, volevamo condividere un aggiornamento speciale per le feste sulla nostra ricerca sui **React Server Components** a zero dimensione del bundle. --- -To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year. +Per presentare i React Server Components, abbiamo preparato un talk e una demo. Se vuoi, puoi guardarli durante le feste, o più tardi quando il lavoro riprenderà nel nuovo anno. -**React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!** +**I React Server Components sono ancora in fase di ricerca e sviluppo.** Condividiamo questo lavoro nello spirito della trasparenza e per raccogliere un feedback iniziale dalla community React. Ci sarà tutto il tempo per farlo, quindi **non sentirti in obbligo di recuperare subito!** -If you want to check them out, we recommend going in the following order: +Se vuoi provarli, ti consigliamo di procedere in questo ordine: -1. **Watch the talk** to learn about React Server Components and see the demo. +1. **Guarda il talk** per scoprire i React Server Components e vedere la demo. -2. **[Clone the demo](http://github.com/reactjs/server-components-demo)** to play with React Server Components on your computer. +2. **[Clona la demo](http://github.com/reactjs/server-components-demo)** per sperimentare con i React Server Components sul tuo computer. -3. **[Read the RFC (with FAQ at the end)](https://github.com/reactjs/rfcs/pull/188)** for a deeper technical breakdown and to provide feedback. +3. **[Leggi l'RFC (con FAQ alla fine)](https://github.com/reactjs/rfcs/pull/188)** per un'analisi tecnica più approfondita e per inviare feedback. -We are excited to hear from you on the RFC or in replies to the [@reactjs](https://twitter.com/reactjs) Twitter handle. Happy holidays, stay safe, and see you next year! +Siamo entusiasti di sentire la tua opinione sull'RFC o nelle risposte all'handle Twitter [@reactjs](https://twitter.com/reactjs). Buone feste, stai al sicuro e ci vediamo l'anno prossimo! diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index 1004523b7..f225656da 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -1,71 +1,78 @@ --- -title: "The Plan for React 18" +title: "Il piano per React 18" author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster date: 2021/06/08 -description: The React team is excited to share a few updates. We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve published a React 18 Alpha so that library authors can try it and provide feedback... +description: Il team React è entusiasta di condividere alcuni aggiornamenti. Abbiamo iniziato a lavorare al rilascio di React 18, che sarà la nostra prossima versione major. Abbiamo creato un Working Group per preparare la community all'adozione graduale delle nuove funzionalità in React 18. Abbiamo pubblicato una React 18 Alpha affinché gli autori di librerie possano provarla e fornire feedback... +translationStatus: ai-draft --- -June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) + + +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/blog/2021/06/08/the-plan-for-react-18.md). + + + +8 giugno 2021 di [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) e [Seth Webster](https://twitter.com/sethwebster) --- -The React team is excited to share a few updates: +Il team React è entusiasta di condividere alcuni aggiornamenti: -1. We’ve started work on the React 18 release, which will be our next major version. -2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. -3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. +1. Abbiamo iniziato a lavorare al rilascio di React 18, che sarà la nostra prossima versione major. +2. Abbiamo creato un Working Group per preparare la community all'adozione graduale delle nuove funzionalità in React 18. +3. Abbiamo pubblicato una React 18 Alpha affinché gli autori di librerie possano provarla e fornire feedback. -These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! +Questi aggiornamenti sono rivolti principalmente ai maintainer di librerie di terze parti. Se stai imparando, insegnando o usando React per costruire applicazioni rivolte agli utenti, puoi ignorare tranquillamente questo post. Ma sei il benvenuto a seguire le discussioni nel React 18 Working Group, se sei curioso! --- -## What’s coming in React 18 {/*whats-coming-in-react-18*/} +## Cosa arriverà in React 18 {/*whats-coming-in-react-18*/} -When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. +Quando sarà rilasciato, React 18 includerà miglioramenti pronti all'uso (come il [raggruppamento automatico](https://github.com/reactwg/react-18/discussions/21)), nuove API (come [`startTransition`](https://github.com/reactwg/react-18/discussions/41)) e un [nuovo renderer server in streaming](https://github.com/reactwg/react-18/discussions/37) con supporto integrato per `React.lazy`. -These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. +Queste funzionalità sono possibili grazie a un nuovo meccanismo opt-in che aggiungiamo in React 18. Si chiama "concurrent rendering" e consente a React di preparare più versioni dell'UI contemporaneamente. Questa modifica avviene per lo più dietro le quinte, ma sblocca nuove possibilità per migliorare sia le prestazioni reali che quelle percepite della tua app. -If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** +Se hai seguito la nostra ricerca sul futuro di React (non ci aspettiamo che lo faccia!), potresti aver sentito parlare di qualcosa chiamato "concurrent mode" o che potrebbe rompere la tua app. In risposta a questo feedback della community, abbiamo ridisegnato la strategia di upgrade per un'adozione graduale. Invece di una "modalità" tutto-o-niente, il concurrent rendering sarà abilitato solo per gli aggiornamenti attivati da una delle nuove funzionalità. In pratica, questo significa che **potrai adottare React 18 senza riscritture e provare le nuove funzionalità al tuo ritmo.** -## A gradual adoption strategy {/*a-gradual-adoption-strategy*/} +## Una strategia di adozione graduale {/*a-gradual-adoption-strategy*/} -Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. +Poiché la concorrenza in React 18 è opt-in, non ci sono cambiamenti breaking significativi out-of-the-box nel comportamento dei componenti. **Puoi passare a React 18 con modifiche minime o nulle al codice della tua applicazione, con uno sforzo paragonabile a un tipico rilascio major di React**. In base alla nostra esperienza nella conversione di diverse app a React 18, ci aspettiamo che molti utenti possano effettuare l'upgrade in un solo pomeriggio. -We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. +Abbiamo distribuato con successo funzionalità concorrenti su decine di migliaia di componenti su Facebook e, nella nostra esperienza, abbiamo scoperto che la maggior parte dei componenti React "funziona semplicemente" senza modifiche aggiuntive. Ci impegniamo a rendere questo un upgrade fluido per l'intera community, quindi oggi annunciamo il React 18 Working Group. -## Working with the community {/*working-with-the-community*/} +## Collaborare con la community {/*working-with-the-community*/} -We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! +Per questo rilascio stiamo provando qualcosa di nuovo: abbiamo invitato un panel di esperti, sviluppatori, autori di librerie ed educatori da tutta la community React a partecipare al nostro [React 18 Working Group](https://github.com/reactwg/react-18) per fornire feedback, porre domande e collaborare al rilascio. Non potevamo invitare tutti quelli che volevamo in questo gruppo iniziale e ristretto, ma se questo esperimento funziona, speriamo ce ne saranno altri in futuro! -**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. +**L'obiettivo del React 18 Working Group è preparare l'ecosistema a un'adozione fluida e graduale di React 18 da parte di applicazioni e librerie esistenti.** Il Working Group è ospitato su [GitHub Discussions](https://github.com/reactwg/react-18/discussions) ed è disponibile al pubblico in lettura. I membri del working group possono lasciare feedback, porre domande e condividere idee. Il core team userà anche la repo delle discussioni per condividere i risultati delle nostre ricerche. Man mano che il rilascio stabile si avvicina, qualsiasi informazione importante sarà pubblicata anche su questo blog. -For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). +Per maggiori informazioni sull'upgrade a React 18 o risorse aggiuntive sul rilascio, consulta il [post di annuncio di React 18](https://github.com/reactwg/react-18/discussions/4). -## Accessing the React 18 Working Group {/*accessing-the-react-18-working-group*/} +## Accedere al React 18 Working Group {/*accessing-the-react-18-working-group*/} -Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). +Tutti possono leggere le discussioni nella [repo del React 18 Working Group](https://github.com/reactwg/react-18). -Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. +Poiché ci aspettiamo un'ondata iniziale di interesse nel Working Group, solo i membri invitati potranno creare o commentare i thread. Tuttavia, i thread sono completamente visibili al pubblico, quindi tutti hanno accesso alle stesse informazioni. Crediamo che sia un buon compromesso tra creare un ambiente produttivo per i membri del working group e mantenere la trasparenza con la community più ampia. -As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/react/react/issues). +Come sempre, puoi inviare segnalazioni di bug, domande e feedback generici al nostro [issue tracker](https://github.com/react/react/issues). -## How to try React 18 Alpha today {/*how-to-try-react-18-alpha-today*/} +## Come provare React 18 Alpha oggi {/*how-to-try-react-18-alpha-today*/} -New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. +Nuove alpha vengono [pubblicate regolarmente su npm con il tag `@alpha`](https://github.com/reactwg/react-18/discussions/9). Questi rilasci sono costruiti usando l'ultimo commit della nostra repo principale. Quando una funzionalità o una correzione di bug viene unita, apparirà in un'alpha il giorno lavorativo successivo. -There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. +Potrebbero esserci cambiamenti significativi nel comportamento o nell'API tra le release alpha. Ricorda che **le release alpha non sono consigliate per applicazioni in produzione rivolte agli utenti**. -## Projected React 18 release timeline {/*projected-react-18-release-timeline*/} +## Timeline prevista per il rilascio di React 18 {/*projected-react-18-release-timeline*/} -We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. +Non abbiamo una data di rilascio specifica programmata, ma ci aspettiamo che serviranno diversi mesi di feedback e iterazione prima che React 18 sia pronto per la maggior parte delle applicazioni in produzione. -* Library Alpha: Available today -* Public Beta: At least several months -* Release Candidate (RC): At least several weeks after Beta -* General Availability: At least several weeks after RC +* Library Alpha: disponibile oggi +* Public Beta: almeno diversi mesi +* Release Candidate (RC): almeno diverse settimane dopo la Beta +* General Availability: almeno diverse settimane dopo la RC -More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. +Maggiori dettagli sulla nostra timeline prevista sono [disponibili nel Working Group](https://github.com/reactwg/react-18/discussions/9). Pubblicheremo aggiornamenti su questo blog quando saremo più vicini a un rilascio pubblico. diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index c9e75ff7b..ceb86c4de 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -1,53 +1,60 @@ --- -title: "React Conf 2021 Recap" +title: "React Conf 2021: il riepilogo" author: Jesslyn Tannady and Rick Hanlon date: 2021/12/17 -description: Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +description: La scorsa settimana abbiamo ospitato la nostra sesta React Conf. Negli anni precedenti, abbiamo usato il palco di React Conf per annunci rivoluzionari come React Native e React Hooks. Quest'anno, abbiamo condiviso la nostra visione multi-piattaforma per React, a partire dal rilascio di React 18 e dall'adozione graduale delle funzionalità concorrenti. +translationStatus: ai-draft --- -December 17, 2021 by [Jesslyn Tannady](https://twitter.com/jtannady) and [Rick Hanlon](https://twitter.com/rickhanlonii) + + +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/blog/2021/12/17/react-conf-2021-recap.md). + + + +17 dicembre 2021 di [Jesslyn Tannady](https://twitter.com/jtannady) e [Rick Hanlon](https://twitter.com/rickhanlonii) --- -Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) and [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +La scorsa settimana abbiamo ospitato la nostra sesta React Conf. Negli anni precedenti, abbiamo usato il palco di React Conf per annunci rivoluzionari come [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) e [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). Quest'anno, abbiamo condiviso la nostra visione multi-piattaforma per React, a partire dal rilascio di React 18 e dall'adozione graduale delle funzionalità concorrenti. --- -This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events. +È stata la prima volta che React Conf è stata ospitata online, trasmessa gratuitamente e tradotta in 8 lingue diverse. Partecipanti da tutto il mondo si sono uniti al Discord della conferenza e all'evento replay per l'accessibilità in tutti i fusi orari. Oltre 50.000 persone si sono registrate, con oltre 60.000 visualizzazioni di 19 talk e 5.000 partecipanti su Discord in entrambi gli eventi. -All the talks are [available to stream online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). +Tutti i talk sono [disponibili in streaming online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). -Here’s a summary of what was shared on stage: +Ecco un riepilogo di quanto condiviso sul palco: -## React 18 and concurrent features {/*react-18-and-concurrent-features*/} +## React 18 e le funzionalità concorrenti {/*react-18-and-concurrent-features*/} -In the keynote, we shared our vision for the future of React starting with React 18. +Nella keynote, abbiamo condiviso la nostra visione per il futuro di React a partire da React 18. -React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release. +React 18 aggiunge il tanto atteso renderer concorrente e aggiornamenti a Suspense senza breaking change significativi. Le app possono passare a React 18 e iniziare ad adottare gradualmente le funzionalità concorrenti con uno sforzo paragonabile a qualsiasi altro rilascio major. -**This means there is no concurrent mode, only concurrent features.** +**Questo significa che non c'è una concurrent mode, ma solo funzionalità concorrenti.** -In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native. +Nella keynote, abbiamo anche condiviso la nostra visione per Suspense, i Server Components, i nuovi working group React e la nostra visione a lungo termine multi-piattaforma per React Native. -Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: +Guarda la keynote completa di [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes) e [Rick Hanlon](https://twitter.com/rickhanlonii) qui: -## React 18 for Application Developers {/*react-18-for-application-developers*/} +## React 18 per gli sviluppatori di applicazioni {/*react-18-for-application-developers*/} -In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year. +Nella keynote, abbiamo anche annunciato che la React 18 RC è disponibile per essere provata. In attesa di ulteriore feedback, questa è la versione esatta di React che pubblicheremo in stable all'inizio del prossimo anno. -To try the React 18 RC, upgrade your dependencies: +Per provare la React 18 RC, aggiorna le tue dipendenze: ```bash npm install react@rc react-dom@rc ``` -and switch to the new `createRoot` API: +e passa alla nuova API `createRoot`: ```js // before @@ -60,64 +67,64 @@ const root = ReactDOM.createRoot(container); root.render(); ``` -For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: +Per una demo dell'upgrade a React 18, guarda il talk di [Shruti Kapoor](https://twitter.com/shrutikapoor08) qui: -## Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} +## Server rendering in streaming con Suspense {/*streaming-server-rendering-with-suspense*/} -React 18 also includes improvements to server-side rendering performance using Suspense. +React 18 include anche miglioramenti alle prestazioni del server-side rendering usando Suspense. -Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use `Suspense` to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster. +Il server rendering in streaming ti consente di generare HTML dai componenti React sul server e inviare quell'HTML ai tuoi utenti. In React 18, puoi usare `Suspense` per suddividere la tua app in unità più piccole e indipendenti che possono essere trasmesse in streaming separatamente l'una dall'altra senza bloccare il resto dell'app. Questo significa che gli utenti vedranno i tuoi contenuti prima e potranno iniziare a interagirci molto più rapidamente. -For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: +Per un approfondimento, guarda il talk di [Shaundai Person](https://twitter.com/shaundai) qui: -## The first React working group {/*the-first-react-working-group*/} +## Il primo working group React {/*the-first-react-working-group*/} -For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`. +Per React 18, abbiamo creato il nostro primo Working Group per collaborare con un panel di esperti, sviluppatori, maintainer di librerie ed educatori. Insieme abbiamo lavorato per creare la nostra strategia di adozione graduale e per affinare nuove API come `useId`, `useSyncExternalStore` e `useInsertionEffect`. -For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: +Per una panoramica di questo lavoro, guarda il talk di [Aakansha' Doshi](https://twitter.com/aakansha1216): -## React Developer Tooling {/*react-developer-tooling*/} +## Strumenti per sviluppatori React {/*react-developer-tooling*/} -To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps. +Per supportare le nuove funzionalità di questo rilascio, abbiamo anche annunciato il team React DevTools appena formato e un nuovo Timeline Profiler per aiutare gli sviluppatori a fare il debug delle loro app React. -For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: +Per maggiori informazioni e una demo delle nuove funzionalità DevTools, guarda il talk di [Brian Vaughn](https://twitter.com/brian_d_vaughn): -## React without memo {/*react-without-memo*/} +## React senza memo {/*react-without-memo*/} -Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: +Guardando più avanti nel futuro, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) ha condiviso un aggiornamento dalla nostra ricerca React Labs su un compilatore auto-memoizzante. Guarda questo talk per maggiori informazioni e una demo del prototipo del compilatore: -## React docs keynote {/*react-docs-keynote*/} +## Keynote sulla documentazione React {/*react-docs-keynote*/} -[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)): +[Rachel Nabors](https://twitter.com/rachelnabors) ha aperto una sezione di talk sull'apprendimento e il design con React con una keynote sul nostro investimento nella nuova documentazione React ([ora pubblicata come react.dev](/blog/2023/03/16/introducing-react-dev)): -## And more... {/*and-more*/} +## E altro ancora... {/*and-more*/} -**We also heard talks on learning and designing with React:** +**Abbiamo anche ascoltato talk sull'apprendimento e il design con React:** * Debbie O'Brien: [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s). * Sarah Rainsberger: [Learning in the Browser](https://youtu.be/5X-WEQflCL0). * Linton Ye: [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk). * Delba de Oliveira: [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34). -**Talks from the Relay, React Native, and PyTorch teams:** +**Talk dai team Relay, React Native e PyTorch:** * Robert Balicki: [Re-introducing Relay](https://youtu.be/lhVGdErZuN4). * Eric Rozell and Steven Moyes: [React Native Desktop](https://youtu.be/9L4FFrvwJwY). * Roman Rädle: [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8) -**And talks from the community on accessibility, tooling, and Server Components:** +**E talk dalla community su accessibilità, strumenti e Server Components:** * Daishi Kato: [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8). * Diego Haz: [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8). @@ -125,36 +132,36 @@ Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpr * Lyle Troxell: [UI tools for artists](https://youtu.be/b3l4WxipFsE). * Helen Lin: [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks). -## Thank you {/*thank-you*/} +## Grazie {/*thank-you*/} -This was our first year planning a conference ourselves, and we have a lot of people to thank. +Questo è stato il nostro primo anno a pianificare una conferenza da soli, e abbiamo molte persone da ringraziare. -First, thanks to all of our speakers [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +Prima di tutto, grazie a tutti i nostri speaker [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0) e [Xuan Huang (黄玄)](https://twitter.com/Huxpro). -Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). +Grazie a tutti coloro che hanno aiutato a fornire feedback sui talk, tra cui [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors) e [Tim Yung](https://twitter.com/yungsters). -Thanks to [Lauren Tan](https://twitter.com/potetotes) for setting up the conference Discord and serving as our Discord admin. +Grazie a [Lauren Tan](https://twitter.com/potetotes) per aver configurato il Discord della conferenza e per essere stata la nostra admin Discord. -Thanks to [Seth Webster](https://twitter.com/sethwebster) for feedback on overall direction and making sure we were focused on diversity and inclusion. +Grazie a [Seth Webster](https://twitter.com/sethwebster) per il feedback sulla direzione generale e per aver assicurato che ci concentrassimo su diversità e inclusione. -Thanks to [Rachel Nabors](https://twitter.com/rachelnabors) for spearheading our moderation effort, and [Aisha Blake](https://twitter.com/AishaBlake) for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events. +Grazie a [Rachel Nabors](https://twitter.com/rachelnabors) per aver guidato il nostro sforzo di moderazione e a [Aisha Blake](https://twitter.com/AishaBlake) per aver creato la nostra guida alla moderazione, guidato il team di moderazione, formato traduttori e moderatori e aiutato a moderare entrambi gli eventi. -Thanks to our moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +Grazie ai nostri moderatori [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li e [Xuan Huang (黄玄)](https://twitter.com/Huxpro). -Thanks to [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), and Vihang Patel from [React India](https://www.reactindia.io/), and [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), and [YanLun Li](https://twitter.com/anneincoding) from [React China](https://twitter.com/ReactChina) for helping moderate our replay event and keep it engaging for the community. +Grazie a [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0) e Vihang Patel di [React India](https://www.reactindia.io/), e [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15) e [YanLun Li](https://twitter.com/anneincoding) di [React China](https://twitter.com/ReactChina) per aver aiutato a moderare il nostro evento replay e mantenerlo coinvolgente per la community. -Thanks to Vercel for publishing their [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), which the conference website was built on, and to [Lee Robinson](https://twitter.com/leeerob) and [Delba de Oliveira](https://twitter.com/delba_oliveira) for sharing their experience running Next.js Conf. +Grazie a Vercel per aver pubblicato il loro [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), su cui è stato costruito il sito della conferenza, e a [Lee Robinson](https://twitter.com/leeerob) e [Delba de Oliveira](https://twitter.com/delba_oliveira) per aver condiviso la loro esperienza nell'organizzazione di Next.js Conf. -Thanks to [Leah Silber](https://twitter.com/wifelette) for sharing her experience running conferences, learnings from running [RustConf](https://rustconf.com/), and for her book [Event Driven](https://leanpub.com/eventdriven/) and the advice it contains for running conferences. +Grazie a [Leah Silber](https://twitter.com/wifelette) per aver condiviso la sua esperienza nell'organizzazione di conferenze, gli insegnamenti tratti dall'organizzazione di [RustConf](https://rustconf.com/) e per il suo libro [Event Driven](https://leanpub.com/eventdriven/) e i consigli che contiene per organizzare conferenze. -Thanks to [Kevin Lewis](https://twitter.com/_phzn) and [Rachel Nabors](https://twitter.com/rachelnabors) for sharing their experience running Women of React Conf. +Grazie a [Kevin Lewis](https://twitter.com/_phzn) e [Rachel Nabors](https://twitter.com/rachelnabors) per aver condiviso la loro esperienza nell'organizzazione di Women of React Conf. -Thanks to [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), and [Shaundai Person](https://twitter.com/shaundai) for their advice and ideas throughout planning. +Grazie a [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic) e [Shaundai Person](https://twitter.com/shaundai) per i loro consigli e le loro idee durante la pianificazione. -Thanks to [Dan Lebowitz](https://twitter.com/lebo) for help designing and building the conference website and tickets. +Grazie a [Dan Lebowitz](https://twitter.com/lebo) per l'aiuto nella progettazione e nella costruzione del sito e dei biglietti della conferenza. -Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks. +Grazie a Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman e altri del team Facebook Video Productions per aver registrato i video della Keynote e dei talk dei dipendenti Meta. -Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages. +Grazie al nostro partner HitPlay per aver aiutato a organizzare la conferenza, montato tutti i video dello stream, tradotto tutti i talk e moderato il Discord in più lingue. -Finally, thanks to all of our participants for making this a great React Conf! +Infine, grazie a tutti i nostri partecipanti per aver reso questa una grande React Conf! diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 50babfb13..563a45d06 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -1,47 +1,54 @@ --- -title: "How to Upgrade to React 18" +title: "Come passare a React 18" author: Rick Hanlon date: 2022/03/08 -description: As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +description: Come abbiamo condiviso nel post di rilascio, React 18 introduce funzionalità alimentate dal nostro nuovo renderer concorrente, con una strategia di adozione graduale per le applicazioni esistenti. In questo post, ti guideremo attraverso i passaggi per passare a React 18. +translationStatus: ai-draft --- -March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii) + + +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/blog/2022/03/08/react-18-upgrade-guide.md). + + + +8 marzo 2022 di [Rick Hanlon](https://twitter.com/rickhanlonii) --- -As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +Come abbiamo condiviso nel [post di rilascio](/blog/2022/03/29/react-v18), React 18 introduce funzionalità alimentate dal nostro nuovo renderer concorrente, con una strategia di adozione graduale per le applicazioni esistenti. In questo post, ti guideremo attraverso i passaggi per passare a React 18. -Please [report any issues](https://github.com/react/react/issues/new/choose) you encounter while upgrading to React 18. +[Segnala eventuali problemi](https://github.com/react/react/issues/new/choose) che incontri durante l'upgrade a React 18. -For React Native users, React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). +Per gli utenti React Native, React 18 sarà incluso in una versione futura di React Native. Questo perché React 18 si basa sulla New React Native Architecture per beneficiare delle nuove capability presentate in questo blog post. Per maggiori informazioni, consulta la [keynote di React Conf qui](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). --- -## Installing {/*installing*/} +## Installazione {/*installing*/} -To install the latest version of React: +Per installare l'ultima versione di React: ```bash npm install react react-dom ``` -Or if you’re using yarn: +Oppure, se usi yarn: ```bash yarn add react react-dom ``` -## Updates to Client Rendering APIs {/*updates-to-client-rendering-apis*/} +## Aggiornamenti alle API di client rendering {/*updates-to-client-rendering-apis*/} -When you first install React 18, you will see a warning in the console: +Quando installi React 18 per la prima volta, vedrai un warning nella console: @@ -49,7 +56,7 @@ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Unti -React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. +React 18 introduce una nuova root API che offre una migliore ergonomia per la gestione delle root. La nuova root API abilita anche il nuovo renderer concorrente, che ti consente di opt-in alle funzionalità concorrenti. ```js // Before @@ -64,7 +71,7 @@ const root = createRoot(container); // createRoot(container!) if you use TypeScr root.render(); ``` -We’ve also changed `unmountComponentAtNode` to `root.unmount`: +Abbiamo anche sostituito `unmountComponentAtNode` con `root.unmount`: ```js // Before @@ -74,7 +81,7 @@ unmountComponentAtNode(container); root.unmount(); ``` -We've also removed the callback from render, since it usually does not have the expected result when using Suspense: +Abbiamo anche rimosso la callback da render, poiché di solito non produce il risultato atteso quando si usa Suspense: ```js // Before @@ -99,11 +106,11 @@ root.render(); -There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. +Non esiste una sostituzione uno-a-uno per la vecchia render callback API — dipende dal tuo caso d'uso. Consulta il post del working group [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) per maggiori informazioni. -Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`: +Infine, se la tua app usa server-side rendering con hydration, passa da `hydrate` a `hydrateRoot`: ```js // Before @@ -118,40 +125,40 @@ const root = hydrateRoot(container, ); // Unlike with createRoot, you don't need a separate root.render() call here. ``` -For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5). +Per maggiori informazioni, consulta la [discussione del working group qui](https://github.com/reactwg/react-18/discussions/5). -**If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out. +**Se la tua app non funziona dopo l'upgrade, verifica se è avvolta in ``.** [Strict Mode è diventato più rigoroso in React 18](#updates-to-strict-mode) e non tutti i tuoi componenti potrebbero essere resilienti ai nuovi controlli che aggiunge in modalità development. Se rimuovere Strict Mode risolve il problema, puoi rimuoverlo durante l'upgrade e poi reinserirlo (in cima all'albero o su una parte dell'albero) dopo aver corretto i problemi che segnala. -## Updates to Server Rendering APIs {/*updates-to-server-rendering-apis*/} +## Aggiornamenti alle API di server rendering {/*updates-to-server-rendering-apis*/} -In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server. +In questo rilascio, stiamo rinnovando le nostre API `react-dom/server` per supportare completamente Suspense sul server e lo Streaming SSR. Come parte di questi cambiamenti, stiamo deprecando la vecchia API di streaming Node, che non supporta lo streaming incrementale di Suspense sul server. -Using this API will now warn: +L'uso di questa API ora genera un warning: -* `renderToNodeStream`: **Deprecated ⛔️️** +* `renderToNodeStream`: **Deprecata ⛔️️** -Instead, for streaming in Node environments, use: -* `renderToPipeableStream`: **New ✨** +Invece, per lo streaming in ambienti Node, usa: +* `renderToPipeableStream`: **Nuova ✨** -We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers: -* `renderToReadableStream`: **New ✨** +Stiamo anche introducendo una nuova API per supportare lo streaming SSR con Suspense per ambienti edge runtime moderni, come Deno e Cloudflare workers: +* `renderToReadableStream`: **Nuova ✨** -The following APIs will continue working, but with limited support for Suspense: -* `renderToString`: **Limited** ⚠️ -* `renderToStaticMarkup`: **Limited** ⚠️ +Le seguenti API continueranno a funzionare, ma con supporto limitato per Suspense: +* `renderToString`: **Limitato** ⚠️ +* `renderToStaticMarkup`: **Limitato** ⚠️ -Finally, this API will continue to work for rendering e-mails: +Infine, questa API continuerà a funzionare per il rendering delle e-mail: * `renderToStaticNodeStream` -For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021. +Per maggiori informazioni sui cambiamenti alle API di server rendering, consulta il post del working group [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), un [approfondimento sulla nuova Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37) e il talk di [Shaundai Person](https://twitter.com/shaundai) su [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) alla React Conf 2021. -## Updates to TypeScript definitions {/*updates-to-typescript-definitions*/} +## Aggiornamenti alle definizioni TypeScript {/*updates-to-typescript-definitions*/} -If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example: +Se il tuo progetto usa TypeScript, dovrai aggiornare le dipendenze `@types/react` e `@types/react-dom` alle ultime versioni. I nuovi tipi sono più sicuri e rilevano problemi che prima venivano ignorati dal type checker. Il cambiamento più rilevante è che la prop `children` ora deve essere elencata esplicitamente quando definisci le props, ad esempio: ```typescript{3} interface MyButtonProps { @@ -160,13 +167,13 @@ interface MyButtonProps { } ``` -See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster. +Consulta la [pull request React 18 typings](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) per l'elenco completo dei cambiamenti solo di tipo. Collega a esempi di correzioni nei tipi delle librerie così puoi vedere come adattare il tuo codice. Puoi usare lo [script di migrazione automatizzato](https://github.com/eps1lon/types-react-codemod) per portare più rapidamente il codice della tua applicazione ai nuovi tipi più sicuri. -If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo. +Se trovi un bug nei tipi, [apri un issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) nella repo DefinitelyTyped. -## Automatic Batching {/*automatic-batching*/} +## Raggruppamento automatico {/*automatic-batching*/} -React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default: +React 18 aggiunge miglioramenti delle prestazioni out-of-the-box facendo più raggruppamento per impostazione predefinita. Il raggruppamento è quando React raggruppa più aggiornamenti di state in una singola ri-renderizzazione per prestazioni migliori. Prima di React 18, raggruppavamo gli aggiornamenti solo all'interno dei gestori di eventi React. Gli aggiornamenti all'interno di promise, setTimeout, gestori di eventi nativi o qualsiasi altro evento non venivano raggruppati in React per impostazione predefinita: ```js // Before React 18 only React events were batched @@ -185,7 +192,7 @@ setTimeout(() => { ``` -Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events: +A partire da React 18 con `createRoot`, tutti gli aggiornamenti saranno raggruppati automaticamente, indipendentemente da dove provengono. Questo significa che gli aggiornamenti all'interno di timeout, promise, gestori di eventi nativi o qualsiasi altro evento verranno raggruppati allo stesso modo degli aggiornamenti all'interno degli eventi React: ```js // After React 18 updates inside of timeouts, promises, @@ -204,7 +211,7 @@ setTimeout(() => { }, 1000); ``` -This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`: +Questo è un breaking change, ma ci aspettiamo che comporti meno lavoro di renderizzazione e quindi prestazioni migliori nelle tue applicazioni. Per disattivare il raggruppamento automatico, puoi usare `flushSync`: ```js import { flushSync } from 'react-dom'; @@ -221,26 +228,26 @@ function handleClick() { } ``` -For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21). +Per maggiori informazioni, consulta l'[approfondimento sul raggruppamento automatico](https://github.com/reactwg/react-18/discussions/21). -## New APIs for Libraries {/*new-apis-for-libraries*/} +## Nuove API per le librerie {/*new-apis-for-libraries*/} -In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs: +Nel React 18 Working Group abbiamo lavorato con i maintainer di librerie per creare nuove API necessarie a supportare il concurrent rendering per casi d'uso specifici in aree come gli stili e gli store esterni. Per supportare React 18, alcune librerie potrebbero dover passare a una delle seguenti API: -* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86). -* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `