diff --git a/package.json b/package.json index e48f4cac5..df36e800b 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", - "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", "next": "15.1.0", diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 7838be1e3..e169fc397 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -685,7 +685,11 @@ ul, li { margin: 0; padding: 0; } ``` +<<<<<<< HEAD タスクのリストを必要とするコンポーネントは、代わりに `TaskContext` から読み込むことができます。 +======= +Instead, any component that needs the task list can read it from the `TasksContext`: +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 ```js {2} export default function TaskList() { diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 5756ee7d9..cdb11b9d5 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -90,7 +90,7 @@ React は `root` に `` を表示し、その内部の DOM の管理を * 同じルートに対して `render` を複数回呼び出すと、React は最新の JSX を反映するために必要なだけの DOM の更新を行います。React は、渡された JSX を以前にレンダーしたツリーと[「マッチング」](/learn/preserving-and-resetting-state)して、DOM のどの部分が再利用でき、どの部分を再作成する必要があるのかを決定します。同じルートに対して複数回 `render` を呼び出すことは、ルートコンポーネントで [`set` 関数](/reference/react/useState#setstate)を呼び出すことに似ており、React は不必要な DOM 更新を回避します。 -* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously. +* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously. ```js const root = createRoot(document.getElementById('root')); diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index f6544e634..a8fb5085d 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -6,7 +6,11 @@ title: forwardRef React 19 では、`forwardRef` は不要となりました。代わりに props として `ref` を渡すようにしてください。 +<<<<<<< HEAD `forwardRef` は将来のリリースでは非推奨化される予定です。詳しくは[こちら](/blog/2024/04/25/react-19#ref-as-a-prop)を参照してください。 +======= +`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md index e30c334e8..f122d04e0 100644 --- a/src/content/reference/rsc/directives.md +++ b/src/content/reference/rsc/directives.md @@ -10,7 +10,11 @@ title: "ディレクティブ" +<<<<<<< HEAD ディレクティブによって、[React Server Components 互換バンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)に指示を与えます。 +======= +Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md index 8a1ca0513..0763b3d59 100644 --- a/src/content/reference/rsc/server-components.md +++ b/src/content/reference/rsc/server-components.md @@ -4,7 +4,11 @@ title: サーバコンポーネント +<<<<<<< HEAD サーバコンポーネントは [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 用の機能です。 +======= +Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 @@ -22,7 +26,11 @@ React Server Components の "server" とはこの別の環境を指していま #### サーバコンポーネントのサポートを追加する方法 {/*how-do-i-build-support-for-server-components*/} +<<<<<<< HEAD React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。 +======= +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。 @@ -45,7 +53,7 @@ function Page({page}) { setContent(data.content); }); }, [page]); - + return
{sanitizeHtml(marked(content))}
; } ``` @@ -69,7 +77,7 @@ import sanitizeHtml from 'sanitize-html'; // Not included in bundle async function Page({page}) { // NOTE: loads *during* render, when the app is built. const content = await file.readFile(`${page}.md`); - + return
{sanitizeHtml(marked(content))}
; } ``` @@ -113,7 +121,7 @@ function Note({id}) { setNote(data.note); }); }, [id]); - + return (
@@ -253,7 +261,7 @@ export default function Expandable({children}) {

this is the second note

-
+ ``` @@ -270,8 +278,8 @@ import db from './database'; async function Page({id}) { // Will suspend the Server Component. const note = await db.notes.get(id); - - // NOTE: not awaited, will start here and await on the client. + + // NOTE: not awaited, will start here and await on the client. const commentsPromise = db.comments.get(note.id); return (
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index 0efe08a0b..974d37d79 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -41,7 +41,11 @@ export default function RichTextEditor({ timestamp, text }) { } ``` +<<<<<<< HEAD `'use client'` でマークされているファイルがサーバコンポーネントからインポートされた場合、[互換性のあるバンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)は当該モジュールのインポートを、サーバで実行されるコードとクライアントで実行されるコードの境界として扱います。 +======= +When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. +>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1 上記では `formatDate` と `Button` は `RichTextEditor` が依存するモジュールですので、これらのモジュール自体に `'use client'` ディレクティブが含まれているかどうかに関わらず、これらもクライアントで評価されます。ある単一のモジュールが、サーバコードからインポートされた場合はサーバで、クライアントコードからインポートされた場合はクライアントで評価される場合があることに注意してください。 diff --git a/yarn.lock b/yarn.lock index a118cbeda..e866a206b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0: es-errors "^1.3.0" is-data-view "^1.0.1" -date-fns@^2.16.1: - version "2.28.0" - resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz" - integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== - debounce@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"