React練習(切り替わるボタン)

Reactの練習をします。

スポンサーリンク

コレです。

山と川が切り替わるボタンです。

コード

HTML

    <div id="like_button_container"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="react.js"></script>

CSS

#like_button_container > button
{
  width: 64px;
  line-height: 32px;
  border-radius: 4px;
  border: none;
  padding: 0 16px;
  color: #fff;
  background: #639;
}

JavaScript

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      //Display a "山" <button>
      return e(
        'button',
        { onClick: () => this.setState({ liked: false }) },
        '山'
      );
    }
     //Display a "川" <button>
     return e(
       'button',
       { onClick: () => this.setState({ liked: true }) },
       '川'
    );
  }
}
// domContainer = <div id="like_button_container"></div>
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

チュートリアル

既存のウェブサイトに React を追加する – React
ユーザインターフェース構築のための JavaScript ライブラリ

コメント

タイトルとURLをコピーしました