const App = () => {
  const [str, setStr] = React.useState('Ray');
  const [num, setNum] = React.useState(0);
  const [bool, setBool] = React.useState(true);
  return (
    <div>
      <p>String Value：{ str }</p>
      <button type="button" onClick={ () => setStr('QQ') }>更改</button>
      <hr/>
      <p>Number Value：{ num }</p>
      <button type="button" onClick={ () => setNum(num + 1) }>更改</button>
      <hr/>
      <p>Boolean Value：{ bool.toString() }</p>
      <button type="button" onClick={ () => setBool(!bool) }>更改</button>
      <hr/>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);