diff --git a/package.json b/package.json index 7136c75e1..593a7cea7 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "textlint-staged": "cd textlint && yarn --frozen-lockfile && yarn textlint-staged --" }, "dependencies": { - "@codesandbox/sandpack-react": "2.6.0", + "@codesandbox/sandpack-react": "2.13.1", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index d47fd903c..a47fa6860 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) { autorun, initMode: 'user-visible', initModeObserverOptions: {rootMargin: '1400px 0px'}, - bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev', + bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev', logLevel: SandpackLogLevel.None, }}> diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 9fa275b47..2566af0ca 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -70,6 +70,22 @@ July 17-19, 2024. In-person in Portland, OR, USA [Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf) +### The Geek Conf 2024 {/*the-geek-conf-2024*/} +July 25, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf) + +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + + ### React India 2024 {/*react-india-2024*/} October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day diff --git a/src/content/community/team.md b/src/content/community/team.md index fac0b5ff3..35a241b90 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -22,8 +22,13 @@ React コアチームのメンバーは、コアコンポーネントの API、R Andrey はデザイナとしてキャリアをスタートした後、徐々にウェブ開発へと移行しました。Meta の React Data チームに参加した後は、Relay にインクリメンタル JavaScript コンパイラを追加する作業に取り組み、のちにそのコンパイラを Relay から削除する作業に取り組みました。仕事以外の時間では音楽を演奏したり、さまざまなスポーツをしたりしています。 +<<<<<<< HEAD Dan は Microsoft PowerPoint の中に偶然 Visual Basic を発見したことからプログラミングを始めました。[Sebastian](#sebastian-markbåge) のツイートを長文のブログ投稿に翻訳することが真の使命であると感じています。Fortnite では、ゲームが終わるまで茂みの中に隠れて勝利することがあります。 +======= + + Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. +>>>>>>> 081d1008dd1eebffb9550a3ff623860a7d977acf diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index 2138efdd2..048e05766 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -554,9 +554,13 @@ button { margin-top: 10px; } +<<<<<<< HEAD （または、選択されたインデックスを state に保持することもできます。） 以前は state がこのように重複していました。 +======= +The state used to be duplicated like this: +>>>>>>> 081d1008dd1eebffb9550a3ff623860a7d977acf * `items = [{ id: 0, title: 'pretzels'}, ...]` * `selectedItem = {id: 0, title: 'pretzels'}` diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 467514490..172c6327e 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -182,36 +182,16 @@ import {useFormStatus} from 'react-dom'; export default function UsernameForm() { const {pending, data} = useFormStatus(); - const [showSubmitted, setShowSubmitted] = useState(false); - const submittedUsername = useRef(null); - const timeoutId = useRef(null); - - useMemo(() => { - if (pending) { - submittedUsername.current = data?.get('username'); - if (timeoutId.current != null) { - clearTimeout(timeoutId.current); - } - - timeoutId.current = setTimeout(() => { - timeoutId.current = null; - setShowSubmitted(false); - }, 2000); - setShowSubmitted(true); - } - }, [pending, data]); - return ( - <> -
- +
+

Request a Username:

+ - {showSubmitted ? ( -

Submitted request for username: {submittedUsername.current}

- ) : null} - +
+

{data ? `Requesting ${data?.get("username")}...`: ''}

+
); } ``` @@ -219,10 +199,15 @@ export default function UsernameForm() { ```js src/App.js import UsernameForm from './UsernameForm'; import { submitForm } from "./actions.js"; +import {useRef} from 'react'; export default function App() { + const ref = useRef(null); return ( -
+ { + await submitForm(formData); + ref.current.reset(); + }}> ); @@ -231,8 +216,22 @@ export default function App() { ```js src/actions.js hidden export async function submitForm(query) { - await new Promise((res) => setTimeout(res, 1000)); + await new Promise((res) => setTimeout(res, 2000)); +} +``` + +```css +p { + height: 14px; + padding: 0; + margin: 2px 0 0 0 ; + font-size: 14px +} + +button { + margin-left: 2px; } + ``` ```json package.json hidden diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index bfa668cbf..9eaf80274 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -13,7 +13,7 @@ title: renderToNodeStream `renderToNodeStream` は、React のツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)にレンダーします。 ```js -const stream = renderToNodeStream(reactNode) +const stream = renderToNodeStream(reactNode, options?) ``` @@ -24,7 +24,7 @@ const stream = renderToNodeStream(reactNode) ## リファレンス {/*reference*/} -### `renderToNodeStream(reactNode)` {/*rendertonodestream*/} +### `renderToNodeStream(reactNode, options?)` {/*rendertonodestream*/} サーバ上において、`renderToNodeStream` を呼び出して、レスポンスにパイプすることができる [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index 46b1464c0..8350e8b5d 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -7,7 +7,7 @@ title: renderToStaticMarkup `renderToStaticMarkup` は、非インタラクティブな React ツリーを HTML 文字列にレンダーします。 ```js -const html = renderToStaticMarkup(reactNode) +const html = renderToStaticMarkup(reactNode, options?) ``` @@ -18,7 +18,7 @@ const html = renderToStaticMarkup(reactNode) ## リファレンス {/*reference*/} -### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/} +### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/} サーバ上において、`renderToStaticMarkup` を呼び出してアプリを HTML にレンダーします。 diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index e60f73a3f..3cb1eb3c9 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -7,7 +7,7 @@ title: renderToStaticNodeStream `renderToStaticNodeStream` は、非インタラクティブな React ツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams) にレンダーします。 ```js -const stream = renderToStaticNodeStream(reactNode) +const stream = renderToStaticNodeStream(reactNode, options?) ``` @@ -18,7 +18,7 @@ const stream = renderToStaticNodeStream(reactNode) ## リファレンス {/*reference*/} -### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/} +### `renderToStaticNodeStream(reactNode, options?)` {/*rendertostaticnodestream*/} サーバ上において、`renderToStaticNodeStream` を呼び出して [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 7288b46c9..c0522f481 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -13,7 +13,7 @@ title: renderToString `renderToString` は React ツリーを HTML 文字列にレンダーします。 ```js -const html = renderToString(reactNode) +const html = renderToString(reactNode, options?) ``` @@ -24,7 +24,7 @@ const html = renderToString(reactNode) ## リファレンス {/*reference*/} -### `renderToString(reactNode)` {/*rendertostring*/} +### `renderToString(reactNode, options?)` {/*rendertostring*/} サーバ上において、`renderToString` を呼び出してあなたのアプリを HTML にレンダーします。 diff --git a/yarn.lock b/yarn.lock index f7d63ee56..8b4000ce1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -611,29 +611,29 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" -"@codesandbox/nodebox@0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc" - integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ== +"@codesandbox/nodebox@0.1.8": + version "0.1.8" + resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d" + integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg== dependencies: - outvariant "^1.3.0" + outvariant "^1.4.0" strict-event-emitter "^0.4.3" -"@codesandbox/sandpack-client@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193" - integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw== +"@codesandbox/sandpack-client@^2.13.0": + version "2.13.0" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27" + integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g== dependencies: - "@codesandbox/nodebox" "0.1.4" + "@codesandbox/nodebox" "0.1.8" buffer "^6.0.3" dequal "^2.0.2" - outvariant "1.3.0" + outvariant "1.4.0" static-browser-server "1.0.3" -"@codesandbox/sandpack-react@2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2" - integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ== +"@codesandbox/sandpack-react@2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09" + integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw== dependencies: "@codemirror/autocomplete" "^6.4.0" "@codemirror/commands" "^6.1.3" @@ -643,13 +643,12 @@ "@codemirror/language" "^6.3.2" "@codemirror/state" "^6.2.0" "@codemirror/view" "^6.7.1" - "@codesandbox/sandpack-client" "^2.6.0" + "@codesandbox/sandpack-client" "^2.13.0" "@lezer/highlight" "^1.1.3" "@react-hook/intersection-observer" "^3.1.1" "@stitches/core" "^1.2.6" anser "^2.1.1" clean-set "^1.1.2" - codesandbox-import-util-types "^2.2.3" dequal "^2.0.2" escape-carriage "^1.3.1" lz-string "^1.4.4" @@ -1769,11 +1768,6 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== -codesandbox-import-util-types@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54" - integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ== - collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -4635,16 +4629,16 @@ os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -outvariant@1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9" - integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ== - -outvariant@^1.3.0: +outvariant@1.4.0, outvariant@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e" integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw== +outvariant@^1.4.0: + version "1.4.2" + resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066" + integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ== + p-limit@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"