diff --git a/.claude/settings.json b/.claude/settings.json
index 4648ad90df..1114031837 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 0000000000..42aba08afb
--- /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}
+
+
+
+
+
);
@@ -102,7 +102,7 @@ export default function Gallery() {
export default function Profile() {
return (
);
@@ -134,7 +134,7 @@ export default function TodoList() {
// This doesn't quite work!
@@ -163,7 +163,7 @@ export default function TodoList() {
<>
@@ -210,7 +210,7 @@ export default function TodoList() {
);
@@ -83,7 +83,7 @@ export default function App() {
function Profile() {
return (
);
@@ -121,7 +121,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
引入过程中,你可能会遇到一些文件并未添加 `.js` 文件后缀,如下所示:
-```js
+```js
import Gallery from './Gallery';
```
@@ -201,7 +201,7 @@ export default function App() {
export function Profile() {
return (
);
@@ -289,7 +289,7 @@ export default function App() {
export function Profile() {
return (
);
@@ -357,7 +357,7 @@ export default function Gallery() {
export function Profile() {
return (
);
@@ -407,7 +407,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 428179aae6..63b2d6bfa3 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -149,7 +149,7 @@ return (
```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 cb59caa8b2..edd0afcf7e 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -31,7 +31,7 @@ export default function Avatar() {
return (
);
@@ -44,7 +44,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 变量** :
@@ -52,7 +56,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)}
/>
);
@@ -109,7 +109,7 @@ export default function Gallery() {
function Image() {
return (
);
@@ -130,8 +130,13 @@ img { margin: 0 10px 10px 0; }
+<<<<<<< HEAD
* **在初次渲染中,** React 将会为`