Introduction to ReactJS Components

This module helps you understand the core React concepts used to build your Gen-Z Carousel App. You’ll learn how the app is structured into components, how state handles image switching, how events are triggered on uploads and button clicks, and how animation is added using Framer Motion. By the end of this module, you’ll understand how everything fits together and why the app behaves the way it does.

React apps are built using components. These are JavaScript functions that return UI using JSX (a syntax that looks like HTML). Components help us split the UI into smaller, reusable pieces.

Your carousel app uses the following main components:

1. App.jsx

This is the root component of the entire app. It handles all the major logic:

• Uploading images
• Switching between slides
• Showing thumbnails
• Rendering animations
• Managing state

2. Carousel.jsx (optional version)

An optional separate component used in the Tailwind CSS version of the app. It manages similar logic but is styled using utility classes instead of custom CSS.

In the main app we built, we used App.jsx for everything to keep it simple.