docs: format rsbuild zh chapter (#2532)

Co-authored-by: Zack Jackson <[email protected]>

Author: 9aoy

apps/website-new/docs/zh/practice/frameworks/react/index.mdx

@@ -5,19 +5,19 @@ title: "Basic CRA with Rsbuild"
 # Basic CRA with Rsbuild
 
 :::tip Demo Reference
-在此处查看示例项目列表: [Rsbuild CRA](https://github.com/module-federation/module-federation-examples/tree/master/cra)
+点击此处查看示例项目: [Rsbuild CRA](https://github.com/module-federation/module-federation-examples/tree/master/cra)
 :::
 
 ## 设置环境
-在开始之前，你需要安装 [Node.js](https://nodejs.org/)，并确保你的 Node.js 版本 >= 16。 **我们建议使用 Node.js 20 的 LTS 版本.**
+在开始之前，你需要安装 [Node.js](https://nodejs.org/)，并确保你的 Node.js 版本 >= 16。 **我们建议使用 Node.js 20 的 LTS 版本。**
 
 你可以使用以下命令检查当前使用的 Node.js 版本：
 
 ```bash
 node -v
 ```
 
-如果你当前环境没有安装Node.js，或者安装的版本太低，可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https: //github.com/Schniz/fnm) 安装所需的版本。
+如果你当前环境没有安装 Node.js，或者安装的版本太低，可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装所需的版本。
 
 以下是如何通过 nvm 安装 Node.js 20 LTS 版本的示例：
 
@@ -35,7 +35,7 @@ nvm use 20
 
 ### 创建 React 项目
 
-你可以使用“create-rsbuild”使用 Rsbuild + React 创建项目。只需执行以下命令：
+你可以使用 `create-rsbuild` 来创建一个 Rsbuild + React 的项目，只需执行以下命令：
 
 import { PackageManagerTabs } from '@theme';
 
@@ -97,9 +97,9 @@ pnpm i
 
 ### 在现有项目中使用 React
 
-要编译React，你需要注册Rsbuild [React Plugin](https://rsbuild.dev/plugins/list/plugin-react)。该插件将自动添加 React 构建所需的配置。
+要编译 React，你需要注册 Rsbuild [React Plugin](https://rsbuild.dev/plugins/list/plugin-react)。该插件将自动添加 React 构建所需的配置。
 
-例如，在`rsbuild.config.ts`中注册：
+例如，在 `rsbuild.config.ts` 中注册：
 
 
 ```ts title="rsbuild.config.ts"
@@ -112,14 +112,14 @@ export default defineConfig({
 ```
 
 :::tip
-对于使用Create React App的项目，可以参考【CRA迁移指南】(https://rsbuild.dev/guide/migration/cra) 。
+对于使用 Create React App 的项目，可以参考 [CRA 迁移指南](https://rsbuild.dev/guide/migration/cra)。
 :::
 
 通过检查 Yarn 提供的安装报告，确保 Webpack 版本 5 或更高版本已安装。
 
-## 步骤2：更新条目文件
+## 步骤 2：更新入口文件
 
-在这两个应用程序中，将“index.js”文件重命名为“bootstrap.js”。此更改允许异步加载“bootstrap.js”，这对于模块联邦在两个应用程序之间正确运行至关重要。
+在这两个应用程序中，将 `index.js` 文件重命名为 `bootstrap.js`。此更改允许异步加载 `bootstrap.js`，这对于模块联邦在两个应用程序之间正确运行至关重要。
 
 ```bash
 mv src/index.tsx src/bootstrap.tsx
@@ -140,23 +140,23 @@ root.render(
 );
 ```
 
-现在，在两个应用程序中创建一个新的“index.tsx”文件，其中包含以下内容以导入“bootstrap.tsx”：
+现在，在两个应用程序中创建一个新的 `index.tsx` 文件，其中包含以下内容以导入 `bootstrap.tsx`：
 
 ```typescript
 import('./bootstrap');
 ```
 
-## 步骤 3：创建并公开
+## 步骤 3：创建并导出
 
-现在，创建一个从“MFE2”公开的组件
+现在，创建一个从 `MFE2` 导出的组件
 
 
 <Steps>
 
 
 ### 3.1 创建按钮组件
 
-在“MFE2”中，在 src 目录中创建一个名为“Button.tsx”的新文件，其中包含以下内容：
+在`MFE2`中，在 src 目录中创建一个名为 `Button.tsx` 的新文件，其中包含以下内容：
 
 ```typescript
 const Button = () => (
@@ -185,9 +185,9 @@ const App = () => {
 
 export default App;
 ```
-## 3.3：在MFE2中配置Rsbuild
+## 3.3：在 MFE2 中配置 Rsbuild
 
-在`MFE2`根目录下创建`rsbuild.config.ts`文件，配置如下：
+在 `MFE2` 根目录下创建 `rsbuild.config.ts` 文件，配置如下：
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
@@ -224,12 +224,12 @@ export default defineConfig({
 </Steps>
 ## 步骤 4：使用远程模块
 
-在“MFE1”中使用“MFE2”公开的模块
+在 `MFE1` 中使用 `MFE2` 公开的模块
 
 <Steps>
 ### 4.1 更新 App.tsx
 
-更新“MFE1”中的“App.tsx”以导入并渲染“MFE2”按钮组件：
+更新 `MFE1` 中的 `App.tsx` 以导入并渲染 `MFE2` 按钮组件：
 
 ```typescript
 import React from 'react';
@@ -249,7 +249,7 @@ export default App;
 
 ### 4.2：在 MFE1 中配置 Rsbuild
 
-在“MFE1”根目录中创建“rsbuild.config.ts”文件，配置如下：
+在 `MFE1` 根目录中创建 `rsbuild.config.ts` 文件，配置如下：
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
@@ -284,6 +284,6 @@ export default defineConfig({
 ```
 </Steps>
 
-此设置会在“MFE1”内启动模块联邦，并且在启动开发服务器后，可以通过“http://localhost:3001”进行访问。
+此设置会在 `MFE1` 内启动模块联邦，并且在启动开发服务器后，可以通过 `http://localhost:3001` 进行访问。
 
-类似地，配置激活“MFE2”的模块联邦，从而在“http://localhost:3002/remoteEntry.js”处公开“Button”组件。随着开发服务器的运行，可以通过“http://localhost:3002”进行访问。
+类似地，配置激活 `MFE2` 的模块联邦，从而可通过 `http://localhost:3002/remoteEntry.js` 加载 `Button` 组件。随着开发服务器的运行，可以通过 `http://localhost:3002` 进行访问。