DEV Community

Cover image for ReasonML with React Hooks Tutorial — Building a Pomodoro Timer

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...
Collapse
 
diogomqbm_ profile image
Diogo Mafra • 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

Collapse
 
iwilsonq profile image
Ian Wilson • 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 :)

Collapse
 
diogomqbm_ profile image
Diogo Mafra

Thank you!

Collapse
 
idkjs profile image
Alain • 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...

Collapse
 
iwilsonq profile image
Ian Wilson

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 😅

Collapse
 
idkjs profile image
Alain

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

Collapse
 
iwilsonq profile image
Ian Wilson

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!

Collapse
 
kayis profile image
K

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

Collapse
 
efleurine profile image
Emmanuel

Thanks for this great and detailed example.

Collapse
 
masiucd profile image
Marcell Ciszek Druzynski

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

Collapse
 
alfieqashwa profile image
alfieqashwa

where is the source code ?

Thanks

Collapse
 
iwilsonq profile image
Ian Wilson

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

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

Collapse
 
idkjs profile image
Alain

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.

Collapse
 
sophiabrandt profile image
Sophia Brandt

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.

Collapse
 
deanius profile image
Dean Radcliffe

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.

Collapse
 
iwilsonq profile image
Ian Wilson

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