cumqueoptio
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
57 lines (56 loc) • 1.36 kB
HTML
<html>
<head>
<title>reduck-vanilla-counter</title>
</head>
<body>
<script>
globalThis.process = { env: { NODE_ENV: "dev" } };
</script>
<div id="root"></div>
<script type="module">
import React from "https://esm.sh/react@17";
import ReactDOM from "https://esm.sh/react-dom@17";
import {
Provider,
useModel,
model
} from "https://esm.sh/@modern-js-reduck/react";
const countModel = model("count").define({
state: {
count: 1,
},
actions: {
add(state) {
return {
count: state.count + 1,
};
},
},
});
function App() {
const [state, actions] = useModel(countModel);
return React.createElement(
"div",
null,
React.createElement("div", null, "counter: ", state.count),
React.createElement(
"button",
{
onClick: actions.add,
},
"add",
),
);
}
ReactDOM.render(
React.createElement(
React.StrictMode,
null,
React.createElement(Provider, null, React.createElement(App, null)),
),
document.getElementById("root"),
);
</script>
</body>
</html>