Skip to content

Commit 8b35cc6

Browse files
zubialevichzubialevich
authored
Merge pull request #46 from reactjs/sync-4bdb87b1
Sync with react.dev @ 4bdb87b
2 parents 32f01df + 571b34e commit 8b35cc6

29 files changed

Lines changed: 1064 additions & 54 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 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/learn/describing-the-ui.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -530,13 +530,21 @@ React выкарыстоўвае дрэвы для мадэліравання а
530530

531531
Дрэва рэндэрынгу React — гэта адлюстраванне бацькоўскіх і даччыных адносін паміж кампанентамі.
532532

533-
<Diagram name="generic_render_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі, кожны з якіх уяўляе кампанент. Каранёвы вузел знаходзіцца ў верхняй частцы дрэвападобнага графіка і пазначаны як «Каранёвы кампанент (Root Component)». Ён мае дзве стрэлкі, якія ідуць уніз да двух вузлоў, пазначаных «Кампанент A (Component A)» і «Кампанент C (Component C)». Кожная са стрэлак пазначана надпісам «рэндэрыць». «Кампанент A» мае адзіную стрэлку «рэндэрыць» да вузла з надпісам «Кампанент B (Component B)». «Кампанент C» мае адну стрэлку «рэндэрыць» да вузла з надпісам «Кампанент D (Component D)».">Прыклад дрэва рэндэрынгу React.</Diagram>
533+
<Diagram name="generic_render_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі, кожны з якіх уяўляе кампанент. Каранёвы вузел знаходзіцца ў верхняй частцы дрэвападобнага графіка і пазначаны як «Каранёвы кампанент (Root Component)». Ён мае дзве стрэлкі, якія ідуць уніз да двух вузлоў, пазначаных «Кампанент A (Component A)» і «Кампанент C (Component C)». Кожная са стрэлак пазначана надпісам «рэндэрыць». «Кампанент A» мае адзіную стрэлку «рэндэрыць» да вузла з надпісам «Кампанент B (Component B)». «Кампанент C» мае адну стрэлку «рэндэрыць» да вузла з надпісам «Кампанент D (Component D)».">
534+
535+
Прыклад дрэва рэндэрынгу React.
536+
537+
</Diagram>
534538

535539
Кампаненты, якія знаходзяцца ў верхняй частцы дрэва, каля каранёвага кампанента, лічацца кампанентамі верхняга ўзроўню. Кампаненты без даччыных кампанентаў з'яўляюцца ліставымі кампанентамі. Такая класіфікацыя кампанентаў карысная для разумення патоку даных і прадукцыйнасці рэндэрынгу.
536540

537541
Мадэліраванне адносін паміж модулямі JavaScript — гэта яшчэ адзін карысны спосаб зразумець вашу праграму. Мы называем гэта «дрэвам залежнасці модуляў».
538542

539-
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі. Кожны вузел уяўляе сабой JavaScript модуль. Самы верхні вузел пазначаны як «RootModule.js». Ён мае тры стрэлкі, якія ідуць да вузлоў: «ModuleA.js», «ModuleB.js» і «ModuleC.js». Кожная стрэлка пазначана надпісам «імпартуе». Вузел «ModuleC.js» мае адну стрэлку з надпісам «імпартуе», якая паказвае на вузел з надпісам «ModuleD.js».">Прыклад дрэва залежнасцяў модуля.</Diagram>
543+
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі. Кожны вузел уяўляе сабой JavaScript модуль. Самы верхні вузел пазначаны як «RootModule.js». Ён мае тры стрэлкі, якія ідуць да вузлоў: «ModuleA.js», «ModuleB.js» і «ModuleC.js». Кожная стрэлка пазначана надпісам «імпартуе». Вузел «ModuleC.js» мае адну стрэлку з надпісам «імпартуе», якая паказвае на вузел з надпісам «ModuleD.js».">
544+
545+
Прыклад дрэва залежнасцяў модуля.
546+
547+
</Diagram>
540548

541549
Дрэва залежнасцяў часта выкарыстоўваецца інструментамі зборкі для аб'яднання ўсяго адпаведнага JavaScript кода для спампоўвання і адлюстравання кліентам. Вялікі памер пакета пагаршае карыстальніцкі досвед узаемадзеяння з праграмамі напісанымі з дапамогай React. Разуменне дрэва залежнасцяў модуля дапамагае вырашаць такія праблемы.
542550

‎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!'));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render
253253

254254
In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
255255

256-
Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
256+
Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
257257

258258
Identifying these categories of components are useful for understanding data flow and performance of your app.
259259

0 commit comments

Comments
 (0)