※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。

準備

ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。

npm install -g create-react-app

md-editorというアプリ名で環境を用意することにします。

create-react-app md-editor

次に、今回使うライブラリのインストールをしておきます。

cd ./md-editor

npm install --save marked

npm install

最後にサーバーを起動したら準備OKです。 npm start

実装

実装に入る前に今回使用しない不要なファイルを削除しておきましょう。

src/index.jsと``src/App.js`で上記ファイルをインポートしている部分を削除しておきます。

それからsrc/App.jsのほうはreturn文の中身を空にしておきましょう。（ビルド時にreturn文が空で怒られますが一旦無視します。）

src/index.js

src/App.js

src以下にMarkdown.jsというファイルを作成します。このファイルにはマークダウンのコンポーネントを実装していきます。

src/Markdown.js

ほんの数行です。これだけとりあえずマークダウンとして機能します。ほぼ生のJSですね。 React特有なのはJSXくらいでしょうか。

最後にMardown.jsをApp.js内でインポートしましょう。

ソースコードをハイライトしたい時にはisagalaev/highlight.js - githubを使ってmarkedをカスタマイズするといい感じになります。

ソースコードはbmf-san/til/javascript/md-editor/ - githubに置いてあります。

Reactは素のJSに近い形でコーディングできるので、フレームワークに知識がロックインされづらいので好きです。

コードの説明はほとんど省きましたが、モダンなJSの話 by @bmf_sanの記事を見て頂れば大体わかるのではないかと思います。