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 ライブラリ
コメント