diff options
| -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 |