diff options
author | William Carroll <wpcarro@gmail.com> | 2020-03-24T12·29+0000 |
---|---|---|
committer | William Carroll <wpcarro@gmail.com> | 2020-03-24T12·29+0000 |
commit | 57b58e9b2fe2a1b178f42bc16d7c5ab1f8da9cdd (patch) | |
tree | f73b035061d0d1cdf9e7cf1545e2b48d654065b8 /website/sandbox/nut-score/src | |
parent | 2551b41d735cb1446fa5ecae496d079ca4741e46 (diff) |
Move nut-score into website/sandbox
Also move some .gitignore entries from the top-level .gitignore into a subdirectory .gitignore.
Diffstat (limited to 'website/sandbox/nut-score/src')
4 files changed, 84 insertions, 0 deletions
diff --git a/website/sandbox/nut-score/src/Index.bs.js b/website/sandbox/nut-score/src/Index.bs.js new file mode 100644 index 000000000000..18775b27e122 --- /dev/null +++ b/website/sandbox/nut-score/src/Index.bs.js @@ -0,0 +1,9 @@ +'use strict'; + +var React = require("react"); +var ReactDOMRe = require("reason-react/src/ReactDOMRe.js"); +var ReducerFromReactJSDocs$ReasonReactExamples = require("./ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js"); + +ReactDOMRe.renderToElementWithId(React.createElement(ReducerFromReactJSDocs$ReasonReactExamples.make, { }), "mount"); + +/* Not a pure module */ diff --git a/website/sandbox/nut-score/src/Index.re b/website/sandbox/nut-score/src/Index.re new file mode 100644 index 000000000000..fcbd4beef4b9 --- /dev/null +++ b/website/sandbox/nut-score/src/Index.re @@ -0,0 +1 @@ +ReactDOMRe.renderToElementWithId(<ReducerFromReactJSDocs />, "mount"); diff --git a/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js new file mode 100644 index 000000000000..74322f4a8f45 --- /dev/null +++ b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js @@ -0,0 +1,35 @@ +'use strict'; + +var Curry = require("bs-platform/lib/js/curry.js"); +var React = require("react"); + +var initialState = /* record */[/* count */0]; + +function reducer(state, action) { + if (action) { + return /* record */[/* count */state[/* count */0] - 1 | 0]; + } else { + return /* record */[/* count */state[/* count */0] + 1 | 0]; + } +} + +function ReducerFromReactJSDocs(Props) { + var match = React.useReducer(reducer, initialState); + var dispatch = match[1]; + return React.createElement("div", undefined, React.createElement("div", undefined, "Count: ", String(match[0][/* count */0])), React.createElement("div", undefined, React.createElement("button", { + onClick: (function (_event) { + return Curry._1(dispatch, /* Decrement */1); + }) + }, "-"), React.createElement("button", { + onClick: (function (_event) { + return Curry._1(dispatch, /* Increment */0); + }) + }, "+"))); +} + +var make = ReducerFromReactJSDocs; + +exports.initialState = initialState; +exports.reducer = reducer; +exports.make = make; +/* react Not a pure module */ diff --git a/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re new file mode 100644 index 000000000000..ddc5f0994649 --- /dev/null +++ b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re @@ -0,0 +1,39 @@ +// 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 = {count: int}; + +type action = + | Increment + | Decrement; + +let initialState = {count: 0}; + +let reducer = (state, action) => { + switch (action) { + | Increment => {count: state.count + 1} + | Decrement => {count: state.count - 1} + }; +}; + +[@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 + <div> + <div> + {React.string("Count: ")} + {React.string(string_of_int(state.count))} + </div> + <div> + <button onClick={_event => dispatch(Decrement)}> + {React.string("-")} + </button> + <button onClick={_event => dispatch(Increment)}> + {React.string("+")} + </button> + </div> + </div>; +}; |