🚀 React Router Tutorial

An interactive and beginner-friendly React project that demonstrates the core concepts of React Router with clean layouts using Tailwind CSS and DaisyUI. This tutorial-style project focuses on dynamic routing, navigation hooks, context sharing, and form handling with both controlled and uncontrolled components.

---

📘 Description

This project is designed to help new and intermediate React developers master React Router in a real-world environment. With a clear folder structure, educational comments, and animated UI components, this app provides practical experience building multipage applications — just like in production.

You'll navigate between users, load API data with loaders, handle dynamic parameters, display user-friendly 404 errors, and share data with the Context API — all wrapped in a beautifully responsive layout styled with Tailwind CSS and DaisyUI.

---

🛠️ Technologies Used

• ⚛️ React
• 🔀 React Router DOM (v6+)
• 🎨 Tailwind CSS
• 🌼 DaisyUI
• 🧠 Context API
• 📦 Vite

---

✨ Key Features

1. Dynamic Routing & Navigation

   • Includes practical use of useNavigate(), useParams(), useLoaderData(), and custom error handling.
   • Both <NavLink> and useNavigate() are used to demonstrate different navigation techniques.

2. Form Handling with useRef()

   • Demonstrates how to manage uncontrolled components using useRef(), including focusing inputs and retrieving values without React state.

3. Global State with Context API

   • Shares data from “GrandFather → Dad” components using createContext() and useContext() to help illustrate scoped context usage clearly.

---

Feel free to fork this repository and customize it into your own learning playground!

💡 Want a guided tour of the components or a breakdown of advanced hooks? Check out the inline comments throughout the codebase — every concept is clearly explained.

---

🎯 How to Use - Clone the repository

git clone https://github.com/KINGALVI/advance-React-tutorial.git