Skip to content

docs(cndocs): sync intro-react and network with upstream#1030

Open
sunnylqm wants to merge 1 commit into
productionfrom
auto-translate-20260601
Open

docs(cndocs): sync intro-react and network with upstream#1030
sunnylqm wants to merge 1 commit into
productionfrom
auto-translate-20260601

Conversation

@sunnylqm
Copy link
Copy Markdown

@sunnylqm sunnylqm commented Jun 1, 2026

翻译同步: intro-react + network

同步的翻译文件

cndocs/intro-react.md (主要重构):

  • 移除 class component 标签页/示例(EN 上游已删除)
  • 移除所有示例中多余的 import React from 'react'
  • 更新 React URL: reactjs.orgreact.dev
  • jsxtsx 代码围栏
  • 添加 JS/TS SnackPlayer 标签页(匹配 EN)
  • 更新 tab groupId/defaultValue 匹配 EN 规范

cndocs/network.md (小修补):

  • 修复 axios URL: mzabriskie/axiosaxios/axios
  • 移除 EN 已删除的 jQuery 警告文本
  • tsxts 代码围栏匹配 EN

website/ → cnwebsite/ 配置同步

本次上游合并仅涉及文档内容更新(docs/website/versioned_docs/),无 package.jsondocusaurus.config.ts 等配置文件变更,无需同步 cnwebsite 配置。

构建验证

yarn --cwd cnwebsite build ✅ 通过(67s)

Summary by CodeRabbit

  • Documentation
    • Updated React and React Native introduction documentation with current learning resources and modern example patterns.
    • Enhanced code examples with JavaScript and TypeScript language tabs throughout tutorials.
    • Refreshed network access documentation with updated code samples and references.

- intro-react.md: major rewrite to match upstream restructuring
  - Remove class component tabs/examples (EN dropped them)
  - Remove redundant `import React from 'react'` from all examples
  - Update React URLs: reactjs.org → react.dev
  - jsx → tsx code fences
  - Add JS/TS SnackPlayer tabs (matching EN)
  - Update tab groupId/defaultValue to match EN conventions
- network.md: minor sync
  - Fix axios URL: mzabriskie/axios → axios/axios
  - Remove extra jQuery warning text (EN removed it)
  - tsx → ts code fences to match EN
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 1, 2026

Review Change Stack

📝 Walkthrough

Walkthrough

This PR updates Chinese React Native documentation guides to align with modern React patterns. The React introduction (cndocs/intro-react.md) is substantially refactored to include language-tabbed code examples (JavaScript + TypeScript), updated official React links to react.dev, and revised Cat component walkthroughs throughout Props and State sections. The network documentation (cndocs/network.md) is lightly updated to standardize code block markers to TypeScript and adjust third-party library references.

Changes

Documentation Refresh: React Introduction and Networking Guides

Layer / File(s) Summary
React intro link and Cat component foundation
cndocs/intro-react.md
React official documentation link updated to https://react.dev/, and the initial Cat component example walkthrough is rewritten to match modern learning flow.
JSX expressions with language tabs
cndocs/intro-react.md
Introduces curly-brace JSX expression examples with paired JavaScript and TypeScript tabs, including typed function parameters in the TS variant.
Custom components and composition
cndocs/intro-react.md
Custom component imports simplified to use direct named imports from react-native (Text, TextInput, View). TextInput styling updated with borderWidth, and Cafe/Cat composition example refactored.
Props section with JavaScript and TypeScript tabs
cndocs/intro-react.md
Props concept introduced with dual-tab examples: JavaScript version shows component composition with props, and TypeScript tab adds CatProps type and typed prop usage patterns.
State management and interactions with tabs
cndocs/intro-react.md
State section reworked with language-tabbed useState implementations (JavaScript and TypeScript), updated button title variants, code block transitions, and added JSX Fragments (<>...</>) explanation for component rendering.
Network documentation code block standardization
cndocs/network.md
Code block language markers standardized to ts across Fetch requests, Promise chains, async/await patterns, and WebSocket examples. Axios link reference updated and jQuery inapplicability note removed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Poem

🐰 A fluffy hop through docs so neat,
With tabs and types now JavaScript meets!
TypeScript types in every snack,
React.dev links never look back,
From fetch to state, the network's complete! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: synchronizing Chinese documentation with upstream English sources across two files (intro-react.md and network.md).
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch auto-translate-20260601

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@cndocs/intro-react.md`:
- Line 164: 文档中标题从 "##" 直接跳到 "#### 对开发者的提示" 导致层级跳跃(MD001),请将该行标题标记改为三级标题 "###
对开发者的提示"(替换现有的 "#### 对开发者的提示"),以修复标题层级一致性问题并通过 linter 校验。
- Line 315: 在包含文本 "按惯例来说,props 用来配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。"
的句子中,将片语 "按惯例来说" 替换为更流畅的表述,例如 "按惯例,props 用于..." 或 "按惯例,对于……来说,props
用于...",以改写为类似 "按惯例,props 用于配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。"
以提升可读性并保持原意。
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8f4d05aa-2c20-4a11-bcc9-f29849a7bf57

📥 Commits

Reviewing files that changed from the base of the PR and between d2d23a0 and ea63d8a.

📒 Files selected for processing (2)
  • cndocs/intro-react.md
  • cndocs/network.md

Comment thread cndocs/intro-react.md
export default Cat;
```

#### 对开发者的提示
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

修复标题层级跳跃(Line 164)

当前从 ## 直接跳到 ####,会触发 MD001。建议将该标题改为 ### 对开发者的提示

🧰 Tools
🪛 markdownlint-cli2 (0.22.1)

[warning] 164-164: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4

(MD001, heading-increment)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@cndocs/intro-react.md` at line 164, 文档中标题从 "##" 直接跳到 "#### 对开发者的提示"
导致层级跳跃(MD001),请将该行标题标记改为三级标题 "### 对开发者的提示"(替换现有的 "#### 对开发者的提示"),以修复标题层级一致性问题并通过
linter 校验。

Comment thread cndocs/intro-react.md

> 按惯例来说,props 用来配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。下面示例的情景发生在一个猫咪咖啡馆中,两只猫咪正嗷嗷待哺。它们的饥饿程度会随着时间变化(相对地,它们的名字就不会变化),因此会记录在状态中。示例中还有一个喂食按钮,一键干饭,扫除饥饿状态!
:::info
按惯例来说,props 用来配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

优化语句搭配以提升可读性(Line 315)

“按惯例来说”建议改为“按惯例,对于……来说”或直接“按惯例,props 用于……”。

🧰 Tools
🪛 LanguageTool

[uncategorized] ~315-~315: 固定搭配: “来说” 应与 “对” 或 “对于” 搭配使用:对于...来说。
Context: ...随时间或者用户交互而变化的数据。状态使组件拥有了记忆! :::info 按惯例来说,props 用来配置组件的第一次渲染(初始状态)。state 则用来记录组件中...

(wb2)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@cndocs/intro-react.md` at line 315, 在包含文本 "按惯例来说,props
用来配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。" 的句子中,将片语 "按惯例来说" 替换为更流畅的表述,例如
"按惯例,props 用于..." 或 "按惯例,对于……来说,props 用于...",以改写为类似 "按惯例,props
用于配置组件的第一次渲染(初始状态)。state 则用来记录组件中任意可能随时间变化的数据。" 以提升可读性并保持原意。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant