HTML과 CSS로 구성된 간단한 웹 페이지에 반응 구성 요소를 추가하려면 어떻게해야합니까?

튜토리얼을 자세히 살펴보면 일부 "스타터 코드"위에 빌드된다는 것을 알 수 있습니다. 아래 스크린 샷에서 문서의 관련 부분을 빨간색으로 설명했습니다.

즉, Playground.js 파일은 다음과 같이 보일 것입니다.

'use strict';

const e = React.createElement;


// TODO: customise class
class ItemsCarouselPlayground 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'
    );
  }
}

ReactDOM.render(e(ItemsCarouselPlayground), 
  document.getElementById('page_contents'));