You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
fix(blog): polish 2023 translations and glossary alignment
Align bylines, internal link labels, and glossary terms across the three
2023 blog posts; fix Experimental channel anchor in react-canaries.
Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
Co-authored-by: Cursor <cursoragent@cursor.com>
Copy file name to clipboardExpand all lines: src/content/blog/2023/03/16/introducing-react-dev.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ description: Oggi siamo entusiasti di lanciare react.dev, la nuova casa di React
6
6
translationStatus: ai-draft
7
7
---
8
8
9
-
16 marzo 2023 by[Dan Abramov](https://bsky.app/profile/danabra.mov)and[Rachel Nabors](https://twitter.com/rachelnabors)
9
+
16 marzo 2023 di[Dan Abramov](https://bsky.app/profile/danabra.mov)e[Rachel Nabors](https://twitter.com/rachelnabors)
10
10
11
11
---
12
12
@@ -44,7 +44,7 @@ Se non hai ancora visto la nuova homepage, dagli un'occhiata!
44
44
45
45
## Tutto su React moderno con gli Hooks {/*going-all-in-on-modern-react-with-hooks*/}
46
46
47
-
Quando abbiamo rilasciato React Hooks nel 2018, la documentazione sugli Hooks presupponeva che il lettore conoscesse i class component. Questo ha aiutato la community ad adottare gli Hooks molto rapidamente, ma col tempo la vecchia documentazione non serviva più i nuovi lettori. I nuovi lettori dovevano imparare React due volte: prima con i class component e poi di nuovo con gli Hooks.
47
+
Quando abbiamo rilasciato React Hooks nel 2018, la documentazione sugli Hooks presupponeva che il lettore conoscesse i componenti class. Questo ha aiutato la community ad adottare gli Hooks molto rapidamente, ma col tempo la vecchia documentazione non serviva più i nuovi lettori. I nuovi lettori dovevano imparare React due volte: prima con i componenti class e poi di nuovo con gli Hooks.
48
48
49
49
**La nuova documentazione insegna React con gli Hooks fin dall'inizio.** La documentazione è divisa in due sezioni principali:
50
50
@@ -55,7 +55,7 @@ Vediamo più da vicino cosa trovi in ciascuna sezione.
55
55
56
56
<Note>
57
57
58
-
Ci sono ancora alcuni rari casi d'uso con class component che non hanno ancora un equivalente basato su Hook. I class component restano supportati e sono documentati nella sezione [Legacy API](/reference/react/legacy) del nuovo sito.
58
+
Ci sono ancora alcuni rari casi d'uso con componenti class che non hanno ancora un equivalente basato su Hook. I componenti class restano supportati e sono documentati nella sezione [Legacy API](/reference/react/legacy) del nuovo sito.
59
59
60
60
</Note>
61
61
@@ -254,7 +254,7 @@ I prossimi due capitoli sono più avanzati e ti daranno una comprensione più pr
254
254
-**[Gestione dello state](/learn/managing-state)** insegna come organizzare la logica man mano che la tua app cresce in complessità.
255
255
-**[Soluzioni alternative](/learn/escape-hatches)** insegna come puoi "uscire" da React e quando ha più senso farlo.
256
256
257
-
Ogni capitolo consiste di diverse pagine correlate. La maggior parte di queste pagine insegna una competenza o una tecnica specifica — ad esempio [Scrivere Markup con JSX](/learn/writing-markup-with-jsx), [Aggiornare gli Oggetti nello State](/learn/updating-objects-in-state), o [Sharing State Between Components](/learn/sharing-state-between-components). Alcune pagine si concentrano sull'spiegare un'idea — come [Renderizzare e Aggiornare](/learn/render-and-commit), o [Lo State come un'Istantanea](/learn/state-as-a-snapshot). E ce ne sono alcune, come [Potresti non avere bisogno di un Effetto](/learn/you-might-not-need-an-effect), che condividono i nostri suggerimenti basati su ciò che abbiamo imparato in questi anni.
257
+
Ogni capitolo consiste di diverse pagine correlate. La maggior parte di queste pagine insegna una competenza o una tecnica specifica — ad esempio [Scrivere Markup con JSX](/learn/writing-markup-with-jsx), [Aggiornare gli Oggetti nello State](/learn/updating-objects-in-state), o [Condividere lo State tra Componenti](/learn/sharing-state-between-components). Alcune pagine si concentrano sull'esplicazione di un'idea — come [Renderizzare e Aggiornare](/learn/render-and-commit), o [Lo State come un'Istantanea](/learn/state-as-a-snapshot). E ce ne sono alcune, come [Potresti non avere bisogno di un Effetto](/learn/you-might-not-need-an-effect), che condividono i nostri suggerimenti basati su ciò che abbiamo imparato in questi anni.
258
258
259
259
Non devi leggere questi capitoli in sequenza. Chi ha tempo per questo?! Ma potresti. Le pagine nella sezione Impara React si basano solo su concetti introdotti dalle pagine precedenti. Se vuoi leggerlo come un libro, fallo pure!
260
260
@@ -444,11 +444,11 @@ In questa soluzione, due condizioni separate vengono usate per inserire uno spaz
444
444
445
445
</Challenges>
446
446
447
-
Nota il pulsante "Show solution" nell'angolo in basso a sinistra. È comodo se vuoi verificare da solo!
447
+
Nota il pulsante "Mostra soluzione" nell'angolo in basso a sinistra. È comodo se vuoi verificare da solo!
448
448
449
449
### Costruisci un'intuizione con diagrammi e illustrazioni {/*build-an-intuition-with-diagrams-and-illustrations*/}
450
450
451
-
Quando non riuscivamo a spiegare qualcosa solo con codice e parole, abbiamo aggiunto diagrammi che aiutano a fornire intuizione. Ad esempio, ecco uno dei diagrammi da [Preserving and Resetting State](/learn/preserving-and-resetting-state):
451
+
Quando non riuscivamo a spiegare qualcosa solo con codice e parole, abbiamo aggiunto diagrammi che aiutano a fornire intuizione. Ad esempio, ecco uno dei diagrammi da [Preservare e Resettare lo Stato](/learn/preserving-and-resetting-state):
452
452
453
453
<Diagramname="preserving_state_diff_same_pt1"height={350}width={794}alt="Diagramma con tre sezioni, con una freccia che collega ogni sezione. La prima sezione contiene un componente React etichettato 'div' con un unico figlio etichettato 'section', che ha un unico figlio etichettato 'Counter' contenente una bolla di state etichettata 'count' con valore 3. La sezione centrale ha lo stesso genitore 'div', ma i componenti figli sono stati eliminati, indicato da un'immagine gialla 'proof'. La terza sezione ha di nuovo lo stesso genitore 'div', ora con un nuovo figlio etichettato 'div', evidenziato in giallo, anche con un nuovo figlio etichettato 'Counter' contenente una bolla di state etichettata 'count' con valore 0, tutto evidenziato in giallo.">
@@ -34,7 +34,7 @@ RSC combina il semplice modello mentale request/response delle Multi-Page App se
34
34
35
35
Dall'ultimo aggiornamento, abbiamo mergiato l'[RFC di React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) per ratificare la proposta. Abbiamo risolto i problemi aperti con la proposta [React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) e raggiunto consenso con i nostri partner per adottare la convenzione `"use client"`. Questi documenti fungono anche da specifica per ciò che un'implementazione compatibile con RSC dovrebbe supportare.
36
36
37
-
Il cambiamento più grande è che abbiamo introdotto [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) come modo principale per fare data fetching dai componenti Server. Prevediamo anche di supportare il caricamento dati dal client introducendo un nuovo Hook chiamato `use` che unwrap le Promise. Anche se non possiamo supportare `async / await` in componenti arbitrari in app solo-client, prevediamo di aggiungere supporto quando strutturi la tua app solo-client in modo simile a come sono strutturate le app RSC.
37
+
Il cambiamento più grande è che abbiamo introdotto [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) come modo principale per fare data fetching dai componenti Server. Prevediamo anche di supportare il caricamento dati dal client introducendo un nuovo Hook chiamato `use` che estrae i valori dalle Promise. Anche se non possiamo supportare `async / await` in componenti arbitrari in app solo-client, prevediamo di aggiungere supporto quando strutturi la tua app solo-client in modo simile a come sono strutturate le app RSC.
38
38
39
39
Ora che abbiamo il data fetching abbastanza a posto, stiamo esplorando l'altra direzione: inviare dati dal client al server, così puoi eseguire mutazioni del database e implementare form. Lo facciamo permettendoti di passare funzioni Server Action attraverso il confine server/client, che il client può poi chiamare, fornendo RPC fluido. Le Server Action ti danno anche form progressivamente migliorati prima che JavaScript carichi.
40
40
@@ -56,7 +56,7 @@ Pagine e schermate diverse nella tua app possono avere metadati diversi come il
56
56
57
57
Oggi le persone risolvono questo problema con una di due tecniche.
58
58
59
-
Una tecnica è renderizzare un componente third-party speciale che sposta `<title>`, `<meta>` e altri tag al suo interno nel `<head>` del documento. Funziona per i browser principali, ma ci sono molti client che non eseguono JavaScript lato client, come i parser Open Graph, quindi questa tecnica non è universalmente adatta.
59
+
Una tecnica è renderizzare un componente di terze parti speciale che sposta `<title>`, `<meta>` e altri tag al suo interno nel `<head>` del documento. Funziona per i browser principali, ma ci sono molti client che non eseguono JavaScript lato client, come i parser Open Graph, quindi questa tecnica non è universalmente adatta.
60
60
61
61
Un'altra tecnica è server-renderizzare la pagina in due parti. Prima viene renderizzato il contenuto principale e vengono raccolti tutti questi tag. Poi il `<head>` viene renderizzato con questi tag. Infine `<head>` e contenuto principale vengono inviati al browser. Questo approccio funziona, ma ti impedisce di sfruttare lo [Streaming Server Renderer di React 18](/reference/react-dom/server/renderToReadableStream) perché dovresti aspettare che tutto il contenuto sia renderizzato prima di inviare il `<head>`.
62
62
@@ -68,23 +68,23 @@ Dall'aggiornamento precedente abbiamo iterato attivamente sul design di [React F
68
68
69
69
L'idea centrale di React è che gli sviluppatori definiscono la loro UI come funzione dello state corrente. Lavori con valori JavaScript semplici — numeri, stringhe, array, oggetti — e usi idiomi JavaScript standard — if/else, for, ecc. — per descrivere la logica del componente. Il modello mentale è che React ri-renderizza ogni volta che lo state dell'applicazione cambia. Crediamo che questo semplice modello mentale e restare vicini alla semantica JavaScript sia un principio importante nel modello di programmazione di React.
70
70
71
-
Il problema è che React a volte può essere *troppo* reattivo: può ri-renderizzare troppo. Ad esempio, in JavaScript non abbiamo modi economici per confrontare se due oggetti o array sono equivalenti (stesse chiavi e valori), quindi creare un nuovo oggetto o array a ogni render può far fare a React più lavoro del necessario. Questo significa che gli sviluppatori devono memoizzare esplicitamente i componenti per non reagire eccessivamente ai cambiamenti.
71
+
Il problema è che React a volte può essere *troppo* reattivo: può ri-renderizzare troppo. Ad esempio, in JavaScript non abbiamo modi economici per confrontare se due oggetti o array sono equivalenti (stesse chiavi e valori), quindi creare un nuovo oggetto o array a ogni render può far fare a React più lavoro del necessario. Questo significa che gli sviluppatori devono memorizzare esplicitamente i componenti per non reagire eccessivamente ai cambiamenti.
72
72
73
-
Il nostro obiettivo con React Forget è assicurare che le app React abbiano di default la giusta quantità di reattività: che le app ri-renderizzino solo quando i valori di state cambiano in modo *significativo*. Dal punto di vista dell'implementazione significa memoizzare automaticamente, ma crediamo che l'inquadratura della reattività sia un modo migliore di capire React e Forget. Un modo di pensarci è che React attualmente ri-renderizza quando cambia l'identità dell'oggetto. Con Forget, React ri-renderizza quando cambia il valore semantico — senza il costo runtime di confronti profondi.
73
+
Il nostro obiettivo con React Forget è assicurare che le app React abbiano di default la giusta quantità di reattività: che le app ri-renderizzino solo quando i valori di state cambiano in modo *significativo*. Dal punto di vista dell'implementazione significa memorizzare automaticamente, ma crediamo che l'inquadratura della reattività sia un modo migliore di capire React e Forget. Un modo di pensarci è che React attualmente ri-renderizza quando cambia l'identità dell'oggetto. Con Forget, React ri-renderizza quando cambia il valore semantico — senza il costo runtime di confronti profondi.
74
74
75
-
In termini di progressi concreti, dall'ultimo aggiornamento abbiamo iterato sostanzialmente sul design del compilatore per allinearlo a questo approccio di reattività automatica e incorporare feedback dall'uso interno del compilatore. Dopo rifattorizzazioni significative al compilatore a fine scorso anno, abbiamo iniziato a usarlo in produzione in aree limitate in Meta. Prevediamo di open-sourcarlo una volta provato in produzione.
75
+
In termini di progressi concreti, dall'ultimo aggiornamento abbiamo iterato sostanzialmente sul design del compilatore per allinearlo a questo approccio di reattività automatica e incorporare feedback dall'uso interno del compilatore. Dopo rifattorizzazioni significative al compilatore a fine scorso anno, abbiamo iniziato a usarlo in produzione in aree limitate in Meta. Prevediamo di rilasciarlo in open source una volta provato in produzione.
76
76
77
-
Infine, molte persone hanno espresso interesse su come funziona il compilatore. Non vediamo l'ora di condividere molti più dettagli quando avremo provato il compilatore e lo open-sourceremo. Ma ci sono alcuni punti che possiamo condividere ora:
77
+
Infine, molte persone hanno espresso interesse su come funziona il compilatore. Non vediamo l'ora di condividere molti più dettagli quando avremo provato il compilatore e lo rilasceremo in open source. Ma ci sono alcuni punti che possiamo condividere ora:
78
78
79
79
Il core del compilatore è quasi completamente disaccoppiato da Babel, e l'API core del compilatore è (approssimativamente) old AST in, new AST out (mantenendo i dati di posizione nel sorgente). Sotto il cofano usiamo una rappresentazione del codice custom e una pipeline di trasformazione per fare analisi semantica a basso livello. Tuttavia, l'interfaccia pubblica principale al compilatore sarà tramite Babel e altri plugin del build system. Per facilitare i test abbiamo attualmente un plugin Babel che è un wrapper molto sottile che chiama il compilatore per generare una nuova versione di ogni funzione e sostituirla.
80
80
81
81
Mentre rifattorizzavamo il compilatore negli ultimi mesi, volevamo concentrarci sul perfezionare il modello di compilazione core per assicurarci di gestire complessità come condizionali, loop, riassegnazioni e mutazioni. Tuttavia JavaScript ha molti modi di esprimere ciascuna di queste funzionalità: if/else, ternari, for, for-in, for-of, ecc. Cercare di supportare l'intero linguaggio fin dall'inizio avrebbe ritardato il punto in cui avremmo potuto validare il modello core. Invece abbiamo iniziato con un sottoinsieme piccolo ma rappresentativo del linguaggio: let/const, if/else, for loop, oggetti, array, primitivi, chiamate di funzione e altre poche funzionalità. Man mano che acquisivamo fiducia nel modello core e perfezionavamo le nostre astrazioni interne, abbiamo espanso il sottoinsieme supportato. Siamo anche espliciti sulla sintassi non ancora supportata, loggando diagnostiche e saltando la compilazione per input non supportato. Abbiamo utility per provare il compilatore sui codebase Meta e vedere quali funzionalità non supportate sono più comuni così da prioritizzarle. Continueremo ad espandere incrementalmente verso il supporto dell'intero linguaggio.
82
82
83
-
Rendere reattivo il JavaScript semplice nei componenti React richiede un compilatore con profonda comprensione della semantica così da capire esattamente cosa fa il codice. Con questo approccio stiamo creando un sistema di reattività in JavaScript che ti permette di scrivere codice di prodotto di qualsiasi complessità con la piena espressività del linguaggio, invece di essere limitati a un domain specific language.
83
+
Rendere reattivo il JavaScript semplice nei componenti React richiede un compilatore con profonda comprensione della semantica così da capire esattamente cosa fa il codice. Con questo approccio stiamo creando un sistema di reattività in JavaScript che ti permette di scrivere codice di prodotto di qualsiasi complessità con la piena espressività del linguaggio, invece di essere limitati a un linguaggio specifico del dominio.
84
84
85
85
## Offscreen Rendering {/*offscreen-rendering*/}
86
86
87
-
L'offscreen rendering è una capability in arrivo in React per renderizzare schermate in background senza overhead aggiuntivo di performance. Puoi pensarla come una versione della [proprietà CSS `content-visibility`](https://developer.mozilla.org/it/docs/Web/CSS/content-visibility) che funziona non solo per elementi DOM ma anche per componenti React. Durante la ricerca abbiamo scoperto vari casi d'uso:
87
+
L'offscreen rendering è una funzionalità in arrivo in React per renderizzare schermate in background senza overhead aggiuntivo di performance. Puoi pensarla come una versione della [proprietà CSS `content-visibility`](https://developer.mozilla.org/it/docs/Web/CSS/content-visibility) che funziona non solo per elementi DOM ma anche per componenti React. Durante la ricerca abbiamo scoperto vari casi d'uso:
88
88
89
89
* Un router può prerenderizzare schermate in background così quando un utente ci naviga, sono immediatamente disponibili.
90
90
* Un componente per il cambio tab può preservare lo state delle tab nascoste, così l'utente può passare tra di esse senza perdere i progressi.
@@ -99,7 +99,7 @@ Dall'ultimo aggiornamento abbiamo testato internamente in Meta una versione sper
99
99
100
100
## Transition Tracing {/*transition-tracing*/}
101
101
102
-
L'API Transition Tracing ti permette di rilevare quando le [Transizioni React](/reference/react/useTransition) diventano più lente e investigare perché possono essere lente. Dopo l'ultimo aggiornamento abbiamo completato il design iniziale dell'API e pubblicato un [RFC](https://github.com/reactjs/rfcs/pull/238). Le capability di base sono state anche implementate. Il progetto è attualmente in pausa. Accogliamo feedback sull'RFC e non vediamo l'ora di riprenderne lo sviluppo per fornire uno strumento migliore di misurazione delle performance per React. Sarà particolarmente utile con router costruiti sopra le Transizioni React, come [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
102
+
L'API Transition Tracing ti permette di rilevare quando le [Transizioni React](/reference/react/useTransition) diventano più lente e investigare perché possono essere lente. Dopo l'ultimo aggiornamento abbiamo completato il design iniziale dell'API e pubblicato un [RFC](https://github.com/reactjs/rfcs/pull/238). Le funzionalità di base sono state anche implementate. Il progetto è attualmente in pausa. Accogliamo feedback sull'RFC e non vediamo l'ora di riprenderne lo sviluppo per fornire uno strumento migliore di misurazione delle performance per React. Sarà particolarmente utile con router costruiti sopra le Transizioni React, come [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
103
103
104
104
* * *
105
105
Oltre a questo aggiornamento, il nostro team è stato recentemente ospite di podcast e livestream della community per parlare più del nostro lavoro e rispondere a domande.
0 commit comments