📌 UseEffect Hook Fetch

🖥️ Demo | 📂 Project

Table of Contents

• Table of Contents
• ✨ Overview
• 📖 Description
• 🚀 Features
• 🗂️ Project Skeleton
• 🛠️ Built With
• ⚡ How To Use
• 📌 About This Project
• 🙏 Acknowledgements
• 📬 Contact

---

✨ Overview

A simple React app that fetches and displays a list of users using the useEffect hook.
Data is fetched from JSONPlaceholder API and displayed with avatars.

---

📖 Description

This project demonstrates:

• ⚛️ Using React functional components and hooks (useState, useEffect)
• 🌐 Fetching data from an external API (fetch)
• 🎨 Displaying dynamic data with mapping
• 🖼️ Using placeholder avatars with Pravatar

---

🚀 Features

• 🔄 Fetch users from API when component mounts
• 👤 Display each user’s name and avatar
• 🗂️ Responsive grid layout with Bootstrap classes
• ⚡ Error handling for failed fetch requests

---

🗂️ Project Skeleton

React UseEffect Hook
|
|----readme.md   
├── public
│     └── index.html
│  
├── src
│    ├── components
│    │       └── Users.jsx 
│    │
│    ├── App.js
│    ├── App.scss
│    ├── index.js
│    └── index.css
│
├── package.json
└── yarn.lock

---

🛠️ Built With

• React
• Bootstrap (grid layout & styling)
• JSONPlaceholder API
• Pravatar
• CSS3

---

⚡ How To Use

To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/Umit8098/React-Project-useeffect-hook-fetch.git

# Navigate into the project folder
$ cd React-Project-useeffect-hook-fetch

# Install dependencies
$ yarn  
$ yarn start

# or using npm
$ npm install
$ npm start

---

📌 About This Project

• Built for educational purposes.
• Demonstrates how to fetch data from an API in React using useEffect.
• Showcases mapping over data and rendering UI dynamically.

---

🙏 Acknowledgements

• Clarusway
• JSONPlaceholder
• Pravatar

---

📬 Contact

• GitHub @Umit8098

• Linkedin @umit-arat