Resolve conflicts

reactjs · Oct 23, 2023 · 1e50dfc · 1e50dfc
1 parent 22f8d0f
commit 1e50dfc
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 57 deletions.
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
@@ -10,7 +10,6 @@ React は、ユーザインターフェース（UI）を表示するための Ja
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [初めてのコンポーネントの書き方](/learn/your-first-component)
 * [コンポーネントファイルを複数に分ける理由とその方法](/learn/importing-and-exporting-components)
 * [JSX を使って JavaScript にマークアップを追加する方法](/learn/writing-markup-with-jsx)
@@ -19,17 +18,7 @@ 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)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
 
 </YouWillLearn>
 
@@ -535,9 +524,6 @@ 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. 
@@ -561,8 +547,7 @@ Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn ho
 </LearnMore>
 
 
-## What's next? {/*whats-next*/}
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+## 次のステップ {/*whats-next*/}
 
 [初めてのコンポーネント](/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,46 +10,17 @@ state は複数のコンポーネント間で独立しています。React は U
 
 <YouWillLearn>
 
-<<<<<<< HEAD
-* React にはコンポーネント構造がどのように「見える」のか
 * React が state の保持とリセットを行うタイミング
 * React にコンポーネントの state のリセットを強制する方法
 * key とタイプが state の保持にどのように影響するか
 
 </YouWillLearn>
 
-## UI ツリー {/*the-ui-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 を正しいコンポーネントに関連付けます。
-=======
-* 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 はあなたの UI のコンポーネント構造を[レンダーツリー](learn/understanding-your-ui-as-a-tree#the-render-tree)としてビルドします。
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
-
-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.
+コンポーネントに state を与えると、その state はそのコンポーネントの内部で「生存」しているように思えるかもしれません。しかし、実際には state は React の中に保持されています。React は、「UI ツリー内でそのコンポーネントがどの位置にあるか」に基づいて、保持している各 state を正しいコンポーネントに関連付けます。
 
 以下のコードには `<Counter />` JSX タグは 1 つしかありませんが、それが 2 つの異なる位置にレンダーされています。
 

diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
@@ -252,11 +252,7 @@ function Page({id}) {
 
 `Page` のレンダー時にコンポーネントは <CodeStep step={1}>`getUser`</CodeStep> を呼び出していますが、返されたデータを使用していないことに着目してください。この早期の <CodeStep step={1}>`getUser`</CodeStep> 呼び出しは、`Page` が他の計算処理を行ったり子をレンダーしたりしている間に実行される、非同期のデータベースクエリを開始します。
 
-<<<<<<< HEAD
 `Profile` をレンダーするとき、再び <CodeStep step={2}>`getUser`</CodeStep> を呼び出します。最初の <CodeStep step={1}>`getUser`</CodeStep> 呼び出しがすでに完了しユーザデータをキャッシュしている場合、`Profile` が <CodeStep step={2}>このデータを要求して待機する時点</CodeStep>では、新たなリモートプロシージャ呼び出しを必要とせずにキャッシュから単に読み取ることができます。もし<CodeStep step={1}>最初のデータリクエスト</CodeStep>がまだ完了していない場合でも、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。
-=======
-When rendering `Profile`, we call <CodeStep step={2}>`getUser`</CodeStep> again. If the initial <CodeStep step={1}>`getUser`</CodeStep> call has already returned and cached the user data, when `Profile` <CodeStep step={2}>asks and waits for this data</CodeStep>, it can simply read from the cache without requiring another remote procedure call. If the <CodeStep step={1}> initial data request</CodeStep> hasn't been completed, preloading data in this pattern reduces delay in data-fetching.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
 
 <DeepDive>
 

diff --git a/src/sidebarReference.json b/src/sidebarReference.json
@@ -162,10 +162,7 @@
       "sectionHeader": "react-dom@18.2.0"
     },
     {
-<<<<<<< HEAD
-      "title": "コンポーネント",
-=======
-      "title": "Hooks",
+      "title": "フック",
       "path": "/reference/react-dom/hooks",
       "routes": [
         {
@@ -176,8 +173,7 @@
       ]
     },
     {
-      "title": "Components",
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+      "title": "コンポーネント",
       "path": "/reference/react-dom/components",
       "routes": [
         {