"codepen.io"에서 테스트
JavaScript Preprocessor을 Babel로 설정하지않으면 실행되지않음

HTML

<div id="root"></div>

JS

import React, { useState } from "https://esm.sh/react";
import ReactDOMClient from "https://esm.sh/react-dom/client";
const a = ReactDOMClient.createRoot(document.querySelector("#root"));

1. useState,Onclick으로 숫자 증가

function A() {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>숫자 : {number}</div>
      <button onClick={() => setNumber(number + 1)}>증가</button>
    </div>
  );
}
a.render(<A />);

결과:

2. useState,Onlick으로 글자 바꾸기

function A() {
  const [aaa, bbb] = useState("감나무");
  return (
    <div>
      <div>{aaa}</div>
      <button onClick={() => bbb("배나무")}>바꾸기</button>
    </div>
  );
}
a.render(<A />);

결과:

3.홀수 짝수

function App() {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>숫자 : {number}</div>
      <button onClick={() => setNumber(number + 1)}>증가</button>
      <div>{number % 2 == 0 ? "짝수" : "홀수"}</div>
    </div>
  );
}
a.render(<App />);