Use React with Jeasx
Jeasx lets you add React in userland: components are rendered on the server and hydrated in the browser. This gives you islands of interactivity without rendering the whole application in the browser.
How do I integrate React with Jeasx?
Install React and React DOM:
npm install react react-dom
React brings its own JSX runtime, so start every file that holds React JSX with a pragma comment:
/** @jsxImportSource react */
Have a look at the source code of this page to see how the components are rendered on the server and hydrated in the browser.
Memory
All rules live in one useReducer, an effect flips mismatched cards back, and the deck is shuffled with a seed from the server, so the hydrated markup matches.
Beat sequencer
Click the pads and press play: the sounds are synthesized with the Web Audio API, an effect runs the timer, and refs let it read the latest pattern without restarting. Turn your sound on!