DEV Community

ReasonML with React Hooks Tutorial — Building a Pomodoro Timer

Ian Wilson on April 15, 2019

Source code available on github ReasonML is a programming language that combines the simplicity of JavaScript with the performance of OCaml. JavaS...

Read full post

Diogo Mafra • Apr 15 '19 • Edited

Nice post! I tried to implement following your instructions but I'm getting an error on

   { state.seconds |> formatTime |> str  }
   Unbound value str

where is str declared?

P.S: I'm new to ReasonML

Ian Wilson • Apr 15 '19 • Edited

Oh woops, change str to ReasonReact.string,

or put this at the top of your file:

let str = ReasonReact.string;

Sorry about that! And welcome to ReasonML I hope you enjoy playing with it :)

Diogo Mafra • Apr 15 '19

Thank you!

Alain • Apr 16 '19 • Edited

What version of bs-platform are we using here to get react-hooks?

These are the available themes.

➜  EXAMPLES bsb -themes
Available themes:
basic
basic-reason
generator
minimal
node
react
react-lite
tea

I believe its available out of the box now, isnt it? So maybe -theme react should work except in version 6.0 which is bs-platform@next

This gist has the package.json/bsconfig.json that worked for me in case it helps. gist.github.com/idkjs/e9273ac0e2a5...

Ian Wilson • Apr 16 '19

should be bs-platform@5.0.1 for the react-hooks theme, I just upgraded with npm i -g bs-platform.

Apart from the theme, if you're rolling reason-react@0.7.0, you should have the bindings to hooks so you can use any theme you'd like. I usually sacrifice the boilerplate anyways 😅

Alain • Apr 16 '19

Also didnt work until i updated react-jsx": 2 to react-jsx": 3 in bsconfig.json. Just trying stuff....

K • Apr 15 '19

The last update to ReasonReact really makes components as concise to write as it should be :)

Ian Wilson • Jun 29 '19

Semantically speaking, yes that is a side effect. I feel like if I were calling React.useState(() => 0) instead in order to manage my "ticks" I would use useEffect and pass that ticks variable as a dependency.

When calling useReducer like this, you can imagine the Tick action as the dependency with the reducers switch expression as the effect execution.

Before the hooks version of ReasonReact, you would update a ReasonReact reducer by calling ReasonReact.UpdateWithSideEffects - meaning your effects were also performed in the reducer.

See this section for what that used to look like github.com/reasonml/reason-react/b....

Hope that makes sense!

Emmanuel • Jul 20 '19

Thanks for this great and detailed example.

Marcell Ciszek Druzynski • Sep 24 '19

Ian thank you for this. Great post just what I wanted!

alfieqashwa • May 14 '19

where is the source code ?

Thanks

Ian Wilson • May 15 '19

Hi, thank you for the reminder, an oversight by me. Here it is!

github.com/iwilsonq/pomodoro-timer...

Alain • Apr 16 '19

Absolutely fantastic. Woke up this morning having to get Hooks into my head and fingers. As a bonus, got updating tab with document.title and updating styles with hooks. Thanks, brother.

Sophia Brandt • Oct 14 '19

Thanks for the tutorial. Nice simple app to get your feet wet with ReasonReact.
I liked seeing how you can update the browser's title.

Dean Radcliffe • Jun 26 '19

They've chosen an unfortunate name - why would I want another b.s. platform haha 🤣
Nice post though, this is the gentle introduction to ReasonML for React Developers I've wanted.

Ian Wilson • Jun 29 '19

Thank you~ I'll ask the authors if i ever get to meet them. My guess is they chose it because it would give newcomers something to giggle about