Bun

指南生態系統

搭配 Bun 使用 React 和 JSX

React 搭配 Bun 即可運作。Bun 支援開箱即用的 .jsx.tsx 檔案。

請記住,JSX 只是在 JavaScript 檔案中包含類似 HTML 語法的特殊語法。React 使用 JSX 語法,如同 PreactSolid 等替代方案一樣。Bun 的內部轉譯器會在執行前將 JSX 語法轉換為原始 JavaScript。

Bun *假設* 您正在使用 React (除非您另行設定),因此像這樣的程式碼行

const element = <h1>Hello, world!</h1>;

會在內部轉換成類似這樣的程式碼

// jsxDEV
import { jsx } from "react/jsx-dev-runtime";

const element = jsx("h1", { children: "Hello, world!" });

此程式碼需要 react 才能執行,因此請確保您已安裝 React。

bun install react

Bun 為 JSX 元件實作了特殊的日誌記錄,以簡化偵錯。

bun run log-my-component.tsx
<Component message="Hello world!" />

就 React 的「官方支援」而言,就這樣了。React 是一個像其他任何東西一樣的函式庫,而 Bun 可以執行該函式庫。Bun 不是一個框架,因此您應該使用像 Vite 這樣的框架來建置具有伺服器端渲染和瀏覽器中熱重載的應用程式。

請參閱執行階段 > JSX 以取得有關設定 JSX 的完整文件。