Cards Project

A small React project built to practice map() and arrow functions by rendering multiple profile cards from a data array.

Overview

This project displays user cards dynamically using React components. Instead of creating each card manually, the app reads data from a separate file and uses .map() to render each card on the screen.

This project helped me understand how to build reusable UI components and connect data with the user interface.

What I Learned

• How to use map() in React
• How arrow functions work inside components
• How to pass data using props
• How to separate data from UI logic
• How to create reusable card components
• Basic project structure in React

Tech Used

• React
• Vite
• JavaScript
• Tailwind CSS

Project Structure

• App.jsx handles rendering the list of cards
• data.jsx stores the user data in an array
• card.jsx is the reusable card component

How It Works

1. User data is stored in an array inside data.jsx
2. App.jsx imports that data
3. map() is used to loop through the array
4. Each item is passed as props to the Card component
5. The Card component displays the user details on the screen

Run Locally

npm install
npm run dev