From 5b76b839c0324a43771776d229a72a644ffefd00 Mon Sep 17 00:00:00 2001
From: Hana <andywangsy@gmail.com>
Date: Fri, 26 Apr 2024 11:34:40 +0800
Subject: [PATCH] chore: update react doc

---
 website/docs/en/guide/tech/react.mdx | 72 ++++++++++++----------------
 website/docs/zh/guide/tech/react.mdx | 72 ++++++++++++----------------
 2 files changed, 61 insertions(+), 83 deletions(-)

diff --git a/website/docs/en/guide/tech/react.mdx b/website/docs/en/guide/tech/react.mdx
index 3b02732d83d1..dd0d13cc51a4 100644
--- a/website/docs/en/guide/tech/react.mdx
+++ b/website/docs/en/guide/tech/react.mdx
@@ -10,62 +10,52 @@ Rspack provides two solutions to support React:
 - **Use Rsbuild**: Rsbuild provides out-of-the-box support for React, allowing you to quickly create a React project. See ["Rsbuild - React"](https://rsbuild.dev/guide/framework/react) for details.
 - **Manual configuration**: You can refer to the current document to manually add configurations for React.
 
-## Configure JSX
+## Configure JSX/TSX
 
-Rspack has built-in support for JSX, which allows you to use JSX syntax directly in .jsx and .tsx files in your project. If you need to use JSX in .js or .ts files, you will need to configure it as follows:
+Rspack leverages SWC transformer for JSX/TSX.
+
+Add `builtin:swc-loader` loader to support `jsx` and `tsx`:
 
 ```js title=rspack.config.js
 module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
-        type: 'jsx',
+        test: /\.jsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
       },
       {
-        test: /\.ts$/,
-        type: 'tsx',
+        test: /\.tsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
       },
     ],
   },
 };
 ```
 
-## Emotion
-
-Rspack has built-in support for emotion, which allows you to use emotion syntax directly in .jsx and .tsx files in your project. You can use emotion functionality through the following configuration:
-
-```js title=rspack.config.js
-module.exports = {
-  builtins: {
-    emotion: true,
-    react: {
-      importSource: '@emotion/react',
-    },
-  },
-};
-```
-
-```js title=src/index.tsx
-import { css } from '@emotion/react';
-
-export function Button({ children }) {
-  return (
-    <button
-      css={css`
-        background: hotpink;
-        &:hover {
-          background: purple;
-        }
-      `}
-    >
-      {children}
-    </button>
-  );
-}
-```
-
-Other CSS-in-JS solutions can be used by configuring the babel-loader.
+Refer to [Builtin swc-loader](guide/features/builtin-swc-loader) for detailed configurations.
 
 ## Fast Refresh
 
diff --git a/website/docs/zh/guide/tech/react.mdx b/website/docs/zh/guide/tech/react.mdx
index 76c77afdc431..edcbbfe1410c 100644
--- a/website/docs/zh/guide/tech/react.mdx
+++ b/website/docs/zh/guide/tech/react.mdx
@@ -10,64 +10,52 @@ Rspack 提供两种方案来支持 React：
 - **使用 Rsbuild**：Rsbuild 提供对 React 开箱即用的支持，能够快速创建一个 React 项目，详见 ["Rsbuild - React"](https://rsbuild.dev/zh/guide/framework/react)。
 - **手动配置**：你可以参考当前文档，手动添加 React 相关的配置。
 
-## JSX
+## 配置 JSX/TSX
 
-Rspack 内置了对 JSX 的支持，你可以直接在项目中的 .jsx 和 .tsx 文件中使用 JSX 语法。
+Rspack 使用 SWC 转译器支持 JSX/TSX。
 
-如果你需要在 .js 或者 .ts 文件中使用 JSX，则需要如下配置：
+添加 `builtin:swc-loader` 以支持 `jsx` 和 `tsx`:
 
 ```js title=rspack.config.js
 module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
-        type: 'jsx',
+        test: /\.jsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
       },
       {
-        test: /\.ts$/,
-        type: 'tsx',
+        test: /\.tsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
       },
     ],
   },
 };
 ```
 
-## emotion
-
-Rspack 内置了对 emotion 的支持，你可以直接在项目中的 .jsx 和 .tsx 文件中使用 emotion 语法。通过如下配置使用 emotion 功能。
-
-```js title=rspack.config.js
-module.exports = {
-  builtins: {
-    emotion: true,
-    react: {
-      importSource: '@emotion/react',
-    },
-  },
-};
-```
-
-```js title=src/index.tsx
-import { css } from '@emotion/react';
-
-export function Button({ children }) {
-  return (
-    <button
-      css={css`
-        background: hotpink;
-        &:hover {
-          background: purple;
-        }
-      `}
-    >
-      {children}
-    </button>
-  );
-}
-```
-
-其他的 CSS-in-JS 方案，则可以通过配置 babel-loader 进行使用。
+关于配置项的更多信息请参考 [内置 swc-loader](guide/features/builtin-swc-loader)。
 
 ## Fast Refresh