aboutsummaryrefslogtreecommitdiff
path: root/docs/guides/ecosystem/react.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/guides/ecosystem/react.md')
-rw-r--r--docs/guides/ecosystem/react.md30
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/guides/ecosystem/react.md b/docs/guides/ecosystem/react.md
new file mode 100644
index 000000000..b712e210e
--- /dev/null
+++ b/docs/guides/ecosystem/react.md
@@ -0,0 +1,30 @@
+---
+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!" />);
+```
+
+---
+
+Bun implements special logging for JSX to make debugging easier.
+
+```bash
+$ bun run react.tsx
+<Component message="Hello world!" />
+```
+
+---
+
+Refer to [Runtime > JSX](/docs/runtime/jsx) for complete documentation on configuring JSX.