diff options
| author |  Andrey Gurtovoy <iyntx@ya.ru>
| 2023-09-19 23:25:13 +0300 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-09-19 13:25:13 -0700 |
| commit | fc14902f73c643616f51e702e8a0fc2ac0a2ef85 (patch) | |
| tree | 524ff97fbf376a0e7d8d9b86787e1914eff80063 /docs | |
| parent | d362a8b9ec7f1e5ce7b1aff7573ce4bc44e05565 (diff) | |
| download | bun-fc14902f73c643616f51e702e8a0fc2ac0a2ef85.tar.gz bun-fc14902f73c643616f51e702e8a0fc2ac0a2ef85.tar.zst bun-fc14902f73c643616f51e702e8a0fc2ac0a2ef85.zip | |
Added react installation to react.md (#5620)
* Update react.md
Added install react part
* Updates
* Updates
---------
Co-authored-by: Colin McDonnell <colinmcd94@gmail.com>
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/guides/ecosystem/react.md | 47 |
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. |