To keep our code organized and tidy, we'll put each of the subcomponents ---
Pager -- into individual classes, each of which will live within their own file.
In your project, create files for
Dots, such that the
src/carousel directory looks like this:
- Carousel.js - Arrow.js - Pager.js - Dots.Js
Then, take a close look at the following diagram, which illustrates how each of the subcomponents are associated with the child nodes we created within the
As we add our class files, make sure you also uncomment/import them at the top of
Carousel.js. It's a good idea to always double-check the top of your modified files to ensure that all dependencies are loaded with
require() before calling them.