html파일에 리액트 사용(노설치)

이태혁·2020년 6월 20일
0

React

목록 보기
1/1
post-custom-banner

아래 세줄을 html head에 포함시키면 된다

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/babel-standalone@6/babel.min.js">

차례대로

  • react
  • react-dom
  • babel

관련 소스들이다.

예시

<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src = "https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const e = React.createElement;

      class LikeButton extends React.Component {
          constructor(props) {
              super(props);
          }

          render() {
              return e('button', null, 'Like');
          }
      }
    </script>
    <script>
      ReactDOM.render(e(LikeButton), document.querySelector('#root'))
    </script>
  </body>
</html>
profile
back-end, cloud, docker, web의 관심이 있는 예비개발자입니다.
post-custom-banner

0개의 댓글