0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?