Skip to content

Commit 931c538

Browse files
authored
docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 47e64bf (#1924)
2 parents af81d5c + f681f79 commit 931c538

2 files changed

Lines changed: 31 additions & 13 deletions

File tree

src/content/learn/react-compiler/installation.md

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,32 @@ module.exports = {
6464

6565
### Vite {/*vite*/}
6666

67-
如果你使用 Vite,可以将插件添加到 vite-plugin-react
67+
如果你使用 Vite v6.0.0 或者更高版本,那么可以从 `@vitejs/plugin-react` 中导出并配置 `reactCompilerPreset`
6868

69-
```js {3,9}
69+
<TerminalBlock>
70+
npm install -D @rolldown/plugin-babel
71+
</TerminalBlock>
72+
73+
```js {3-4,9-11}
74+
// vite.config.js
75+
import { defineConfig } from 'vite';
76+
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
77+
import babel from '@rolldown/plugin-babel';
78+
79+
export default defineConfig({
80+
plugins: [
81+
react(),
82+
babel({
83+
presets: [reactCompilerPreset()]
84+
}),
85+
],
86+
});
87+
```
88+
89+
<Note>
90+
`@vitejs/plugin-react@6.0.0` 开始,内联的 Babel 选项已经被移除。如果你使用的是更低版本,可以通过下面的方式进行配置:
91+
92+
```js
7093
// vite.config.js
7194
import { defineConfig } from 'vite';
7295
import react from '@vitejs/plugin-react';
@@ -81,26 +104,21 @@ export default defineConfig({
81104
],
82105
});
83106
```
107+
</Note>
84108

85-
或者,如果你更倾向于为 Vite 使用一个独立的 Babel 插件:
86-
87-
<TerminalBlock>
88-
npm install -D vite-plugin-babel
89-
</TerminalBlock>
109+
或者, 你也可以通过 `@rolldown/plugin-babel` 直接使用 Babel 插件。
90110

91-
```js {2,11}
111+
```js {3,9}
92112
// vite.config.js
93-
import babel from 'vite-plugin-babel';
94113
import { defineConfig } from 'vite';
95114
import react from '@vitejs/plugin-react';
115+
import babel from '@rolldown/plugin-babel';
96116

97117
export default defineConfig({
98118
plugins: [
99119
react(),
100120
babel({
101-
babelConfig: {
102-
plugins: ['babel-plugin-react-compiler'],
103-
},
121+
plugins: ['babel-plugin-react-compiler'],
104122
}),
105123
],
106124
});

src/content/reference/react/useOptimistic.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function handleClick() {
8383
8484
#### How optimistic state works {/*how-optimistic-state-works*/}
8585
86-
`useOptimistic` lets you show a temporary value while a Action is in progress:
86+
`useOptimistic` lets you show a temporary value while an Action is in progress:
8787
8888
```js
8989
const [value, setValue] = useState('a');

0 commit comments

Comments
 (0)