diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 8be8cbac4..560dde0f2 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -10,7 +10,6 @@ React は、ユーザインターフェース(UI)を表示するための Ja -<<<<<<< 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 @@ -535,9 +524,6 @@ export default function TeaSet() { -<<<<<<< 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 -## 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 index 30baa8d95..1cd8bfc39 100644 --- 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 -<<<<<<< HEAD -* React にはコンポーネント構造がどのように「見える」のか * React が state の保持とリセットを行うタイミング * React にコンポーネントの state のリセットを強制する方法 * key とタイプが state の保持にどのように影響するか -## 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 ツリーをモバイルプラットフォーム固有の要素に変換します。) - - - - - -React はコンポーネントから UI ツリーを作成し、React DOM はそれを 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 - - - -## 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 を正しいコンポーネントに関連付けます。 以下のコードには `` JSX タグは 1 つしかありませんが、それが 2 つの異なる位置にレンダーされています。 diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 3b53a70b1..b184da4df 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -252,11 +252,7 @@ function Page({id}) { `Page` のレンダー時にコンポーネントは `getUser` を呼び出していますが、返されたデータを使用していないことに着目してください。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行ったり子をレンダーしたりしている間に実行される、非同期のデータベースクエリを開始します。 -<<<<<<< HEAD `Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでに完了しユーザデータをキャッシュしている場合、`Profile` が このデータを要求して待機する時点では、新たなリモートプロシージャ呼び出しを必要とせずにキャッシュから単に読み取ることができます。もし最初のデータリクエストがまだ完了していない場合でも、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 -======= -When rendering `Profile`, we call `getUser` again. If the initial `getUser` call has already returned and cached the user data, when `Profile` asks and waits for this data, it can simply read from the cache without requiring another remote procedure call. If the initial data request hasn't been completed, preloading data in this pattern reduces delay in data-fetching. ->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 6c362ccc1..09cb93b63 100644 --- 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": [ {