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]
markdown guide
 

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

 

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 :)

 
 

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...

 

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 😅

 

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

 

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

 

Great article!

I just have a question regarding updating the document title, isn't that a side-effect? why not do it inside another useEffect hook instead of inside the reducer?

 

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!

 

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.

 

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

 

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.

 
 
code of conduct - report abuse