commit 825595d384dc0e1621e97597f6d9ad66f1a37086 parent ec91bd22cf333e31beb7457bbbfe86964318e3df Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Wed, 14 Aug 2019 18:11:22 +0700 refactor(Components) => remove default components Diffstat:
| D | src/components/Component1.re | | | 21 | --------------------- |
| D | src/components/Component2.re | | | 31 | ------------------------------- |
2 files changed, 0 insertions(+), 52 deletions(-)
diff --git a/src/components/Component1.re b/src/components/Component1.re @@ -1,21 +0,0 @@ -/* You're 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) => Js.log("clicked!"); - -/* `make` is the function that mandatorily takes `children` (if you want to use - `JSX). `message` is a named argument, which simulates ReactJS props. Usage: - - `<Component1 message="hello" />` - - Which desugars to - - `React.createElement( - Component1.make, - Component1.makeProps(~message="hello", ()) - )` */ -[@react.component] -let make = (~message) => - <div onClick={handleClick}> - {ReasonReact.string(message)} - </div>; diff --git a/src/components/Component2.re b/src/components/Component2.re @@ -1,31 +0,0 @@ -/* State declaration */ -type state = { - count: int, - show: bool, -}; - -/* Action declaration */ -type action = - | Click - | Toggle; - -[@react.component] -let make = (~greeting) => { - let (state, dispatch) = React.useReducer((state, action) => - switch (action) { - | Click => {...state, count: state.count + 1} - | Toggle => {...state, show: ! state.show} - }, {count: 0, show: true}); - - let message = - "You've clicked this " ++ string_of_int(state.count) ++ " times(s)"; - <div> - <button onClick={_event => dispatch(Click)}> - {ReasonReact.string(message)} - </button> - <button onClick={_event => dispatch(Toggle)}> - {ReasonReact.string("Toggle greeting")} - </button> - {state.show ? ReasonReact.string(greeting) : ReasonReact.null} - </div>; -};