aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/guides/ecosystem/react.md47
1 files changed, 33 insertions, 14 deletions
diff --git a/docs/guides/ecosystem/react.md b/docs/guides/ecosystem/react.md
index b712e210e..f3c16c153 100644
--- a/docs/guides/ecosystem/react.md
+++ b/docs/guides/ecosystem/react.md
@@ -2,29 +2,48 @@
name: Use React and JSX
---
-React just works with Bun. Bun supports `.jsx` and `.tsx` files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.
-
-```tsx#react.tsx
-function Component(props: {message: string}) {
- return (
- <body>
- <h1 style={{color: 'red'}}>{props.message}</h1>
- </body>
- );
-}
-
-console.log(<Component message="Hello world!" />);
+React just works with Bun. Bun supports `.jsx` and `.tsx` files out of the box.
+
+Remember that JSX is just a special syntax for including HTML-like syntax in JavaScript files. It's commonReact uses JSX syntax, as do other React alternatives like [Preact](https://preactjs.com/) and [Solid](https://www.solidjs.com/). Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.
+
+---
+
+Bun _assumes_ you're using React (unless you [configure it otherwise](/docs/runtime/bunfig#jsx)) so a line like this:
+
+```
+const element = <h1>Hello, world!</h1>;
```
---
-Bun implements special logging for JSX to make debugging easier.
+is internally converted into something like this:
+
+```ts
+// jsxDEV
+import { jsx } from "react/jsx-dev-runtime";
+
+const element = jsx("h1", { children: "Hello, world!" });
+```
+
+---
+
+This code requires `react` to run, so make sure you you've installed React.
```bash
-$ bun run react.tsx
+$ bun install react
+```
+
+---
+
+Bun implements special logging for JSX components to make debugging easier.
+
+```bash
+$ bun run log-my-component.tsx
<Component message="Hello world!" />
```
---
+As far as "official support" for React goes, that's it. React is a library like any other, and Bun can run that library. Bun is not a framework, so you should use a framework like [Vite](https://vitejs.dev/) to build an app with server-side rendering and hot reloading in the browser.
+
Refer to [Runtime > JSX](/docs/runtime/jsx) for complete documentation on configuring JSX.