mirrors/bun.sh
1
0
Fork 0
mirror of https://github.com/oven-sh/bun synced 2026-02-02 15:08:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added react installation to react.md (#5620)

Browse Source 
* Update react.md

Added install react part

* Updates

* Updates

---------

Co-authored-by: Colin McDonnell <colinmcd94@gmail.com>
This commit is contained in:
Andrey Gurtovoy
2023-09-19 23:25:13 +03:00
committed by GitHub
parent d362a8b9ec
commit fc14902f73
1 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/guides/ecosystem/react.md
View File

@@ -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.
React just works with Bun. Bun supports `.jsx` and `.tsx` files out of the box.
```tsx#react.tsx
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
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.
console.log(<Component message="Hello world!" />);
---
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.