From fd19d01583aace00925dbe80f1cad4696efeb569 Mon Sep 17 00:00:00 2001 From: Colin McDonnell Date: Tue, 28 Feb 2023 16:10:51 -0800 Subject: Document punning --- docs/ecosystem/react.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) 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 ( @@ -19,6 +19,23 @@ $ bun run react.tsx ``` +### 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

; + // with punning + return

; + +} +``` + +### Server-side rendering To server-side render (SSR) React in an [HTTP server](/docs/api/http): ```tsx#ssr.tsx -- cgit v1.2.3