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.