react-mx
Counter App
import React from "react";import render from "react-dom";import mx from "react-mx"; const Count = value: 1;// computed stateconst DoubleCount = state: Count state * 2;const Increase = state: Count state + step;const App = const count doubleCount increase = ; return <> <h1>Count: count</h1> <h1>Double Count: doubleCount</h1> <button =>Increase</button> <button =>Increase 2</button> </> ;; ;
Todo App
import React useRef from "react";import render from "react-dom";import mx from "react-mx"; const Todos = value: ;const AddTodo = // using state helper to mutate state (prop name starts with $ sign) $state: Todos { $todos; };const RemoveTodo = $state: Todos { $todos; };const ToggleTodo = $state: Todos { $todos; };const App = const todos addTodo removeTodo toggleTodo = ; const inputRef = ; const handleSubmit = { e; ; inputRefcurrentvalue = ""; }; return <> <form => <input = /> </form> <ul> todos </ul> </> ;; ;
Greeting App
import React from "react";import render from "react-dom";import mx from "react-mx"; const FirstName = value: "";const LastName = value: "";const FullName = first: FirstName last: LastName first + " " + last;const UpdateName = first: FirstName last: LastName // can update multiple states at once { if type === "first" return first: value ; return last: value ; // return { first: FirstNameValue, last: LastNameValue } to update both states } /** * another dispatch version using state helper * $first: FirstName * $last: LastName * dispatch({ $first, $last }, type, value) { * if (type === 'first') { * $first.value = value; * } * else if (type === 'last') { * $last.value = value; * } * } */;const App = const first last full update = ; return <> <input ="First name" = = /> <input ="Last name" = = /> <h1>full</h1> </> ;; ;
Using flow
import React useEffect from "react";import render from "react-dom";import mx from "react-mx"; // define power statesconst PowerOff = value: "off" on: "toggle" PowerOn;const PowerOn = value: "on" on: "toggle" PowerOff; // define traffic light statesconst TrafficLightOff = value: "off" on: "on" GreenLightOn; const GreenLightOn = value: "green" on: "timer" YellowLightOn "off" TrafficLightOff; const YellowLightOn = value: "yellow" on: "timer" RedLightOn "off" TrafficLightOff; const RedLightOn = value: "red" on: "timer" GreenLightOn "off" TrafficLightOff; // create flowsconst PowerFlow = mx;const TrafficLightFlow = mx // should turn on/off when power state changed ; const App = // using flow hooks const power sendPowerCommand = PowerFlow; const traffic sendTrafficCommand = TrafficLightFlow; ; return <> <div = /> <button = = > power === "on" ? "Turn power off" : "Turn power on" </button> </> ;; ;