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} + +npm install -D @rolldown/plugin-babel + + +```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()] + }), + ], +}); +``` + + +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({ ], }); ``` + -Alternatively, if you prefer a separate Babel plugin for Vite: - - -npm install -D vite-plugin-babel - +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'], }), ], }); 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');