ここをみよ
my_react.html
<!DOCTYPE HTML>
<html>
<body>
<div id="my_react"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="my_react.js"></script>
</body>
</html>
my_react.js
'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'
);
}
}
const domContainer = document.querySelector('#my_react');
ReactDOM.render(e(LikeButton), domContainer);
本番用のスクリプトは、こちらを使う
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
minificationは、こちらを参照する。
なおJSXを使うためにはここを参照する。
0 件のコメント:
コメントを投稿