From 47e64bf7ad81aab8bacfa791a37816ee869135eb Mon Sep 17 00:00:00 2001 From: Muchen Date: Fri, 15 May 2026 04:24:42 +0800 Subject: [PATCH 1/2] docs: Update Vite React Compiler setup for @vitejs/plugin-react@6.0.0 (#8364) * 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 * 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 +++++++++++++------ src/content/reference/react/useOptimistic.md | 2 +- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 6cce34c6b..0ae0df17e 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 3c802cad1..c1ec79787 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 6ec61348646040795fdaa9de14a9bec603260f87 Mon Sep 17 00:00:00 2001 From: Daishi Kato Date: Tue, 26 May 2026 23:15:15 +0900 Subject: [PATCH 2/2] Update conferences list (#8450) --- src/content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 2079cdd65..2e95e24ea 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -25,6 +25,11 @@ September 10-11, 2026. In-person in Zurich, Switzerland [Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/) +### React Conf Japan 2027 {/*react-conf-japan-2027*/} +April 24, 2027. In-person in Tokyo, Japan + +[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp) + ## Past Conferences {/*past-conferences*/} ### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/}