Created
May 23, 2018 01:05
-
-
Save quicksnap/6272698e8981c1ea5b0d3c630987288e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[%%debugger.chrome]; | |
/* This is the basic component. */ | |
let component = ReasonReact.statelessComponent("Page"); | |
type attr = ..; | |
type attr += | |
| Str (string); | |
type attr += | |
| Int (int) | |
| Float (float); | |
type bungo = { wee: string}; | |
type bazzer = { bar: int, baz: int, hi: bungo, wow: attr}; | |
let dong = Str("I am string"); | |
let foo = { bar: 123, baz: 444, hi: {wee: "ok"}, wow: dong}; | |
/* Your familiar handleClick from ReactJS. This mandatorily takes the payload, | |
then the `self` record, which contains state (none here), `handle`, `reduce` | |
and other utilities */ | |
let handleClick = (_event, _self) => {Js.log("clicked!"); Js.log(foo)}; | |
/* `make` is the function that mandatorily takes `children` (if you want to use | |
`JSX). `message` is a named argument, which simulates ReactJS props. Usage: | |
`<Page message="hello" />` | |
Which desugars to | |
`ReasonReact.element(Page.make(~message="hello", [||]))` */ | |
let make = (~message, _children) => { | |
...component, | |
render: self => | |
<div onClick=(self.handle(handleClick))> | |
(ReasonReact.string(message)) | |
</div>, | |
}; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment