diff options
| author |  Colin McDonnell <colinmcd94@gmail.com>
| 2023-04-13 18:26:45 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-04-13 18:26:45 -0700 |
| commit | 011e157cac7698050370e24495a9002dacfceea9 (patch) | |
| tree | ebb561dbda3e8f67302cc4d5b398f4a2744f7884 /docs/runtime/jsx.md | |
| parent | 0cc56e8efce9c7d4905b3649827bf9b40a677b25 (diff) | |
| download | bun-011e157cac7698050370e24495a9002dacfceea9.tar.gz bun-011e157cac7698050370e24495a9002dacfceea9.tar.zst bun-011e157cac7698050370e24495a9002dacfceea9.zip | |
Docs restructuring (#2638)
* Restructure
* Update nav
* Reorg
* Reshuffle ecosystem pages
* Split up runtime/runtime
* Back to runtime/index
* Fix issue
* Split up runtime/index
* Add Writing Tests page
* Prettier matcher table
* More updates
Diffstat (limited to 'docs/runtime/jsx.md')
| -rw-r--r-- | docs/runtime/jsx.md | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/docs/runtime/jsx.md b/docs/runtime/jsx.md new file mode 100644 index 000000000..1ace6e367 --- /dev/null +++ b/docs/runtime/jsx.md @@ -0,0 +1,35 @@ +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!" />); +``` + +Bun implements special logging for JSX to make debugging easier. + +```bash +$ 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} />; +} +``` --> |