React + Vite Learning Projects

This repository contains a series of React + Vite projects created to learn and practice
core React concepts, modern tools, and state management techniques.
Each project focuses on a specific topic to build a strong foundation in React development.

---

📂 Projects Overview

1️⃣ Vite Basics

• Learned how to create a React project using Vite and understood how it differs from create-react-app.
• Explored the .jsx file format and basic React project setup.

---

2️⃣ Counter App

• Practiced state management with the useState hook.
• Implemented button click events to increment and decrement a counter.
• Added conditional logic to prevent negative values.

---

3️⃣ Tailwind Setup

• Installed and configured Tailwind CSS with Vite + React.
• Learned how to use utility-first classes for styling.
• Explored props-based styling with Tailwind.

---

4️⃣ Background Color Changer

• Used useState and inline styles to dynamically change background color on button clicks.
• Practiced interactive UI updates in real time.

---

5️⃣ Password Generator

• Built a password generator with adjustable length, numbers, and special characters.
• Learned useCallback, useEffect, and useRef hooks.
• Implemented a copy-to-clipboard feature.

---

6️⃣ Currency Exchange

• Created a real-time currency converter using an external API.
• Learned to build custom hooks (useCurrencyInfo) and reusable components (InputBox).
• Practiced API fetching with the fetch method.

---

7️⃣ React Router

• Implemented multi-page navigation using React Router v6.
• Learned about nested routes, dynamic routes, and the Outlet component.
• Practiced creating a shared Layout for multiple pages.

---

9️⃣ Theme Switch (Context API)

• Built a light/dark mode theme switcher using Context API for global state.
• Learned why and when to use Context API instead of prop drilling.
• Compared Context API to Redux for small applications.

---

🔟 Todo App (Context API)

• Created a fully functional Todo App with add, edit, update, and delete features.
• Managed global state using Context API for efficient state sharing.

---

1️⃣1️⃣ Todo App (Redux)

• Rebuilt the Todo App using Redux for centralized state management.
• Learned to set up a Redux store, create actions and reducers,
  and use hooks like useSelector and useDispatch.
• Compared Redux with Context API for scalable applications.

---

🚀 Key Concepts Covered

• React Fundamentals: Components, JSX, Props, and State
• React Hooks: useState, useEffect, useCallback, useRef
• Global State Management: Context API vs Redux
• Routing: React Router v6 with nested and dynamic routes
• Styling: Tailwind CSS and inline styles
• API Integration: Fetching and using external data
• Building Reusable Components and Custom Hooks

---

💡 How to Run Any Project

1. Clone the repository:

   git clone <repo-url>