2020/11/02

ReasonReactを使ってみる

動作確認

現在私が使用しているのはnode v12.18.4npm v6.14.6となっています。現在(2020/10/30時点)nodejsの推奨版はv14.15.0LTSとなっているようですが、とりあえずv12のほうでやっていこうかと思います。

Reasonを使うためにはbs-platformが必要になりますので、そちらをインストールします。


$ npm install --global bs-platform

次に以下のようにすると、ReasonReactのプロジェクトの見本が出来上がります。


$ npx bsb -init hello -theme react-hooks
Making directory hello
$ npm install && npm start

これで諸々の準備が行われます。react-hooksは私のような入門者にはscaffolding(足場)となるだろうと、公式ドキュメントにあるので各ファイルを参考に学んでいこうと思います。

教科書となるべくテンプレートがどのようなものか見てみるには、別のタブにて


$ npm run server

これで正常に動作したことを確認できると思います。

Hello world

現在、見本のままだと、以下のようなディレクトリ構成になっていると思います。


timer-app/
    lib/
        bs/
            ...
    node_modules/
        ...
    src/
        BlinkingGreeting/
        FetchedDogPictures/
        ReasonUsingJSUsingReason/
        ReducerFromReactJSDocs/
        ExampleStyles.bs.js
        ExampleStyles.re
        Index.bs.js
        Index.re
    .gitignore
    .merlin
    bsconfig.json
    index.html
    indexProduction.html
    package.json
    package-lock.json
    README.md
    UNUSED_webpack.config.js
    watcher.js

まずIndex.reを見てみると、コメントにEntry pointとある。次にコードを見ていくと、


[@bs.val] external document: Js.t({..}) = "document";

とある。[@bs.val] external ...はJavascriptのグローバルな変数とバインディングする時に使うというようなことが書かれていたので、JavaScriptのdocumentを使う際はこのように各必要があるようです。

次のコードでは


let style = document##createElement("style");
document##head##appendChild(style);
style##innerHTML #= ExampleStyles.style;

とある。この部分はHTMLのstyleタグの部分を生成しているようで、まずstyleタグを作成し、headタグ内に追加、styleタグで囲まれた部分にExampleStyles.reの変数styleの文字列を追加。という感じになっているようです。どうやらCSSもこうやってreasonファイルとして書けるようです。この後もappendChildというのがよく出てくるのですが、HTMLのツリー構造を考えると使いやすいような気がします。

Hello world

次にHello worldを表示できるようにしてみます。

srcディレクトリに、新たにHelloディレクトリを作成し、その中にHello.reというファイルを作成します。


// Hello.re
let make = () => <div> { React.string("Hello, world!!") } </div>;

そしてIndex.reの// All 4 examples.というコメントのあとに以下を追記


ReactDOMRe.render(
 32   <Hello />,
 33   makeContainer("HelloWorld"),
 34 );

そして先程のようにブラウザで表示させてみると、無事表示されました。

まとめ

ちょっとドキュメントが少ないような気がしないでもないですが、react-hooksの見本やReactと比較しながらやって行くとよいのかもしれません。とりあえず、なんとなく使い方が分かったような、分からないような…

author: date:
Label: