#2.0 Introduction

리액트와 리액트DOM링크를 html 스크립트로 추가한다.

리액트는 html에 html에 작성하지 않는다

리액트를 가장 어렵게 쓰는 방법은 elements를 만드는 것이다. 하지만 이걸 배우는 이유는 리액트의 본질을 이해하기 위해서이다.

리액트는 흥미로운 UI를 만들어주고 리액트돔은 리액트 엘레멘트를 html에 두는 역할을 한다.

리액트는 js를 작성해서 html을 완성한다.

<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"></script>
  <script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script>
  <script>
    const root = document.getElementById("root");
    const span = React.createElement(
      "span",
      { id: "sexy-span", style: { color: "red", fontSize: "20px" } },
      "Hello I'm a span"
    );
    ReactDOM.render(span, root);
  </script>

event react

<script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "gutton",
      {
        onClick: () => console.log("im clicked"),
        style: {
          backgroundColor: "tomato",
        },
      },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>

JSX

JSX(javascript syntex XML)는 js확장 문법이다. 리액트에서 제공하는 기능이기에 리액트와 같이 쓰면 좋다.

const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
or
const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello I'm a span"
    );