diff options
author | 2023-07-31 12:20:23 -0700 | |
---|---|---|
committer | 2023-07-31 12:20:23 -0700 | |
commit | 404b90badc5856a74c06d04062c850003e28fed5 (patch) | |
tree | 7954623cf4a792db612d0bb229a227c2ff1e9fd8 /docs/guides/ecosystem/react.md | |
parent | 67599f97adc77141331a5f4fc39e4d058dc70b2a (diff) | |
download | bun-404b90badc5856a74c06d04062c850003e28fed5.tar.gz bun-404b90badc5856a74c06d04062c850003e28fed5.tar.zst bun-404b90badc5856a74c06d04062c850003e28fed5.zip |
Add ecosystem guides (#3847)
* Add ecosystem guides
* Update titles
* Rename stric
* Add unlink and fetch guides
* Add formdata guide
* Tweak title
* Moar
Diffstat (limited to 'docs/guides/ecosystem/react.md')
-rw-r--r-- | docs/guides/ecosystem/react.md | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/guides/ecosystem/react.md b/docs/guides/ecosystem/react.md new file mode 100644 index 000000000..b712e210e --- /dev/null +++ b/docs/guides/ecosystem/react.md @@ -0,0 +1,30 @@ +--- +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!" />); +``` + +--- + +Bun implements special logging for JSX to make debugging easier. + +```bash +$ bun run react.tsx +<Component message="Hello world!" /> +``` + +--- + +Refer to [Runtime > JSX](/docs/runtime/jsx) for complete documentation on configuring JSX. |