Skip to content

Commit d936b16

Browse files
deblasisdeblasis
authored
Merge pull request #469 from reactjs/sync-4bdb87b1
Sync with react.dev @ 4bdb87b
2 parents e2aecff + f90d580 commit d936b16

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1722
-69
lines changed

‎.env.production

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
1+
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"classnames": "^2.2.6",
3131
"date-fns": "^2.16.1",
3232
"debounce": "^1.2.1",
33-
"ga-lite": "^2.1.4",
3433
"github-slugger": "^1.3.0",
3534
"next": "^13.4.1",
3635
"next-remote-watch": "^1.0.0",

‎public/images/docs/diagrams/conditional_render_tree.dark.png

13.1 KB
Loading

‎public/images/docs/diagrams/conditional_render_tree.png

13.7 KB
Loading

‎public/images/docs/diagrams/generic_dependency_tree.dark.png

11.1 KB
Loading

‎public/images/docs/diagrams/generic_dependency_tree.png

11.6 KB
Loading

‎public/images/docs/diagrams/generic_render_tree.dark.png

14.4 KB
Loading

‎public/images/docs/diagrams/generic_render_tree.png

14.9 KB
Loading

‎public/images/docs/diagrams/module_dependency_tree.dark.png

16.2 KB
Loading

‎public/images/docs/diagrams/module_dependency_tree.png

16.6 KB
Loading

‎public/images/docs/diagrams/render_tree.dark.png

11.7 KB
Loading

‎public/images/docs/diagrams/render_tree.png

12.3 KB
Loading

‎src/components/Layout/Feedback.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
import {useState} from 'react';
66
import {useRouter} from 'next/router';
7-
import {ga} from '../../utils/analytics';
87

98
export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
109
const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
4847
function sendGAEvent(isPositive: boolean) {
4948
// Fragile. Don't change unless you've tested the network payload
5049
// and verified that the right events actually show up in GA.
51-
ga(
52-
'send',
53-
'event',
54-
'button',
55-
'feedback',
56-
window.location.pathname,
57-
isPositive ? '1' : '0'
58-
);
50+
// @ts-ignore
51+
gtag('event', 'feedback', {
52+
event_category: 'button',
53+
event_label: window.location.pathname,
54+
value: isPositive ? 1 : 0,
55+
});
5956
}
6057

6158
function SendFeedback({onSubmit}: {onSubmit: () => void}) {

‎src/components/Layout/Page.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@ interface PageProps {
2828
children: React.ReactNode;
2929
toc: Array<TocItem>;
3030
routeTree: RouteItem;
31-
meta: {title?: string; canary?: boolean; description?: string};
31+
meta: {
32+
title?: string;
33+
titleForTitleTag?: string;
34+
canary?: boolean;
35+
description?: string;
36+
};
3237
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
3338
}
3439

@@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
107112
<>
108113
<Seo
109114
title={title}
115+
titleForTitleTag={meta.titleForTitleTag}
110116
isHomePage={isHomePage}
111117
image={`/images/og-` + section + '.png'}
112118
searchOrder={searchOrder}

‎src/components/MDX/Sandpack/Preview.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ export function Preview({
5252
rawError = null;
5353
}
5454

55+
// When throwing a new Error in Sandpack - we want to disable the dev error dialog
56+
// to show the Error Boundary fallback
57+
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
58+
rawError = null;
59+
}
60+
5561
// Memoized because it's fed to debouncing.
5662
const firstLintError = useMemo(() => {
5763
if (lintErrors.length === 0) {

‎src/components/Seo.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';
99

1010
export interface SeoProps {
1111
title: string;
12+
titleForTitleTag: undefined | string;
1213
description?: string;
1314
image?: string;
1415
// jsonld?: JsonLDType | Array<JsonLDType>;
@@ -36,7 +37,7 @@ function getDomain(languageCode: string): string {
3637
export const Seo = withRouter(
3738
({
3839
title,
39-
description = 'La libreria per le interfacce utente web e native',
40+
titleForTitleTag,
4041
image = '/images/og-default.png',
4142
router,
4243
children,
@@ -47,14 +48,20 @@ export const Seo = withRouter(
4748
const canonicalUrl = `https://${siteDomain}${
4849
router.asPath.split(/[\?\#]/)[0]
4950
}`;
50-
const pageTitle = isHomePage ? title : title + ' – React';
51+
// Allow setting a different title for Google results
52+
const pageTitle =
53+
(titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
5154
// Twitter's meta parser is not very good.
5255
const twitterTitle = pageTitle.replace(/[<>]/g, '');
56+
let description = isHomePage
57+
? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
58+
: 'The library for web and native user interfaces';
5359
return (
5460
<Head>
5561
<meta name="viewport" content="width=device-width, initial-scale=1" />
5662
{title != null && <title key="title">{pageTitle}</title>}
57-
{description != null && (
63+
{isHomePage && (
64+
// Let Google figure out a good description for each page.
5865
<meta name="description" key="description" content={description} />
5966
)}
6067
<link rel="canonical" href={canonicalUrl} />

‎src/content/community/meetups.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
4848
* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
4949
* [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
5050
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
51+
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
5152
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
5253

5354
## Chile {/*chile*/}

‎src/content/learn/describing-the-ui.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ React è una libreria JavaScript per il rendering delle interfacce utente(UI). L
1818
* [Come rappresentare condizionalmente i componenti](/learn/conditional-rendering)
1919
* [Come renderizzare più componenti contemporaneamente](/learn/rendering-lists)
2020
* [Come evitare bug confusionari mantenendo i componenti puri](/learn/keeping-components-pure)
21+
* [Perché è utile capire che la UI è un albero](/learn/understanding-your-ui-as-a-tree)
2122

2223
</YouWillLearn>
2324

@@ -361,7 +362,7 @@ Leggi **[Rendering Condizionale](/learn/conditional-rendering)** per imparare i
361362
362363
</LearnMore>
363364
364-
## Rendering di Liste {/*rendering-lists*/}
365+
## Rendering di Liste {/*rendering-lists*/}
365366
366367
Spesso si desidera visualizzare più componenti simili da una raccolta di dati. È possibile utilizzare i metodi `filter()` e `map()` di JavaScript con React per filtrare e trasformare l'array di dati in un array di componenti.
367368

@@ -522,6 +523,37 @@ Leggi **[Mantenere i Componenti Puri](/learn/keeping-components-pure)** per impa
522523

523524
</LearnMore>
524525

526+
## La tua UI é un albero {/*your-ui-as-a-tree*/}
527+
528+
React usa gli alberi per modellare le relazioni tra componenti e moduli.
529+
530+
Un albero di renderizzazione di React è una rappresentazione delle relazioni padre e figlio tra i componenti.
531+
532+
<Diagram name="generic_render_tree" height={250} width={500} alt="Un grafico albero con cinque nodi, con ogni nodo rappresentante un componente. Il nodo radice è posizionato in alto ed è chiamato 'Componente Radice'. Ha due frecce che si estendono in basso a due nodi chiamati 'Componente A' e 'Componente C'. Ognuna di queste frecce è etichettata con 'renderizza'. 'Componente A' ha una singola freccia 'renderizza' verso il nodo 'Componente B'. 'Componente C' ha una singola freccia 'renderizza' verso il nodo chiamato 'Componente D'.">
533+
534+
Un esempio di albero di rendering React.
535+
536+
</Diagram>
537+
538+
I componenti vicino alla parte alta dell'albero, vicini al nodo radice, sono considerati componenti di alto livello. I componenti senza componenti figli sono componenti foglia. Questa categorizzazione dei componenti è utile per capire il flusso dati e le prestazioni di rendering.
539+
540+
Modellare le rezazioni tra moduli JavaScript è un altro modo utile per capire la tua app. Ci riferiamo ad essa come un albero di dipendenze tra moduli.
541+
542+
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un grafico albero con cinque nodi. Ogni nodo rappresenta un modulo JavaScript. Il nodo più in alto è chiamato 'RootModule.js'. Ha tre frecce che si estendono ai nodi: 'ModuleA.js', 'ModuleB.js', e 'ModuleC.js'. Ogni freccia è etichettata con 'importa'. Il nodo 'ModuleC.js' ha una singola freccia 'importa' che punta al nodo chiamato 'ModuleD.js'.">
543+
544+
Un esempio di albero di dipendenze tra moduli.
545+
546+
</Diagram>
547+
548+
Un albero di dipendenze è spesso usato da tools di compilazione per raggruppare tutto il codice JavaScript necessario al client da scaricare e renderizzare sotto forma di 'bundle'. Un 'bundle' di dimensioni elevate peggiora l'esperienza utente delle apps React. Capire l'albero di dipensenze tra moduli è utile per diagnosticare queste problematiche.
549+
550+
<LearnMore path="/learn/understanding-your-ui-as-a-tree">
551+
552+
Leggi **[La tua UI è un albero](/learn/understanding-your-ui-as-a-tree)** per imparare a creare albero di renderizzazione e di dipendenza tra moduli nelle applicazioni React e come sono utili modelli mentali per migliorare l'esperienza utente e le prestazioni.
553+
554+
</LearnMore>
555+
556+
525557
## Qual è il Prossimo Passo? {/*whats-next*/}
526558

527559
Vai a [Il Tuo Primo Componente](/learn/your-first-component) per iniziare a leggere questa pagina del capitolo pagina per pagina!

‎src/content/learn/preserving-and-resetting-state.md

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,17 @@ State is isolated between components. React keeps track of which state belongs t
1010

1111
<YouWillLearn>
1212

13-
* How React "sees" component structures
1413
* When React chooses to preserve or reset the state
1514
* How to force React to reset component's state
1615
* How keys and types affect whether the state is preserved
1716

1817
</YouWillLearn>
1918

20-
## The UI tree {/*the-ui-tree*/}
19+
## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
2120

22-
Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
23-
24-
React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
25-
26-
<DiagramGroup>
27-
28-
<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
29-
30-
From components, React creates a UI tree which React DOM uses to render the DOM
31-
32-
</Diagram>
33-
34-
</DiagramGroup>
35-
36-
## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
37-
38-
When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
21+
React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
3922

23+
When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
4024

4125
Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
4226

@@ -190,7 +174,7 @@ Updating state
190174
</DiagramGroup>
191175

192176

193-
React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
177+
React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
194178

195179
<Sandpack>
196180

‎src/content/learn/reacting-to-input-with-state.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function submitForm(answer) {
8484
// Pretend it's hitting the network.
8585
return new Promise((resolve, reject) => {
8686
setTimeout(() => {
87-
if (answer.toLowerCase() == 'istanbul') {
87+
if (answer.toLowerCase() === 'istanbul') {
8888
resolve();
8989
} else {
9090
reject(new Error('Good guess but a wrong answer. Try again!'));

0 commit comments

Comments
 (0)