test: refactor test:demo script into demo/*/test.sh

demo/reactjs/src/AppWithHooks.tsx

@@ -0,0 +1,35 @@
+import { useState, useLayoutEffect } from 'react';
+import './App.css';
+import logo from './logo.svg';
+import showingClickTimes from './views/showing-click-times.liquid?raw';
+import { engine } from './engine';
+import { Context } from './Context';
+import { ClickButton } from './ClickButton';
+
+const tpl = engine.parse(showingClickTimes)
+
+export function App() {
+  const [state, setState] = useState({
+    logo,
+    name: 'liquid',
+    clickCount: 0,
+    html: ''
+  });
+
+  useLayoutEffect(() => {
+    engine.render(tpl, state).then(html => setState({...state, html}))
+  }, [state.clickCount])
+
+  return (
+    <div className="App">
+      <div dangerouslySetInnerHTML={{__html: state.html}}></div>
+      <Context.Provider
+        value={{
+          count: () => setState({...state, clickCount: state.clickCount + 1})
+        }}
+      >
+        <ClickButton/>
+      </Context.Provider>
+    </div>
+  );
+}