最小セットを作った
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 のバインディングはどう書かれてるか
https://github.com/reasonml/reason-react/blob/master/src/reactRe.re#L24-L25
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のモジュールを呼び出せれば、あとはコードを書くだけ。書くだけです。