#はじめに
公式Reactチュートリアルの「既存のウェブサイトにReactを追加する」というのがあります。
JavaScriptをscriptタグから読み込んで使うというReactの最もシンプルな使い方とあります。
このとき読み込まれるJavaScriptに使うコンポーネントを別ファイルから読み込ませたかったのですが、うまくいかなかったので、私の行った解決策をここにまとめたいと思います。
#解決策
手順を追って説明します。
##1. scriptタグのtype属性にmoduleと書く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- CDNでReactを読み込む -->
<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>
<!-- JSXをコンパイルしていない場合babelも読み込む必要があります -->
<!-- ココです -->
<script type="module" src="js/event-list.js"></script>
</body>
</html>
##2. コンポーネントのファイル
クラスを別ファイルに書き、エクスポートします。
LikeButton.js
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return "You liked this.";
}
return (
<button
onClick={() => {
this.setState({ liked: true });
}}
>
Like
</button>
);
}
}
// クラスをexport
export default LikeButton;
##3. importする
create-react-appで作ったReactアプリではimportするときの読み込み先のファイル名の拡張子「js」を省略できますが、この場合拡張子を省略してしまうと動きません。理由はよくわかりませんでしたが以下のようにすると動きました。
like-button.js
import LikeButton from "./LikeButton.js"; //読み込み元のファイル名の拡張子を省略しない
ReactDOM.render(
<LikeButton />,
document.getElementById("event-list-container")
);
#おわりに
要するに、
「scriptタグのtype属性をmoduleとする」
「importするとき拡張子を省略しない」
ということです。
初心者が試行錯誤したやり方ですので、よりよい方法などありましたら教えていただけると嬉しいです。
間違い等もご指摘ください。
読んでいただきありがとうございました。