Skip to content

Commit 20cb759

Browse files
tddtdd
authored
Merge pull request #609 from reactjs/sync-4bdb87b1
Sync with react.dev @ 4bdb87b
2 parents a732a9a + 012c12e commit 20cb759

27 files changed

Lines changed: 1049 additions & 41 deletions

‎.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",

‎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 = 'The library for web and native user interfaces',
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 est une bibliothèque pour des interfaces utilisateurs web et natives. Construisez des interfaces utilisateurs à partir de briques individuelles appelées composants, écrites en JavaScript. React est conçu pour vous permettre de combiner sans effort des composants produits par des acteurs distincts, qu’il s’agisse de personnes, d’équipes ou d’organisations entières.'
58+
: 'La bibliothèque pour des interfaces utilisateurs web et natives';
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/learn/describing-the-ui.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -529,13 +529,21 @@ React utilise des arbres pour modéliser les relations entre les composants ou l
529529

530530
Un arbre de rendu React représente les relations parent-enfants entre les composants.
531531

532-
<Diagram name="generic_render_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds, où chaque nœud représente un composant. Le nœud racine est situé tout en haut du graphe et porte le libellé « Composant Racine ». Deux flèches en partent pour atteindre plus bas deux nœuds libellés « Composant A » et « Composant C ». Chaque flèche porte le descripteur de relation « fait le rendu de ». Une flèche de rendu unique part du « Composant A » vers un nœud libellé « Composant B ». Une flèche de rendu unique part du « Composant C » vers un nœud libellé « Composant D ».">Un exemple d’arbre de rendu React.</Diagram>
532+
<Diagram name="generic_render_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds, où chaque nœud représente un composant. Le nœud racine est situé tout en haut du graphe et porte le libellé « Composant Racine ». Deux flèches en partent pour atteindre plus bas deux nœuds libellés « Composant A » et « Composant C ». Chaque flèche porte le descripteur de relation « fait le rendu de ». Une flèche de rendu unique part du « Composant A » vers un nœud libellé « Composant B ». Une flèche de rendu unique part du « Composant C » vers un nœud libellé « Composant D ».">
533+
534+
Un exemple d’arbre de rendu React.
535+
536+
</Diagram>
533537

534538
Les composants proches du haut de l'arbre, près du composant racine, sont considérés comme des composants de haut niveau. Les composants qui n'ont pas de composants enfants sont qualifiés de composants feuilles. La catégorisation des composants aide à comprendre le flux de données et les performances de rendu.
535539

536540
Une autre manière utile de percevoir votre application consiste à modéliser les relations entre les modules JavaScript. Nous parlons alors d'arbre de dépendances de modules.
537541

538-
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds. Chaque nœud représente un module JavaScript. Le nœud tout en haut est libellé « RootModule.js ». Trois flèches en partent vers d’autres nœuds : « ModuleA.js », « ModuleB.js » et « ModuleC.js ». Chaque flèche porte le descripteur de relation « importe ». Un flèche d’import unique part de « ModuleC.js » vers un nœud libellé « ModuleD.js ».">Un exemple d’arbre de dépendances de modules.</Diagram>
542+
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds. Chaque nœud représente un module JavaScript. Le nœud tout en haut est libellé « RootModule.js ». Trois flèches en partent vers d’autres nœuds : « ModuleA.js », « ModuleB.js » et « ModuleC.js ». Chaque flèche porte le descripteur de relation « importe ». Un flèche d’import unique part de « ModuleC.js » vers un nœud libellé « ModuleD.js ».">
543+
544+
Un exemple d’arbre de dépendances de modules.
545+
546+
</Diagram>
539547

540548
On utilise souvent un arbre de dépendances dans les outils de *build* pour *bundler* tout le code JavaScript que le client devra télécharger pour assurer le rendu. Un *bundle* massif nuira à l'expérience utilisateur des applis React. Comprendre l'arborescence des dépendances de modules aide à déboguer ces problèmes.
541549

‎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
// Imaginez que ça fait une requête réseau
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('Bonne idée, mais mauvaise réponse. Réessayez !'));

‎src/content/learn/understanding-your-ui-as-a-tree.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ Avec le rendu conditionnel, d'un rendu à l'autre, l'arbre de rendu peut différ
252252

253253
Dans cet exemple, selon la valeur de `inspiration.type`, nous pouvons afficher soit `<FancyText>` soit `<Color>`. L'arbre de rendu peut être différent d'une passe de rendu à l'autre.
254254

255-
Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres restent utiles pour identifier les composants racine et feuilles d'une appli React. Les composants de haut niveau sont ceux les plus proches du composant racine, et peuvent impacter la performance de tous les composants en-dessous d'eux. Ce sont souvent eux qui ont la plus forte complexité. Les composants feuilles sont vers le bas de l'arbre, n'ont pas de composants enfants et refont fréquemment leur rendu.
255+
Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres restent utiles pour identifier les composants *racines* et *feuilles* d'une appli React. Les composants de haut niveau sont ceux les plus proches du composant racine, et peuvent impacter la performance de tous les composants en-dessous d'eux. Ce sont souvent eux qui ont la plus forte complexité. Les composants feuilles sont vers le bas de l'arbre, n'ont pas de composants enfants et refont fréquemment leur rendu.
256256

257257
Il est utile de bien identifier ces catégories de composants pour comprendre le flux de données et les performances de votre appli.
258258

0 commit comments

Comments
 (0)