diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 1e086b9b7..fcac37738 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,8 +6,11 @@ on: types: - completed -permissions: {} - +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index c817c6330..cc48166db 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1214,7 +1214,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0..c3224e517 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} + {!isBlogIndex && (
- + logo by @sawaratsuki1004 )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index f9f21c1e0..80ba921df 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,7 +410,11 @@ function MyInput({placeholder, ref}) { +<<<<<<< HEAD クラスに渡された `ref` はコンポーネントインスタンスを参照するため、props としては渡されません。 +======= +`ref`s passed to classes are not passed as props since they reference the component instance. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 88eb8f344..53cbaba1b 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index d8830dd47..b216f530d 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ title: React ミーティング * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 015145f4e..a6bc352f8 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -175,7 +175,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -245,7 +245,7 @@ React では、**副作用は通常、[イベントハンドラ](/learn/respondi ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -307,7 +307,7 @@ body > * { ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -606,14 +606,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -702,14 +702,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -770,7 +770,7 @@ li { ```js src/StoryTray.js active export default function StoryTray({ stories }) { // Copy the array! - let storiesToDisplay = stories.slice(); + const storiesToDisplay = stories.slice(); // Does not affect the original array: storiesToDisplay.push({ @@ -794,14 +794,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 6a1908068..a930602b2 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -836,13 +836,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index a6da2cd6a..37519718a 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -464,7 +464,11 @@ export default function Toggle() { #### デバウンスの修正 {/*fix-debouncing*/} +<<<<<<< HEAD この例では、すべてのボタンクリックハンドラが ["デバウンス (debounce)"](https://redd.one/blog/debounce-vs-throttle) されています。この意味を確認するために、ボタンのうちの 1 つを押してみてください。メッセージが 1 秒後に表示されることに気付くでしょう。メッセージを待っている間にボタンを押すと、タイマがリセットされます。ですので、同じボタンを素早く何度もクリックし続けると、メッセージはクリックを*やめた* 1 秒後まで表示されません。デバウンスにより、ユーザが「操作をやめる」まであるアクションを遅らせることができます。 +======= +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 この例は動作していますが、意図した通りではありません。ボタンが独立していないのです。問題を確認するために、ボタンのうちの 1 つをクリックし、すぐに別のボタンをクリックしてみてください。遅延の後、両方のボタンのメッセージが表示されることを期待するでしょう。しかし、最後のボタンのメッセージだけが表示され、最初のボタンのメッセージは失われてしまいます。 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 a4de5a670..7838be1e3 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -461,11 +461,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -509,8 +509,8 @@ export default function TaskApp() { } return ( - - + +

Day off in Kyoto

- - + + ); } @@ -676,13 +676,13 @@ ul, li { margin: 0; padding: 0; } 現在すでに、タスクのリストやイベントハンドラを props 経由でツリーに渡す必要はなくなっています。 ```js {4-5} - - + +

Day off in Kyoto

- - + + ``` タスクのリストを必要とするコンポーネントは、代わりに `TaskContext` から読み込むことができます。 @@ -730,13 +730,13 @@ export default function TaskApp() { ); return ( - - + +

Day off in Kyoto

- - + + ); } @@ -921,11 +921,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -963,11 +963,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1363,4 +1363,3 @@ ul, li { margin: 0; padding: 0; } - アプリ内で、このようなコンテクストとリデューサのペアを多く作ることができる。 - diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index cd11e9b4b..3a7c369df 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -260,9 +260,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -310,9 +310,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - + - + ) } diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index d75e43660..13af424db 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -240,7 +240,11 @@ export default function ModalContent({ onClose }) { ポータルを使用する際には、アプリを正しくアクセシブルにすることが重要です。例えば、ユーザが自然にポータルの内または外へフォーカスを移動できるよう、キーボードフォーカスを管理する必要があるかもしれません。 +<<<<<<< HEAD モーダルを作成する際には、[WAI-ARIA のモーダル作成実践ガイド](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)に従ってください。コミュニティパッケージを使用する場合は、それがアクセシブルであり、このガイドラインに従っていることを確認してください。 +======= +Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 3d611bdab..348a973f4 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -68,7 +68,11 @@ async function handler(request) { #### 注意点 {/*caveats*/} +<<<<<<< HEAD プリレンダー中に `nonce` オプションは利用できません。nonce はリクエストごとに一意である必要があり、[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) でアプリケーションを保護するために nonce を使用する場合、プリレンダー自体に nonce 値を含めることは不適切かつ危険です。 +======= +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 @@ -231,7 +235,7 @@ async function renderToString() { const {prelude} = await prerender(, { bootstrapScripts: ['/main.js'] }); - + const reader = prelude.getReader(); let content = ''; while (true) { @@ -317,7 +321,13 @@ async function renderToString() { ### アプリ全体がレンダーされるまでストリームが始まらない {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} +<<<<<<< HEAD `prerender` の返り値は解決する前に、全サスペンスバウンダリが解決することも含む、アプリ全体のレンダーの終了を待機します。これは事前静的サイト生成 (SSG) のために設計されているものであり、コンテンツを読み込みながらのストリーミングをサポートしません。 コンテンツを読み込みながらストリームしたい場合は、サーバレンダー API である [renderToReadableStream](/reference/react-dom/server/renderToReadableStream) などを使用してください。 - \ No newline at end of file + +======= +The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. + +To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 8927486f5..0731d9290 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -69,7 +69,11 @@ app.use('/', async (request, response) => { #### 注意点 {/*caveats*/} +<<<<<<< HEAD プリレンダー中に `nonce` オプションは利用できません。nonce はリクエストごとに一意である必要があり、[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) でアプリケーションを保護するために nonce を使用する場合、プリレンダー自体に nonce 値を含めることは不適切かつ危険です。 +======= +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 @@ -95,7 +99,7 @@ app.use('/', async (request, response) => { const { prelude } = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'], }); - + response.setHeader('Content-Type', 'text/plain'); prelude.pipe(response); }); @@ -232,7 +236,7 @@ async function renderToString() { const {prelude} = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'] }); - + return new Promise((resolve, reject) => { let data = ''; prelude.on('data', chunk => { @@ -319,5 +323,9 @@ async function renderToString() { `prerenderToNodeStream` の返り値は解決する前に、全サスペンスバウンダリが解決することも含む、アプリ全体のレンダーの終了を待機します。これは事前静的サイト生成 (SSG) のために設計されているものであり、コンテンツを読み込みながらのストリーミングをサポートしません。 +<<<<<<< HEAD コンテンツを読み込みながらストリームしたい場合は、サーバレンダー API である [renderToReadableStream](/reference/react-dom/server/renderToReadableStream) などを使用してください。 +======= +To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream). +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index f98d5e57a..086146dd2 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1814,9 +1814,9 @@ function Form() { export default function MyApp() { return ( - +
- + ) } ``` @@ -1900,9 +1900,9 @@ function Form() { export default function MyApp() { return ( - + - + ) } ``` diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 43b019ea4..4630cafc0 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -10,12 +10,20 @@ title: "React の組み込み API" --- +<<<<<<< HEAD * [`createContext`](/reference/react/createContext) を利用すると、子コンポーネントに対してコンテクストを定義および提供できます。[`useContext`](/reference/react/useContext) と一緒に使用されます。 * [`forwardRef`](/reference/react/forwardRef) を利用すると、コンポーネントの DOM ノードを ref として親に公開できます。[`useRef`](/reference/react/useRef) と一緒に使用されます。 * [`lazy`](/reference/react/lazy) を利用すると、コンポーネントのコードの読み込みを初回レンダーまで遅延することができます。 * [`memo`](/reference/react/memo) を利用すると、同じ props を持つコンポーネントの再レンダーをスキップできます。[`useMemo`](/reference/react/useMemo) や [`useCallback`](/reference/react/useCallback) と一緒に使用されます。 * [`startTransition`](/reference/react/startTransition) を使うと、state の更新を低緊急度 (non-urgent) としてマークできます。[`useTransition`](/reference/react/useTransition) に似ています。 * [`act`](/reference/react/act) を使うと、テスト環境でレンダーやユーザ操作をラップして、アサーションを行う前に更新が確実に処理されるようにします。 +======= +* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) +* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. +* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) +* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) +* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 1322621a6..ade779e23 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -414,9 +414,9 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - + {renderItem(item)} - + ); })} ``` @@ -472,12 +472,12 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - {renderItem(item)} - + ); })}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 23e42d127..daeb7668c 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,14 +38,22 @@ const ThemeContext = createContext('light'); `createContext` はコンテクストオブジェクトを返します。 +<<<<<<< HEAD **コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントが*どの*コンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで [`SomeContext.Provider`](#provider) を使用してコンテクストの値を指定し、下位のコンポーネントで [`useContext(SomeContext)`](/reference/react/useContext) を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： * `SomeContext.Provider` では、コンポーネントにコンテクストの値を提供できます。 * `SomeContext.Consumer` は、コンテクストの値を読み取るための方法ですが、あまり使用されません。 +======= +**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: + +* `SomeContext` lets you provide the context value to components. +* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` is a legacy way to provide the context value before React 19. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- -### `SomeContext.Provider` {/*provider*/} +### `SomeContext` Provider {/*provider*/} コンポーネントをコンテクストプロバイダでラップすると、内部のコンポーネントに対してこのコンテクストの値を指定できます。 @@ -54,14 +62,26 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` +<<<<<<< HEAD #### props {/*provider-props*/} +======= + + +Starting in React 19, you can render `` as a provider. + +In older versions of React, use ``. + + + +#### Props {/*provider-props*/} +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 * `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で [`useContext(SomeContext)`](/reference/react/useContext) を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 @@ -141,11 +161,11 @@ function App() { // ... return ( - - + + - - + + ); } ``` @@ -187,11 +207,11 @@ import { ThemeContext, AuthContext } from './Contexts.js'; function App() { // ... return ( - - + + - - + + ); } ``` @@ -213,5 +233,9 @@ const ThemeContext = createContext('light'); この値は決して変わりません。React は、対応するプロバイダを上位のコンポーネントで見つけられない場合にのみ、この値をフォールバックとして使用します。 +<<<<<<< HEAD コンテクストを時間の経過とともに変化させるには、[state を追加し、コンポーネントをコンテクストプロバイダでラップ](/reference/react/useContext#updating-data-passed-via-context)します。 +======= +To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context) +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index b3a71c64a..1ba1dd10d 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -27,9 +27,18 @@ title: "レガシー React API" 以下の API は React 19 で削除されました。 +<<<<<<< HEAD * [`createFactory`](https://18.react.dev/reference/react/createFactory): 代わりに JSX を使用してください。 * クラスコンポーネントの [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): 代わりに [`static contextType`](#static-contexttype) を使用してください。 * クラスコンポーネントの [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): 代わりに [`static contextType`](#static-contexttype) を使用してください。 * クラスコンポーネントの [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 代わりに [`Context.Provider`](/reference/react/createContext#provider) を使用してください。 * クラスコンポーネントの [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): 代わりに [TypeScript](https://www.typescriptlang.org/) などの型システムを使用してください。 * クラスコンポーネントの [`this.refs`](https://18.react.dev//reference/react/Component#refs): 代わりに [`createRef`](/reference/react/createRef) を使用してください。 +======= +* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead. +* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead. +* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead. +* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index d9af1812e..0e59e47cf 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - + ); } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index dbe318a77..0e7bb6188 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ function Button() { ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -116,9 +116,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 571cb8b32..f71003e9a 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,13 +38,23 @@ function MyComponent() { #### 返り値 {/*returns*/} +<<<<<<< HEAD `useContext` は、呼び出したコンポーネントに対応するコンテクストの値を返します。値は、ツリー内で `useContext` を呼び出したコンポーネントの上位かつ最も近い `SomeContext.Provider` に渡された `value` として決定されます。そのようなプロバイダが存在しない場合は、返り値はそのコンテクストの [`createContext`](/reference/react/createContext) に渡した `defaultValue` になります。返り値は常にコンテクストの最新の値です。React は、コンテクストに変更があると、それを読み取っているコンポーネントを自動的に再レンダーします。 +======= +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 #### 注意点 {/*caveats*/} +<<<<<<< HEAD * コンポーネントの `useContext()` 呼び出しは、*同じ*コンポーネントから返されるプロバイダの影響を受けません。対応する `` は、`useContext()` を呼び出すコンポーネントの***上*にある**必要があります。 * あるコンテクストのプロバイダが異なる `value` を受け取ると、当該プロバイダより下にありそのコンテクストを使用しているすべての子コンポーネントは、React によって**自動的に再レンダーされます**。前の値と次の値は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) で比較されます。[`memo`](/reference/react/memo) を使って再レンダーをスキップする場合でも、子コンポーネントがコンテクストから新しい値を受け取ることによる再レンダーは妨げられません。 * ビルドシステムが生成する出力の中にモジュールの重複がある場合（シンボリックリンクで起こり得る場合がある）、コンテクストが壊れる可能性があります。コンテクストを介した値の受け渡しが動作するのは、コンテクストを提供するために使用する `SomeContext` と、読み込むために使用する `SomeContext` が、`===` による比較で***厳密*に同じオブジェクト**である場合のみです。 +======= +* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. +* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. +* If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- @@ -70,9 +80,9 @@ function Button() { ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +108,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +193,14 @@ function Button({ children }) { function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +223,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +327,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +421,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +606,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +785,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +988,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +