ReScript Playground

Auto-run

 
@@jsxConfig({ version: 4, mode: "automatic" })
​
module CounterMessage = {
  @react.component
  let make = (~count, ~username=?) => {
    let times = switch count {
    | 1 => "once"
    | 2 => "twice"
    | n => Belt.Int.toString(n) ++ " times"
    }
​
    let name = switch username {
    | Some("") => "Anonymous"
    | Some(name) => name
    | None => "Anonymous"
    }
​
    <div> {React.string(`Hello ${name}, you clicked me ` ++ times)} </div>
  }
}
​
module App = {
  @react.component
  let make = () => {
    let (count, setCount) = React.useState(() => 0)
    let (username, setUsername) = React.useState(() => "Anonymous")
​
    <div>
      {React.string("Username: ")}
      <input
        type_="text"
        value={username}
        onChange={evt => {
          evt->ReactEvent.Form.preventDefault
          let username = (evt->ReactEvent.Form.target)["value"]
          setUsername(_prev => username)
        }}
      />
      <button
        onClick={_evt => {
          setCount(prev => prev + 1)
        }}>
        {React.string("Click me")}
      </button>
      <button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
      <CounterMessage count username />
    </div>
  }
}
​

⣿

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";
import * as JsxRuntime from "react/jsx-runtime";

function Playground$CounterMessage(props) {
  var username = props.username;
  var count = props.count;
  var times = count !== 1 ? (
      count !== 2 ? String(count) + " times" : "twice"
    ) : "once";
  var name = username !== undefined && username !== "" ? username : "Anonymous";
  return JsxRuntime.jsx("div", {
              children: "Hello " + name + ", you clicked me " + times
            });
}

var CounterMessage = {
  make: Playground$CounterMessage
};

function Playground$App(props) {
  var match = React.useState(function () {
        return 0;
      });
  var setCount = match[1];
  var match$1 = React.useState(function () {
        return "Anonymous";
      });
  var setUsername = match$1[1];
  var username = match$1[0];
  return JsxRuntime.jsxs("div", {
              children: [
                "Username: ",
                JsxRuntime.jsx("input", {
                      type: "text",
                      value: username,
                      onChange: (function (evt) {
                          evt.preventDefault();
                          var username = evt.target.value;
                          setUsername(function (_prev) {
                                return username;
                              });
                        })
                    }),
                JsxRuntime.jsx("button", {
                      children: "Click me",
                      onClick: (function (_evt) {
                          setCount(function (prev) {
                                return prev + 1 | 0;
                              });
                        })
                    }),
                JsxRuntime.jsx("button", {
                      children: "Reset",
                      onClick: (function (_evt) {
                          setCount(function (param) {
                                return 0;
                              });
                        })
                    }),
                JsxRuntime.jsx(Playground$CounterMessage, {
                      count: match[0],
                      username: username
                    })
              ]
            });
}

var App = {
  make: Playground$App
};

export {
  CounterMessage ,
  App ,
}
/* react Not a pure module */

React

Console