Merge pull request #706 from reactjs/sync-a0cacd7d

Sync with react.dev @ a0cacd7

Author: koba04

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

@@ -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*/}

public/images/docs/diagrams/conditional_render_tree.png

@@ -18,6 +18,7 @@ React は、ユーザインターフェース（UI）を表示するための Ja
 * [コンポーネントを条件付きでレンダーする方法](/learn/conditional-rendering)
 * [複数のコンポーネントを同時にレンダーする方法](/learn/rendering-lists)
 * [コンポーネントを純粋に保つことで混乱を避ける方法](/learn/keeping-components-pure)
+* [UI をツリーとして理解することが有用である理由](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -523,6 +524,29 @@ export default function TeaSet() {
 
 </LearnMore>
 
+## UI をツリーとして理解する {/*your-ui-as-a-tree*/}
+
+React はコンポーネント間あるいはモジュール間の関係性をモデル化するために、ツリー構造を使用します。
+
+React レンダーツリーとはコンポーネントの親子関係を表現したものです。
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="5 つのノードからなるツリー。それぞれのノードはコンポーネントを表している。ルートノードはツリーの最上部にあり 'Root Component' と書かれている。そこから 2 本の矢印が下に伸びており 'Component A' および 'Component C' と書かれたノードを指している。それぞれの矢印には 'renders' と書かれている。'Component A' からは 'renders' と書かれた矢印が 'Component B' と書かれたノードに伸びている。'Component C' からは 'renders' と書かれた矢印が 'Component D' と書かれたノードに伸びている。">React のレンダーツリーの例</Diagram>
+
+ツリーの上側、つまりルートに近いコンポーネントはトップレベルコンポーネントです。子を持たないコンポーネントはリーフ（葉）コンポーネントです。このようなコンポーネントの分類は、データの流れやレンダーパフォーマンスを理解する際に有用です。
+
+アプリを理解する上では、JavaScript のモジュール間の関係性をモデルすることも重要です。このようなものをモジュール依存関係ツリーと呼びます。
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="5 つのノードからなるツリー。それぞれのノードは JavaScript のモジュールを表している。最上部のノードは 'RootModule.js' と書かれている。そこから 'ModuleA.js'、'ModuleB.js'、'ModuleC.js' へと 3 本の矢印が伸びている。各矢印には 'imports' と書かれている。'ModuleC.js' からは 'imports' と書かれた矢印が 'ModuleD.js' と書かれたノードに伸びている。">モジュール依存関係ツリーの例</Diagram>
+
+依存関係ツリーは、関連する JavaScript コードをすべてバンドルしてクライアントがダウンロード・レンダーできるようにするために、ビルドツールでよく使用されます。バンドルサイズが大きいと、React アプリのユーザ体験は悪化します。モジュール依存関係ツリーを理解することは、そのような問題をデバッグするのに役立ちます。
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+[**UI をツリーとして理解する**](/learn/understanding-your-ui-as-a-tree)を読んで、レンダーツリーやモジュール依存関係ツリーの作り方、そしてそのような考え方がユーザ体験やパフォーマンスを改善する際にどのように役立つのかについて学びましょう。
+
+</LearnMore>
+
+
 ## 次のステップ {/*whats-next*/}
 
 [初めてのコンポーネント](/learn/your-first-component)に進んで、この章をページごとに読み進めましょう！

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

@@ -10,33 +10,17 @@ state は複数のコンポーネント間で独立しています。React は U
 
 <YouWillLearn>
 
-* React にはコンポーネント構造がどのように「見える」のか
 * React が state の保持とリセットを行うタイミング
 * React にコンポーネントの state のリセットを強制する方法
 * key とタイプが state の保持にどのように影響するか
 
 </YouWillLearn>
 
-## UI ツリー {/*the-ui-tree*/}
+## state はレンダーツリー内の位置に結びついている {/*state-is-tied-to-a-position-in-the-tree*/}
 
-ブラウザは、UI をモデル化するために多くのツリー構造を使用します。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) は HTML 要素を、[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) は CSS を表現します。[アクセシビリティツリー](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)というものもあります！
-
-React もまた、ユーザが作成した UI を管理しモデリングするためにツリー構造を使用します。React は JSX から **UI ツリー**を作成します。次に React DOM が、その UI ツリーに合わせてブラウザの DOM 要素を更新します。（React Native の場合は UI ツリーをモバイルプラットフォーム固有の要素に変換します。）
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="横に並んだ 3 つのセクションで構成された図。最初のセクションには、'コンポーネント A'、'コンポーネント B'、'コンポーネント C' という名前の 3 つの長方形が縦に並んでいる。次のセクションに移る矢印があり、その上には React ロゴが付いた 'React' というラベルがある。中央のセクションには、ルートに 'A'、その子に 'B'、'C' とラベル付けされたコンポーネントツリー。次のセクションへの矢印は 'React DOM' というラベルの上に React ロゴが付いている。最後のセクションではブラウザのフレームの中に 8 個のノードからなるツリーがあり、一部は中央セクションからのものであるためハイライトされている。">
-
-React はコンポーネントから UI ツリーを作成し、React DOM はそれを DOM に変換する
-
-</Diagram>
-
-</DiagramGroup>
-
-## state はツリー内の位置に結びついている {/*state-is-tied-to-a-position-in-the-tree*/}
-
-コンポーネントに state を与えると、その state はそのコンポーネントの内部で「生存」しているように思えるかもしれません。しかし、実際には state は React の中に保持されています。React は、「UI ツリー内でそのコンポーネントがどの位置にあるか」に基づいて、保持している各 state を正しいコンポーネントに関連付けます。
+React はあなたの UI のコンポーネント構造を[レンダーツリー](learn/understanding-your-ui-as-a-tree#the-render-tree)としてビルドします。
 
+コンポーネントに state を与えると、その state はそのコンポーネントの内部で「生存」しているように思えるかもしれません。しかし、実際には state は React の中に保持されています。React は、「レンダーツリー内でそのコンポーネントがどの位置にあるか」に基づいて、保持している各 state を正しいコンポーネントに関連付けます。
 
 以下のコードには `<Counter />` JSX タグは 1 つしかありませんが、それが 2 つの異なる位置にレンダーされています。
 
@@ -190,7 +174,7 @@ state の更新
 </DiagramGroup>
 
 
-React は、同じコンポーネントを同じ位置でレンダーしている限り、その state を保持し続けます。これを確認するため、両方のカウンタを増加させてから、"Render the second counter" のチェックボックスのチェックを外して 2 つ目のコンポーネントを削除し、再びチェックを入れて元に戻してみてください。
+React は、同じコンポーネントをツリー内の同じ位置でレンダーしている限り、その state を保持し続けます。これを確認するため、両方のカウンタを増加させてから、"Render the second counter" のチェックボックスのチェックを外して 2 つ目のコンポーネントを削除し、再びチェックを入れて元に戻してみてください。
 
 <Sandpack>