현재 문서는 아래 메뉴얼의 일부분을 간단하게 축약시켜 놓았으니 모든 내용을 확인하시려면 메뉴얼을 확인해보세용.
'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>
<script src="like_button.js" type="text/babel"></script>