# JSX/TSX 支持

URL: https://caijiao.org/bun/project/jsx-tsx
Source: docs/bun/project/jsx-tsx.md
Description: 介绍 Bun 对 JSX 和 TSX 语法的原生支持，包括如何无缝运行 React 和 TypeScript 项目，以及 Bun 如何优化 JSX/TSX 编译过程。

[Bun](/bun/) 提供了对 JSX 和 TSX 的原生支持，使得开发者可以轻松使用 React 和 TypeScript 开发前端应用。相比于传统的构建工具，Bun 能够直接运行 JSX 和 TSX 代码，无需额外配置或转译步骤，极大地提高了开发效率。

## 1. 无需额外配置

Bun 内置对 JSX 和 TSX 的支持，开发者无需额外安装 Babel 或 TypeScript 编译器。通过 Bun，JSX 和 TSX 代码能够直接运行，无需复杂的配置。

```bash
bun run index.tsx
````

该命令将直接执行 TSX 文件，并进行编译和优化，省去了繁琐的构建步骤。

## 2. 快速的编译和热重载

Bun 提供了快速的编译机制，特别是在处理 JSX 和 TSX 文件时，能够极大地提升开发体验。开发者可以通过 `bun dev` 命令启动开发服务器，实时查看代码修改。

```bash
bun dev
```

热重载功能使得开发者在修改 JSX 或 TSX 文件时能够即时看到效果，极大提高了开发效率。

## 3. 优化的 TypeScript 支持

Bun 对 TypeScript 的支持不仅仅局限于类型检查，它还支持 TSX 文件的快速编译。开发者可以在同一个项目中使用 TS 和 TSX 文件，而 Bun 会自动进行优化和编译。

```tsx
const App = () => {
  return <div>Hello, Bun!</div>;
};
```

在这段 TSX 代码中，Bun 会自动解析并执行，无需额外配置任何工具。

## 4. 集成 React

Bun 能够无缝集成 React 和 ReactDOM，支持 JSX 和 TSX 的直接运行。开发者只需安装 React 和 ReactDOM 依赖，Bun 会自动为你处理构建和打包工作。

```bash
bun add react react-dom
```

这将安装并配置 React 环境，让你能够直接在项目中使用 JSX/TSX 语法。

## 5. 性能优势

Bun 的原生支持和优化的编译过程使得 JSX 和 TSX 文件的运行速度相比于传统构建工具更快。由于 Bun 的运行时是用 Zig 编写的，它能在性能上提供比 [JavaScript](/javascript/) 运行时更高的效率。

## 总结

Bun 的原生 JSX 和 TSX 支持使得开发者能够无缝运行 React 和 TypeScript 项目，省去复杂的配置和转译步骤。通过高效的编译和热重载机制，Bun 为前端开发提供了更快速和高效的开发体验。