diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index f4498ab77a..3d422b594e 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*/} -如果你使用 Vite,可以将插件添加到 vite-plugin-react 中: +如果你使用 Vite v6.0.0 或者更高版本,那么可以从 `@vitejs/plugin-react` 中导出并配置 `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()] + }), + ], +}); +``` + + +从 `@vitejs/plugin-react@6.0.0` 开始,内联的 Babel 选项已经被移除。如果你使用的是更低版本,可以通过下面的方式进行配置: + +```js // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; @@ -81,26 +104,21 @@ export default defineConfig({ ], }); ``` + -或者,如果你更倾向于为 Vite 使用一个独立的 Babel 插件: - - -npm install -D vite-plugin-babel - +或者, 你也可以通过 `@rolldown/plugin-babel` 直接使用 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 415e56d031..0e6539e434 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');