React Transition Group をCDNで読み込んで使う

はじめに

Reactを勉強中の者です。Reactのアニメーションライブラリである、React Transtion GroupをCDNで読み込んで使いたかったのですが、インストールした上でimportしてから使う方法しか詳しく書いておらず、少し困ったのでここに、私の行った解決策をまとめておきます。具体的なReact Transition Groupの使い方は書いておりませんので、以下の公式ドキュメント参照してください。

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初学者なもので効率の悪い書き方かもしれません。もっとよい方法がありましたら是非ご教授ください。