리액트

라이브러리로 프로젝트 원하는 곳에 추가하면 된다

1. HTML 파일에 DOM 컨테이너 설치
   body 태그 내 비어있는 div 태그에 id 속성을 준다

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

2. 스크립트 태그 추가

  <!-- ... 다른 HTML ... -->

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <!-- 만든 React 컴포넌트를 실행. -->
  <script src="like_button.js"></script>

</body>

처음 두 태그는 React를 실행시키고 3번째 코드는 만든 컴포넌트를 실행

3. 리액트 컴포넌트 만들기

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

npx는 오타가 아닙니다. — npm 5.2버전 이상에 내장된 패키지 실행 도구입니다.