@astrojs/反应 @ @ @ info

这个 Astro 集成系统 允许服务器侧渲染和客户端水合 反应 组件.

文档

读取 @astrojs/react 文档

React 编译器

安装可选 Oxc 编译器 :

pnpm add -D oxc-transform-react

启用于 astro.config.mjs数字 :

import react from '@astrojs/react';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react({ compiler: true })],
});

编译器会自动记忆客户端组件和钩子. 它不编译服务器渲染 。 目标默认为您安装的 React 主版本 。 对于反应 17 或 18, 也安装 react-compiler-runtime 作为运行时间依赖.

传递一个选项对象, 例如 compiler: { compilationMode: 'annotation' },用于配置 Oxc 的 React 编译器。 整合 include 财务报告和审定财务报表 exclude 过滤器适用;不包含依赖性和Astro文件. 汇编默认被禁用 .

移动自定义 Babel 转换

整合用途 @vitejs/plugin-react v6和Oxc为JSX和快刷新. 这个 babel 在这个主要版本中取消了整合选项.

如果您使用自定义 Babel 转换, 请安装 @rolldown/plugin-babel 财务报告和审定财务报表 @babel/core,保留您现有的 Babel 插件和预设 :

pnpm add -D @rolldown/plugin-babel @babel/core

移动您的 Babel 插件和预设 react({ babel: ... }) 改为 babel() 内 vite.plugins例如,使用 babel-plugin-styled-components 从:

import react from '@astrojs/react';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react({ babel: { plugins: ['babel-plugin-styled-components'] } })],
});

改为:

import react from '@astrojs/react';
import babel from '@rolldown/plugin-babel';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react()],
  vite: {
    plugins: [
      babel({
        plugins: ['babel-plugin-styled-components'],
      }),
    ],
  },
});

这也与 react({ compiler: true }). Babel在Oxc转换TypeScript和JSX之前运行. Babel 插件可以自动解析 .jsx, (中文(简体) ), .ts,以及 .tsx 文档。 没有装入 babel.config.js 或者说 .babelrc 文件; 将选项直接传给 babel()旧的 babel 不支持召回;使用插件的 overrides 和预设的钩子 用于有条件的转换.

不启用 babel-plugin-react-compiler 在与Oxc编译器相同的组件上.

支助

• 帮帮忙 Astro Discord (Astro Discord) 时尚主题 :。在我们 #support 论坛,或者参观我们的 #dev 频道讨论当前发展及更多!

• 检查我们 Astro 集成文档 更多关于融合.

• 提交错误报告和特性请求为 GitHub 问题。 。 。 .

捐款

这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关! 这些链接会帮助您启动 :

• 贡献者手册
• 行为守则
• 社区指南

许可证

麻省理工学院

版权(c)2023年至今 天体