ReactとMarkdownを組み合わせられるMDX使ってみた

ずっと気になっていたMDXを使ってみました！

MDX とは

Markdownの中にReact.Componentを埋め込めるすごいやつ.JSXもかけちゃう.
アップデートが頻繁じゃないのがちょっと心配.
Next.jsやGatsby.jsなどいろいろ対応しているのですが,今回はCRAので使いたかったので,その使い方のみ簡単に紹介します！
MDX公式

Create React Appの場合

mdx.macroをインストール

yarn add mdx.macro

表示したいComponentでこんな感じに書く

Mdx.jsx

import React, { lazy, Suspense } from 'react'
import { importMDX } from 'mdx.macro'
const Content = lazy(() => importMDX('./test.mdx'))

const Mdx = () => {
  return (
    <div className="box">
      <Suspense fallback={<div>Loading...</div>}>
        <Content />
      </Suspense>
    </div>
  )
}
export default Mdx

lazyは今勉強ですが,Componentの非同期処理ができるみたい.Markdownの変換が終了してからRenderingされるのに必要なのだと思われます.Suspenseとか使うのでちょっと難しい...

test.mdx

import FirstComponent from "FirstComponent.jsx"

# Hello, *world*!

Below is an example of JSX embedded in Markdown. <br /> **Try and change
the background color!**

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX</h3>
</div>

<FirstComponent />

こんな感じでMarkdownに,ReactのJSX風にComponentやDOMを配置できるのですが,importのpathがうまくいかなくてエラーが出ていたので,今回は絶対パスを使っています.

すごくいい感じでプロパティも渡せるので感動しているのだけど,上手な活用方法が思いつかない...