ElmとReactを同一画面（Html）に埋め込んでみる #Eml

　Elmの勉強中です。今回はElmとReactを同一Htmlに埋め込んで表示させます。相互通信はありません。ElmもReactも以前のプログラムを再利用して、同じindex.htmlに埋め込むだけです。

　Reactは以前に書いた「React+D3.jsアプリ作成の基本」の記事のアプリを使います。これはReactで作成したDOMをD3.jsの関数に渡してグラフを書くというものでした。
React+D3.jsアプリ作成の基本 - Qiita

　プロジェクトをcreate-react-appで作り、npm run buildでアプリを生成します。build/static下に最終的なJavaScriptファイルが作成されます。

create-react-app react-d3
npm run build

　Elmについては「Elm開発環境について」の記事で書いたアプリを使います。カウンターをincrement/decrementするボタンが二つ付いたものです。これはelm.jsというJavaScriptファイルを生成します。
Elm開発環境について - Qiita

elm-make MyButtons.elm --output elm.js

　このElmの環境に、Reactのbuildディレクトリをそのままコピーします。その上で、2つのjsファイルを、以下のようにindex.htmlに埋め込みます。

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <style>
        .line{
            fill: none;
            stroke: steelblue;
            stroke-width: 2;
        }
    </style>
    <title>Elm React D3.js App</title>
  </head>
  <body>
        <div id="elm-area"></div>
        <div id="root"></div>
        <script src="elm.js"></script>
        <script>
            Elm.MyButtons.embed(document.getElementById("elm-area"));
        </script>
        <script type="text/javascript" src="/static/js/main.71bfb7b1.js"></script>
  </body>
</html>

　D3.jsのグラフ表示のためにstyleを指定していますので、ちょっと汚いですが、よく見るとシンプルです。

　以下がElmの埋め込みです

        <div id="elm-area"></div>
        <script src="elm.js"></script>
        <script>
            Elm.MyButtons.embed(document.getElementById("elm-area"));
        </script>

　以下がReactの埋め込みです。

        <div id="root"></div>
        <script type="text/javascript" src="/static/js/main.71bfb7b1.js">

　以下のコマンドでhttpサーバが立ち上がります。

elm-reactor -a=www.mypress.jp -p=3030

　ブラウザで確認します。

http://www.mypress.jp:3030/index.html

　ちゃんとElmとReactが表示されているのが確認できました。（現在はサーバを停止しているのでアクセスできません）。でもこれだけでは無意味ですね。データのやり取りとかができなくてはね。次回のテーマです。