From c062be0e5f2025d5caa131e0760b444eab0552d1 Mon Sep 17 00:00:00 2001
From: MorikawaSouma <lvzixun810519@gmail.com>
Date: Wed, 18 Mar 2026 18:06:45 +0800
Subject: [PATCH 1/2] fix(docs): Change 'a Action' to 'an Action' in
 useOptimistic.md

This fixes a grammar error where 'a Action' should be 'an Action' since
'Action' starts with a vowel sound.

Related to #6713 - Capitalize React concepts in docs
---
 src/content/reference/react/useOptimistic.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index 702f9936ce9..5944f387828 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -83,7 +83,7 @@ function handleClick() {
 
 #### How optimistic state works {/*how-optimistic-state-works*/}
 
-`useOptimistic` lets you show a temporary value while a Action is in progress:
+`useOptimistic` lets you show a temporary value while an Action is in progress:
 
 ```js
 const [value, setValue] = useState('a');

From d575cca49d5743df1d26cf6d2a9dd8fca904a612 Mon Sep 17 00:00:00 2001
From: MorikawaSouma <lvzixun810519@gmail.com>
Date: Wed, 18 Mar 2026 18:10:35 +0800
Subject: [PATCH 2/2] docs: Update Vite React Compiler setup for
 @vitejs/plugin-react@6.0.0

- Add instructions for using reactCompilerPreset with @rolldown/plugin-babel
- Document that inline babel option was removed in version 6.0.0
- Keep backward compatibility note for older versions
- Remove outdated vite-plugin-babel reference

Fixes #8353
---
 .../learn/react-compiler/installation.md      | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 6cce34c6b6b..0ae0df17eaf 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -64,9 +64,32 @@ module.exports = {
 
 ### Vite {/*vite*/}
 
-If you use Vite, you can add the plugin to vite-plugin-react:
+If you use Vite with version 6.0.0 or later of `@vitejs/plugin-react`, you can use the `reactCompilerPreset`:
 
-```js {3,9}
+<TerminalBlock>
+npm install -D @rolldown/plugin-babel
+</TerminalBlock>
+
+```js {3-4,9-11}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({
+      presets: [reactCompilerPreset()]
+    }),
+  ],
+});
+```
+
+<Note>
+In `@vitejs/plugin-react@6.0.0`, the inline Babel option was removed. If you're using an older version, you can use:
+
+```js
 // vite.config.js
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -81,26 +104,21 @@ export default defineConfig({
   ],
 });
 ```
+</Note>
 
-Alternatively, if you prefer a separate Babel plugin for Vite:
-
-<TerminalBlock>
-npm install -D vite-plugin-babel
-</TerminalBlock>
+Alternatively, you can use the Babel plugin directly with `@rolldown/plugin-babel`:
 
-```js {2,11}
+```js {3,9}
 // vite.config.js
-import babel from 'vite-plugin-babel';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
 
 export default defineConfig({
   plugins: [
     react(),
     babel({
-      babelConfig: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
+      plugins: ['babel-plugin-react-compiler'],
     }),
   ],
 });