Docs tweaks (#2160)

* Tweaks * Add ecosystem. Add bunx. Flesh out install. * Tweaks * Add TS to installation * Tweaks * New readme * Write new readme * Tweak * Center header * Bun * tweaks * No dollar sign * Fix links * Update * Tweak
2026-02-02 15:08:46 +00:00 · 2023-02-24 16:33:53 -08:00
parent 1d85b5efa8
commit 1836250542
18 changed files with 444 additions and 5437 deletions
--- a/docs/ecosystem/react.md
+++ b/docs/ecosystem/react.md
@@ -0,0 +1,46 @@
+Bun supports `.jsx` and `.tsx` files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.
+
+```ts#react.tsx
+function Component(props: {message: string}) {
+  return (
+    <body>
+      <h1 style={{fontSize: 'red'}}>{props.message}</h1>
+    </body>
+  );
+}
+
+console.log(<Component />);
+```
+
+Bun implements special logging for JSX to make debugging easier.
+
+```bash
+$ bun run react.tsx
+<Component message="Hello world!" />
+```
+
+To server-side render (SSR) React in an [HTTP server](/docs/api/http):
+
+```tsx#ssr.tsx
+import {renderToReadableStream} from 'react-dom/server';
+
+function Component(props: {message: string}) {
+  return (
+    <body>
+      <h1 style={{fontSize: 'red'}}>{props.message}</h1>
+    </body>
+  );
+}
+
+Bun.serve({
+  port: 4000,
+  async fetch() {
+    const stream = await renderToReadableStream(
+      <Component message="Hello from server!" />
+    );
+    return new Response(stream, {
+      headers: {'Content-Type': 'text/html'},
+    });
+  },
+});
+```