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..3d4b39b1e 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,11 @@ export default function Avatar() {
+<<<<<<< HEAD
この例では `"https://i.imgur.com/7vQD0fPs.jpg"` と `"Gregorio Y. Zara"` が文字列として渡されています。
+=======
+Here, `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
では `src` や `alt` のテキストを動的に指定したい場合はどうすればいいのでしょう? **`"` と `"` を `{` と `}` に置き換えることで、JavaScript の値を使う**ことができるのです。
@@ -49,7 +53,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
+<<<<<<< HEAD
ツリーとしては、これは以下のように見えます。
+=======
+Here's how these look as a tree:
+>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
e.stopPropagation()}
/>
setIsActive(true)}
/>
);
@@ -103,7 +103,7 @@ export default function Gallery() {
function Image() {
return (
);
@@ -124,8 +124,13 @@ img { margin: 0 10px 10px 0; }
+<<<<<<< HEAD
* **初回レンダー時には**、React は `