#はじめに
Reactを勉強中の者です。Reactのアニメーションライブラリである、React Transtion GroupをCDNで読み込んで使いたかったのですが、インストールした上でimportしてから使う方法しか詳しく書いておらず、少し困ったのでここに、私の行った解決策をまとめておきます。具体的なReact Transition Groupの使い方は書いておりませんので、以下の公式ドキュメント参照してください。
#やり方
##CDNでスクリプトを読み込む
React Transition Group のトップページにCDNのリンクがあるので、これをhtmlから読み込みます。ここではReact本体なども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>
<!-- React Transition Group を読み込む -->
<script src="https://unpkg.com/react-transition-group/dist/react-transition-group.js"></script>
##React Transition Groupのコンポーネントを使う
CDNで読み込んだ場合、使いたいコンポーネントごとにimportすることができなかったので、以下のように書きました。
<ReactTransitionGroup.Transition>
//アニメーションを適用したいコンポーネント
</ReactTransitionGroup.Transition>
#終わりに
JavaScript初学者なもので効率の悪い書き方かもしれません。もっとよい方法がありましたら是非ご教授ください。