create-react-appでejectせずにmarkdownをレンダリングする

TL;DR

• raw.macroはraw loaderをwebpack confに記述しなくても使えるようなしたもの
• raw.macroでローカルのmdを読み込み，markedなどのmarkdownパーサーでパースすることでレンダリングすることができる． github.com github.com

raw.macroの使い方

何かしらを書いたtest.txtを保存し，test.txtのpathをraw.macroの引数に与えることでtest.txtに記述した内容が読み込まれます．

import React from "react";
import macro from "raw.macro";

function App() {
  return <div className="App">{macro("./test.txt")}</div>;
}

export default App;

raw.macro + marked

markdown parserであるmarkedをインストールします

npm install marked

import React from "react";
import raw from "raw.macro";
import marked from "marked";

const renderer = new marked.Renderer();
const markedOptions = {
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    renderer
};
function App() {
  return <div className="App">
      <div
          dangerouslySetInnerHTML={{
              __html: marked(raw("./article.md"), markedOptions)
          }}
      />
  </div>;
}

export default App;

markdownがhtmlにパースできていることがわかると思います．