merging all conflicts

reactjs · Oct 30, 2023 · d588bb8 · d588bb8
2 parents 59f8974 + 4bdb87b
commit d588bb8
Show file tree

Hide file tree

Showing 44 changed files with 1,780 additions and 42 deletions.
diff --git a/.env.production b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
-    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",

diff --git a/public/images/docs/diagrams/conditional_render_tree.dark.png b/public/images/docs/diagrams/conditional_render_tree.dark.png
diff --git a/public/images/docs/diagrams/conditional_render_tree.png b/public/images/docs/diagrams/conditional_render_tree.png
diff --git a/public/images/docs/diagrams/generic_dependency_tree.dark.png b/public/images/docs/diagrams/generic_dependency_tree.dark.png
diff --git a/public/images/docs/diagrams/generic_dependency_tree.png b/public/images/docs/diagrams/generic_dependency_tree.png
diff --git a/public/images/docs/diagrams/generic_render_tree.dark.png b/public/images/docs/diagrams/generic_render_tree.dark.png
diff --git a/public/images/docs/diagrams/generic_render_tree.png b/public/images/docs/diagrams/generic_render_tree.png
diff --git a/public/images/docs/diagrams/module_dependency_tree.dark.png b/public/images/docs/diagrams/module_dependency_tree.dark.png
diff --git a/public/images/docs/diagrams/module_dependency_tree.png b/public/images/docs/diagrams/module_dependency_tree.png
diff --git a/public/images/docs/diagrams/render_tree.dark.png b/public/images/docs/diagrams/render_tree.dark.png
diff --git a/public/images/docs/diagrams/render_tree.png b/public/images/docs/diagrams/render_tree.png
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,6 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
 function sendGAEvent(isPositive: boolean) {
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  ga(
-    'send',
-    'event',
-    'button',
-    'feedback',
-    window.location.pathname,
-    isPositive ? '1' : '0'
-  );
+  // @ts-ignore
+  gtag('event', 'feedback', {
+    event_category: 'button',
+    event_label: window.location.pathname,
+    value: isPositive ? 1 : 0,
+  });
 }
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -28,7 +28,12 @@ interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
   routeTree: RouteItem;
-  meta: {title?: string; canary?: boolean; description?: string};
+  meta: {
+    title?: string;
+    titleForTitleTag?: string;
+    canary?: boolean;
+    description?: string;
+  };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }
 
@@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     <>
       <Seo
         title={title}
+        titleForTitleTag={meta.titleForTitleTag}
         isHomePage={isHomePage}
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}

diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
@@ -52,6 +52,12 @@ export function Preview({
     rawError = null;
   }
 
+  // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+  // to show the Error Boundary fallback
+  if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+    rawError = null;
+  }
+
   // Memoized because it's fed to debouncing.
   const firstLintError = useMemo(() => {
     if (lintErrors.length === 0) {

diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';
 
 export interface SeoProps {
   title: string;
+  titleForTitleTag: undefined | string;
   description?: string;
   image?: string;
   // jsonld?: JsonLDType | Array<JsonLDType>;
@@ -36,7 +37,7 @@ function getDomain(languageCode: string): string {
 export const Seo = withRouter(
   ({
     title,
-    description = 'The library for web and native user interfaces',
+    titleForTitleTag,
     image = '/images/og-default.png',
     router,
     children,
@@ -47,14 +48,20 @@ export const Seo = withRouter(
     const canonicalUrl = `https://${siteDomain}${
       router.asPath.split(/[\?\#]/)[0]
     }`;
-    const pageTitle = isHomePage ? title : title + ' – React';
+    // Allow setting a different title for Google results
+    const pageTitle =
+      (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
+    let description = isHomePage
+      ? '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.'
+      : 'The library for web and native user interfaces';
     return (
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {title != null && <title key="title">{pageTitle}</title>}
-        {description != null && (
+        {isHomePage && (
+          // Let Google figure out a good description for each page.
           <meta name="description" key="description" content={description} />
         )}
         <link rel="canonical" href={canonicalUrl} />

diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
@@ -48,6 +48,7 @@ title: React ミーティング
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## Chile {/*chile*/}

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
@@ -10,6 +10,7 @@ React は、ユーザインターフェース（UI）を表示するための Ja
 
 <YouWillLearn isChapter={true}>
 
+<<<<<<< HEAD
 * [初めてのコンポーネントの書き方](/learn/your-first-component)
 * [コンポーネントファイルを複数に分ける理由とその方法](/learn/importing-and-exporting-components)
 * [JSX を使って JavaScript にマークアップを追加する方法](/learn/writing-markup-with-jsx)
@@ -18,6 +19,17 @@ React は、ユーザインターフェース（UI）を表示するための Ja
 * [コンポーネントを条件付きでレンダーする方法](/learn/conditional-rendering)
 * [複数のコンポーネントを同時にレンダーする方法](/learn/rendering-lists)
 * [コンポーネントを純粋に保つことで混乱を避ける方法](/learn/keeping-components-pure)
+=======
+* [How to write your first React component](/learn/your-first-component)
+* [When and how to create multi-component files](/learn/importing-and-exporting-components)
+* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
+* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
+* [How to configure components with props](/learn/passing-props-to-a-component)
+* [How to conditionally render components](/learn/conditional-rendering)
+* [How to render multiple components at a time](/learn/rendering-lists)
+* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
+>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
 
 </YouWillLearn>
 
@@ -523,7 +535,42 @@ export default function TeaSet() {
 
 </LearnMore>
 
+<<<<<<< HEAD
 ## 次のステップ {/*whats-next*/}
+=======
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+React uses trees to model the relationships between components and modules. 
+
+A React render tree is a representation of the parent and child relationship between components. 
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+
+An example React render tree.
+
+</Diagram>
+
+Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+
+Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+
+An example module dependency tree.
+
+</Diagram>
+
+A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+
+</LearnMore>
+
+
+## What's next? {/*whats-next*/}
+>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
 
 [初めてのコンポーネント](/learn/your-first-component)に進んで、この章をページごとに読み進めましょう！
 

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
@@ -10,6 +10,7 @@ state は複数のコンポーネント間で独立しています。React は U
 
 <YouWillLearn>
 
+<<<<<<< HEAD
 * React にはコンポーネント構造がどのように「見える」のか
 * React が state の保持とリセットを行うタイミング
 * React にコンポーネントの state のリセットを強制する方法
@@ -36,7 +37,19 @@ React はコンポーネントから UI ツリーを作成し、React DOM はそ
 ## state はツリー内の位置に結びついている {/*state-is-tied-to-a-position-in-the-tree*/}
 
 コンポーネントに state を与えると、その state はそのコンポーネントの内部で「生存」しているように思えるかもしれません。しかし、実際には state は React の中に保持されています。React は、「UI ツリー内でそのコンポーネントがどの位置にあるか」に基づいて、保持している各 state を正しいコンポーネントに関連付けます。
+=======
+* When React chooses to preserve or reset the state
+* How to force React to reset component's state
+* How keys and types affect whether the state is preserved
 
+</YouWillLearn>
+
+## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+
+React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
+
+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.
 
 以下のコードには `<Counter />` JSX タグは 1 つしかありませんが、それが 2 つの異なる位置にレンダーされています。
 
@@ -190,7 +203,11 @@ state の更新
 </DiagramGroup>
 
 
+<<<<<<< HEAD
 React は、同じコンポーネントを同じ位置でレンダーしている限り、その state を保持し続けます。これを確認するため、両方のカウンタを増加させてから、"Render the second counter" のチェックボックスのチェックを外して 2 つ目のコンポーネントを削除し、再びチェックを入れて元に戻してみてください。
+=======
+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:
+>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
 
 <Sandpack>
 

diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
@@ -84,7 +84,7 @@ function submitForm(answer) {
   // Pretend it's hitting the network.
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      if (answer.toLowerCase() == 'istanbul') {
+      if (answer.toLowerCase() === 'istanbul') {
         resolve();
       } else {
         reject(new Error('Good guess but a wrong answer. Try again!'));
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
		NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'