diff options
| author |  Colin McDonnell <colinmcd94@gmail.com>
| 2023-02-28 16:10:51 -0800 |
|---|---|---|
| committer | Colin McDonnell <colinmcd94@gmail.com>
| 2023-02-28 16:10:51 -0800 |
| commit | fd19d01583aace00925dbe80f1cad4696efeb569 (patch) | |
| tree | b9065be95445a260979d9b46a21ede3e084287f5 | |
| parent | 1826abbc658d812831e5346d468fe8bfbaf7609c (diff) | |
| download | bun-fd19d01583aace00925dbe80f1cad4696efeb569.tar.gz bun-fd19d01583aace00925dbe80f1cad4696efeb569.tar.zst bun-fd19d01583aace00925dbe80f1cad4696efeb569.zip | |
Document punning
| -rw-r--r-- | docs/ecosystem/react.md | 19 |
1 files changed, 18 insertions, 1 deletions
diff --git a/docs/ecosystem/react.md b/docs/ecosystem/react.md index 1be0bcdbb..c0904421a 100644 --- a/docs/ecosystem/react.md +++ b/docs/ecosystem/react.md @@ -1,6 +1,6 @@ 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 +```tsx#react.tsx function Component(props: {message: string}) { return ( <body> @@ -19,6 +19,23 @@ $ bun run react.tsx <Component message="Hello world!" /> ``` +### Prop punning + +The Bun runtime also supports "prop punning for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name. + +```tsx +function Div(props: {className: string;}) { + const {className} = props; + + // without punning + return <div className={className} />; + // with punning + return <div {className} />; + +} +``` + +### Server-side rendering To server-side render (SSR) React in an [HTTP server](/docs/api/http): ```tsx#ssr.tsx |