MDX  [+] is interesting extension for markdown  [+]

let us try to embed some React component.(Here I test with victory data visualization lib  [+])

import { LetterCounts } from "components/lab/vic-tests"
<div style={{ height: "600px", width: "800px", background:"#f0f0f0" }} className="">
    <LetterCounts str="whatever it is, please count the frequency of letters in this sentence" />
</div>

it works like this on the markdown page, (please move mouse over bars so you can tell it is not just image)

This component:LetterCounts will go through a string and count frequency of each letters, just to display some simple mock data.

Let us try making a react component in mdx file.

function TemperatureConvertor(): JSX.Element {
    const inputRef = useRef(null)
    const [ts, setTS] = useState(0)

    return <>
        <input type="number" 
            ref={inputRef} 
            onChange={ev => setTS(inputRef.current.value)} 
            value={ts}></input> °C =&gt; 
        <span>&nbsp;{ts * 9 / 5 + 32} °F</span>
    </>
}

function TemperatureConvertor(): JSX.Element { const inputRef = useRef(null) const [ts, setTS] = useState(0)

return <>
    <input type="number" 
        ref={inputRef} 
        onChange={ev => setTS(inputRef.current.value)} 
        value={ts}></input> °C =&gt; 
    <span>&nbsp;{ts * 9 / 5 + 32} °F</span>
</>

}

However, directly coding in mdx file, doesn't take the componet to live on the page. It has to be code somewhere in .jsx or .tsx file, then import into the mdx file. The import clause has to be placed on top of the mdx file.