feat: support .jsx files (#854)

* support jsx files

* add .jsx

* Apply suggestions from code review

---------

Co-authored-by: Ethan Palm <[email protected]>

Author: dks333

react-components.mdx

@@ -5,7 +5,7 @@ icon: "react"
 ---
 
 import { Counter } from "/snippets/counter.mdx";
-import { ColorGenerator } from "/snippets/color-generator.mdx";
+import { ColorGenerator } from "/snippets/color-generator.jsx";
 
 [React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
 
@@ -49,7 +49,7 @@ And the component will be rendered as a React component in the MDX file.
 Just like in regular React, you can import components from other files.
 
 ```mdx
-import { ColorGenerator } from "/snippets/color-generator.mdx"
+import { ColorGenerator } from "/snippets/color-generator.jsx"
 ```
 
 <Warning>
@@ -68,7 +68,7 @@ Learn more about [reusable snippets](/reusable-snippets).
 
 You can also build much more complex components. Here's an example of a color generator component that uses multiple React hooks:
 
-```mdx /snippets/color-generator.mdx [expandable]
+```mdx /snippets/color-generator.jsx [expandable]
 export const ColorGenerator = () => {
   const [hue, setHue] = useState(180)
   const [saturation, setSaturation] = useState(50)

reusable-snippets.mdx

@@ -95,3 +95,32 @@ import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
 
 Hello, my name is {myName} and I like {myObject.fruit}.
 ```
+
+### JSX snippets
+
+1. Export a JSX component from your snippet file. (See [React components](/react-components) for more information):
+
+```js icon=square-js snippets/my-jsx-snippet.jsx
+export const MyJSXSnippet = () => {
+  return (
+    <div>
+      <h1>Hello, world!</h1>
+    </div>
+  )
+}
+```
+
+<Note>
+  Important: When creating JSX snippets, use arrow function syntax (`=>`) rather than function declarations. The `function` keyword is not supported in this context.
+</Note>
+
+2. Import the snippet from your destination file and use the component:
+
+```typescript destination-file.mdx
+---
+title: My title
+description: My Description
+---
+
+import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';
+```