1. react, react-dom

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello!"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("clicked"),
      },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>

2. babel

  <script type="text/babel">
    const root = document.getElementById("root");

    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello!
        </h3>
      );
    }
    const Button = () => {
      return (
        <button
          style={{ backgroundColor: "tomato" }}
          onClick={() => console.log("clicked")}
        >
          Click me
        </button>
      );
    };

    const Container = (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(Container, root);
  </script>

• JSX : javascript를 확장한 문법
• JSX를 HTML이 이해할 수 있도록 1번의 문법처럼 변환해줌.