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 Components

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.

Managing State with useState

React’s useState() hook is used to store dynamic values—anything that changes while the app runs.

In the carousel, we use two key state variables:

const [uploadedImages, setUploadedImages] = useState([]);

const [currentIndex, setCurrentIndex] = useState(0);

• uploadedImages stores the list of images that users upload.
• currentIndex stores the index of the currently displayed image.

When no images are uploaded, we fall back to showing the default images:

const images = uploadedImages.length > 0 ? uploadedImages : defaultImages;

This logic ensures that the carousel always has something to display.

Lesson 3: Handling Events

User actions like uploading files or clicking arrows are handled using event functions. For example, when users upload images, we run this function: 

const handleUpload = (e) => {
const files = Array.from(e.target.files).slice(0, 10);
const urls = files.map((file) => URL.createObjectURL(file));
setUploadedImages(urls);
setCurrentIndex(0);
};

This converts uploaded image files into URLs the browser can display. We also limit uploads to 10 images and reset the carousel to the first image.

Lesson 4: JSX and Styling

All UI in your carousel is written in JSX—React’s syntax extension that looks like HTML.

Example:

<div className="carousel">
<button className="nav-button" onClick={prevImage}>⟵</button>
<div className="image-container">
<motion.img ... />
</div>
<button className="nav-button" onClick={nextImage}>⟶</button>
</div>

The visual layout and colors are defined using regular CSS in index.css. We use:

• A dark background (#000) for the full app
• Neon cyan (#00eaff) for borders and text
• Smooth transitions on hover
• Circular buttons and rounded corners for a modern, friendly feel

If you’re using the Tailwind version (Carousel.jsx), the same design is created using utility classes.

To add smooth transitions between slides, we use Framer Motion’s AnimatePresence and motion.img.

<AnimatePresence mode="wait">  
<motion.img
key={images[currentIndex]}
src={images[currentIndex]}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }}
transition={{ duration: 0.6 }}
className="carousel-image"
/>
</AnimatePresence>

Here’s what each part does:

• initial: Sets the starting position and opacity before the image appears.
• animate: Defines how it enters.
• exit: Defines how it leaves when the image changes.
• transition: Controls how long the animation lasts.

Framer Motion handles the hard part—fading and sliding images in and out—making your app feel polished and smooth.