About ReasonReact template examples


#1

Hi,
As a newcomer I was a bit disappointed that the ReasonReact template demo (bsb -init my-react-app -theme react-hooks) does not come with examples with text fields or animations.
I made two attempts with text that might be useful for other newcomers (if somebody with more experience want to improve the code, he is welcome). I assume there are better options that to put it directly on the forum, please feel free to move it.

TO ADD in my-react-app/src/Index.re

ReactDOMRe.render(
,
makeContainer(“Reducer From ReactJS Docs Text”),
);

ReactDOMRe.render(
,
makeContainer(“Reducer From ReactJS Guesser (Pierre, Paul, Jacques)”),
);

EXAMPLE1: ReducerFromReactJSDocsText.re

// This is the ReactJS documentation’s useReducer example, directly ported over
// https://reactjs.org/docs/hooks-reference.html#usereducer

// Record and variant need explicit declarations.
type state = {msg: string, msgbuffer: string};

type action =
| Write
| UpdateBuffer(string);

let initialState = {msg: “nothing…”, msgbuffer: “”};

let reducer = (state, action) => {
switch (action) {
| Write => {…state, msg: state.msgbuffer}
| UpdateBuffer(txt) => {…state, msgbuffer: txt}
};
};

[@react.component]
let make = () => {
let (state, dispatch) = React.useReducer(reducer, initialState);

// We can use a fragment here, but we don’t

{React.string("You wrote: ")} {React.string(state.msg)}
dispatch(UpdateBuffer(ReactEvent.Form.target(_event)##value))} onKeyDown={_event => if (ReactEvent.Keyboard.keyCode(_event) === 13) { dispatch(Write);} } />
; };

EXAMPLE 2: ReducerFromReactJSDocsGuesser.re

// This is the ReactJS documentation’s useReducer example, directly ported over
// https://reactjs.org/docs/hooks-reference.html#usereducer

// A little extra we’ve put, because the ReactJS example has no styling
let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius=“4px 0px 0px 4px”, ~width=“148px”, ());
let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius=“0px 4px 4px 0px”, ~width=“148px”, ());

// Record and variant need explicit declarations.
type state = {msgbuffer: string, status: string, name: string};

type action =
| UpdateBuffer(string)
| Check
| Show
| Start;

let guess = () =>
{
let num = Js.Math.floor(Js.Math.random() *. 3.0);
switch (num) {
| 0 => “Pierre”
| 1 => “Paul”
| _ => “Jacques”
};
};

let initialState = {msgbuffer: “”, name: guess(), status: “Let’s start!”};

let compare = (state) => if (state.msgbuffer === state.name) { “You guessed!!!” }
else { “Try again, bro!” };

let reducer = (state, action) => {
switch (action) {
| UpdateBuffer(txt) => {…state, msgbuffer: txt}
| Check => {…state, status: compare(state)}
| Show => {…state, status: state.name}
| Start => {msgbuffer: “”, name: guess(), status: “Pierre, Paul, Jacques, who’s dat guy?” }
};
};

[@react.component]
let make = () => {
let (state, dispatch) = React.useReducer(reducer, initialState);

// We can use a fragment here, but we don’t, because we want to style the counter

dispatch(UpdateBuffer(ReactEvent.Form.target(_event)##value))} onKeyDown={_event => if (ReactEvent.Keyboard.keyCode(_event) === 13) { dispatch(Check);} } />
dispatch(Start)}> {React.string("Start again")} dispatch(Show)}> {React.string("Show me that guy!")}
{React.string(state.status)}
; };

#2

Thanks for your examples.

May I suggest you use markdown code blocks to make them more readable, like this:

```reason    
type action =
  | Write
  | UpdateBuffer(string);
```

Here’s the result:

type action =
  | Write
  | UpdateBuffer(string);