Codepen and dependencies (React)

Hi:) ive got 2 questions the first relates with codepen and why it works the way it does with imports
instead of using :

import { Transition } from "react-transition-group"
import { Animation } from "./Animation"

i have to use

const {Transition} = ReactTransitionGroup

why is this? (i did however learn abit about destructering while trying to find out)
this makes it hard when im following a tutoiral to know what to do when i dont understand where the dependencies such as the animation one actually come from, Im guessing its something inside react and not seprate only due to the ./ would be nice to know

react-transition-group is the name of an npm package. When using npm, installed packages/modules can be imported via their name, and npm handles locating the appropriate files on your hard disk. Visit npm and read their docs for details.

“./” is a directly reference, namely the current directory. I can only guess about whatever tutorial you might be following, but the line as you’ve shared it suggests they have a local file in the current directory named Animation.js, thus they reference it in the import as “./Animation” → directory + filename.

Re: where specific components in a package come from, you can always look up the npm page or github or other documentation for the package youre using. The global variable a package exposes when included via html (eg ReactTransitionGroup) is generally what you’ll need to use on codepen.