Facebook社によって開発されたReactですが、段階的にシステムに導入できるように設計されています。SPAで用いられることが多いですが、最小限のコンポーネントの利用だけでもできることをご存知でしょうか。
いきなり大規模にReactを使うとなるとハードルが高くとっつきにくいかと思いますので、まずは小さくはじめてみましょう。
既存のWEBサイトにReactを導入する
①Reactを描画するエリアを作る
まずはHTML要素に空のDiv要素を設けてReactが描画される場所を作ってあげます。要素にユニークなidを付与します。
<div id="like_button_container"></div>②scriptタグを埋め込む
reactを読み込み、後ほど作成するlike_button.jsというReactコンポーネントが記述されたファイルを読み込む。
<!--本番環境では、これを圧縮したproduction.jsを読み込む-->
<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>
<!-- Reactコンポーネントファイルを読み込む -->
<script src="like_button.js"></script>③Reactコンポーネントを作成する
'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'
);
}
}LikeButtonというコンポーネントが定義されています。LikeButtonをレンダリングするために①で作った空の要素に描画するコードを記述しましょう。class定義されている場所よりも下に記述するようにしましょう。
//描画する場所を指定
const domContainer = document.querySelector('#like_button_container');
//Reactコンポーネントをレンダリング
ReactDOM.render(e(LikeButton), domContainer);
Witten by Masa
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。