<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
const {useState} = React
function Welcome(props) {
  const [sayHiTimes, setSayHiTimes] = useState(1);
  return (
    <div>
      <h1>
      Hi, 我是 {props.name},Say Hi {sayHiTimes} 次
      </h1>
     <input type="button" value="Say Hi!" onClick={()=> {
          setSayHiTimes(sayHiTimes+1)
          console.log(sayHiTimes)
        }} />
    </div>
    
  
  ); 
  
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Hobby"></Welcome>;
root.render(element);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js