diff --git a/.claude/settings.json b/.claude/settings.json
index 4648ad90d..111403183 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -16,6 +16,7 @@
"Skill(docs-voice)",
"Skill(docs-components)",
"Skill(docs-sandpack)",
+ "Skill(docs-rsc-sandpack)",
"Skill(docs-writer-learn)",
"Skill(docs-writer-reference)",
"Bash(yarn lint:*)",
diff --git a/.claude/skills/docs-rsc-sandpack/SKILL.md b/.claude/skills/docs-rsc-sandpack/SKILL.md
new file mode 100644
index 000000000..42aba08af
--- /dev/null
+++ b/.claude/skills/docs-rsc-sandpack/SKILL.md
@@ -0,0 +1,277 @@
+---
+name: docs-rsc-sandpack
+description: Use when adding interactive RSC (React Server Components) code examples to React docs using Hello from a Server Component!
;
+}
+` ` `
+
+Server-rendered heading
+
Likes: {count}
+
+
+
+
+
);
@@ -98,7 +98,7 @@ export default function Gallery() {
export default function Profile() {
return (
);
@@ -131,7 +131,7 @@ export default function TodoList() {
// This doesn't quite work!
@@ -160,7 +160,7 @@ export default function TodoList() {
<>
@@ -207,7 +207,7 @@ export default function TodoList() {
);
@@ -80,7 +80,7 @@ export default function App() {
function Profile() {
return (
);
@@ -118,7 +118,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
`.js` というファイル拡張子が省略された、以下のようなファイルを見ることがあるかもしれません。
-```js
+```js
import Gallery from './Gallery';
```
@@ -198,7 +198,7 @@ export default function App() {
export function Profile() {
return (
);
@@ -286,7 +286,7 @@ export default function App() {
export function Profile() {
return (
);
@@ -354,7 +354,7 @@ export default function Gallery() {
export function Profile() {
return (
);
@@ -404,7 +404,7 @@ export default function Gallery() {
export default function Profile() {
return (
);
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index 6c3cb76f7..b9c027637 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -143,7 +143,7 @@ JSX の波括弧の中にもっと複雑な式を入れることもできます
```js
const user = {
name: 'Hedy Lamarr',
- imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
+ imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg',
imageSize: 90,
};
diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md
index 3c24339ef..0e1610ba9 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -28,7 +28,7 @@ export default function Avatar() {
return (
);
@@ -41,7 +41,7 @@ export default function Avatar() {
-この例では `"https://i.imgur.com/7vQD0fPs.jpg"` と `"Gregorio Y. Zara"` が文字列として渡されています。
+この例では `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` と `"Gregorio Y. Zara"` が文字列として渡されています。
では `src` や `alt` のテキストを動的に指定したい場合はどうすればいいのでしょう? **`"` と `"` を `{` と `}` に置き換えることで、JavaScript の値を使う**ことができるのです。
@@ -49,7 +49,7 @@ export default function Avatar() {
```js
export default function Avatar() {
- const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
+ const avatar = 'https://react.dev/images/docs/scientists/7vQD0fPs.jpg';
const description = 'Gregorio Y. Zara';
return (
Photo
e.stopPropagation()}
/>
setIsActive(true)}
/>
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 7f493a746..b7fbd813d 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -34,7 +34,7 @@ const ref = useRef(0);
`useRef` は以下のようなオブジェクトを返します。
```js
-{
+{
current: 0 // The value you passed to useRef
}
```
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 5b99c971e..a240ffe27 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -411,7 +411,7 @@ function Form() {
function handleSubmit() {
setSubmitted(true);
- }
+ }
// ...
}
@@ -429,7 +429,7 @@ function Form() {
// ✅ Good: Event-specific logic is called from event handlers
post('/api/register');
showNotification('Successfully registered!', theme);
- }
+ }
// ...
}
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index ca43b9a62..0482234de 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -54,7 +54,7 @@ root.render(
);
@@ -103,7 +103,7 @@ export default function Gallery() {
function Image() {
return (
);
diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md
index 13b4ee53e..3c94b055f 100644
--- a/src/content/learn/rendering-lists.md
+++ b/src/content/learn/rendering-lists.md
@@ -115,7 +115,7 @@ const people = [{
}, {
id: 3,
name: 'Percy Lavon Julian',
- profession: 'chemist',
+ profession: 'chemist',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
@@ -223,7 +223,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
@@ -232,9 +232,9 @@ export function getImageUrl(person) {
```css
ul { list-style-type: none; padding: 0px 10px; }
-li {
- margin-bottom: 10px;
- display: grid;
+li {
+ margin-bottom: 10px;
+ display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: center;
@@ -353,7 +353,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
@@ -362,9 +362,9 @@ export function getImageUrl(person) {
```css
ul { list-style-type: none; padding: 0px 10px; }
-li {
- margin-bottom: 10px;
- display: grid;
+li {
+ margin-bottom: 10px;
+ display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: center;
@@ -514,7 +514,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
@@ -629,7 +629,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
@@ -743,7 +743,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
@@ -861,7 +861,7 @@ export const people = [{
```js src/utils.js
export function getImageUrl(person) {
return (
- 'https://i.imgur.com/' +
+ 'https://react.dev/images/docs/scientists/' +
person.imageId +
's.jpg'
);
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 5aa9ca7c9..e9a060c4e 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -313,11 +313,11 @@ button { margin-right: 10px; }
`Toolbar` が `onPlayMovie` や `onUploadImage` を*どう扱う*のかを、`App` コンポーネントが知る必要がないことに注意してください。それは `Toolbar` の実装の詳細です。ここでは、`Toolbar` はそれらを `Button` の `onClick` ハンドラとして渡していますが、後でキーボードショートカットでもそれらをトリガするようにすることができます。`onPlayMovie` のようなアプリ固有のインタラクションに基づいて props を名付けることで、後でどのように使用されるかを変更できるという柔軟性が得られます。
-
+
| {food.name} | diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index afd978a77..180cd1d6b 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -40,14 +40,14 @@ export default function Gallery() { Next