Facebook/reason から React を触る

最小セットを作った

mizchi-sandbox/reason-react-starter

git clone https://github.com/mizchi-sandbox/reason-react-starter
yarn install
yarn start

bucklescript の出力コードをwebpackでbundleするnpm scripts を書いたという感じ。とりあえずHelloWorldできるので、ここからいじって挙動を確かめるとよい。

enjoy!

中身

これだけだとアレなんで、どう書かれているか

module Page = {
  include ReactRe.Component;
  type props = {message: string};
  let name = "Page";
  let handleClick _ _ => {
    Js.log "clicked!";
    None
  };
  let render {props, updater} =>
    <div onClick=(updater handleClick)> (ReactRe.stringToElement props.message) </div>;
};

include ReactRe.CreateComponent Page;

let createElement ::message => wrapProps {message: message};

だいたいこんな感じ。ちょっとまだ冗長ですね。

reason-react のバインディングはどう書かれてるか

external createElement : reactClass => props::Js.t {..}? => array reactElement => reactElement =
  "createElement" [@@bs.splice] [@@bs.val] [@@bs.module "react"];

"createElement" [@@bs.splice] [@@bs.val] [@@bs.module "react"]; が require('react').createElement(...arguments) に相当してそう。npmのモジュールを呼び出せれば、あとはコードを書くだけ。書くだけです。