HTML + react 샘플

HTML에 react를 직접 추가할 때의 예시 코드를 기술한 페이지

현재 문서는 아래 메뉴얼의 일부분을 간단하게 축약시켜 놓았으니 모든 내용을 확인하시려면 메뉴얼을 확인해보세용.

웹사이트에 React 추가 – Reactko.legacy.reactjs.org

'use strict';
const e = React.createElement;
// 좋아요 버튼
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// id값이 like_button_container인 요소 선택후 reactDom생성
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

  <!-- ... 다른 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>

  <!-- 좋아요 버튼.js 추가 -->
  <script src="like_button.js"></script>

  <!-- 좋아요 버튼을 추가할 html요소     -->
  <div id="like_button_container"></div>
</body>

만약 jsx문법을 사용하고 싶다면 jsx문법을 js로 변환해주는 처리기가 필요합니다.

아래 스크립트를 통해 CDN방식으로 바벨 JS전처리기를 다운로드 합니다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

이후JSX문법이 사용된 js파일을 불러올때 type="text/babel"로 불러오시면 됩니다.

  <script src="like_button.js" type="text/babel"></script>