A complete React & Tailwind CSS reference built from real sessions - covering everything from core concepts and hooks to state management, performance optimization, and utility-first styling. Designed for developers who want depth, not just syntax.

Hi, I'm Eng. Diaa Elseady, a Full Stack Developer specializing in:

• React.js
• Next.js
• Node.js
• Express.js
• NestJS
• MongoDB
• TypeScript

This is the second reference in the series - following the JavaScript & Bootstrap Complete Reference Guide.

It covers React from the ground up through advanced patterns, state management approaches, and Tailwind CSS - all written from scratch, structured from real sessions, and designed to be the only resource you need.

• 📖 Progressive learning path from fundamentals to advanced
• 💻 Real code examples from actual projects
• 🎯 Interview-focused explanations on every major topic
• ⚡ Covers React 19 features and the React Compiler
• 🧠 Deep dives into performance, state management, and auth patterns
• 🔥 Best practices and common pitfalls
• 🎨 Complete Tailwind CSS utility-first workflow
• 🚀 Beginner-friendly structure, senior-level depth

• SOLID Principles
• Imperative vs Declarative
• Array Methods (map, filter, reduce, find, forEach)
• MPA vs SPA
• Why Use a Framework
• How React Works
• JSX & JSX Rules
• React Fragments
• Props & Destructuring
• Images in React
• Hooks Overview
• useState

• Virtual DOM & Reconciliation
• Why List Items Need Keys
• Component Lifecycle (Mount, Update, Unmount)
• useEffect & its 3 Modes
• useRef
• React Router DOM
• Link, NavLink, useNavigate
• Nested Routing & Outlet
• Dynamic Routing & useParams
• Layout Components
• Axios (GET, POST, PUT, PATCH, DELETE)
• Axios Instance & Interceptors
• CSS Modules

• UI Component Libraries Overview (HeroUI, shadcn/ui, DaisyUI, Flowbite)
• Controlled Components
• Uncontrolled Components
• Controlled vs Uncontrolled (Interview Question)
• React Hook Form
• isSubmitting, isDirty, isValid, reset, watch, getValues, setValue
• Zod Schema Validation
• optional(), nullable(), safeParse(), refine()
• Connecting Zod with React Hook Form

• Local Storage vs Session Storage vs Cookies
• HTTP Only Cookies vs Browser Cookies
• JWT Tokens & Authentication Flow
• Where to Store Tokens (XSS vs CSRF)
• Children Prop
• Protected Routes (useEffect approach vs correct approach)
• AppProtectedRoutes & AuthProtectedRoutes
• Connecting Token to Axios Interceptors

• Custom Hooks (useFetch, useLocalStorage, useDebounce)
• useReducer
• action.payload
• Shopping Cart with useReducer
• React.memo
• useMemo
• useCallback
• memo + useMemo + useCallback Summary
• React Compiler (React 19)
• SEO in React (react-helmet-async)
• Detecting Offline Status

• Props Drilling Problem
• React Context (createContext, useContext, Provider)
• useReducer with Context
• Context Performance Problem & Context Splitting
• TanStack Query (React Query)
• useQuery, useMutation, QueryClient
• Stale Time, Cache Time, Refetch Behavior
• Redux Toolkit
• configureStore, createSlice, useSelector, useDispatch
• createAsyncThunk
• RTK Query
• createApi, builder.query, builder.mutation
• Cache Invalidation with Tags
• When to Use Each Tool

• What is Tailwind & Utility-First Approach
• Installation with Vite & React
• CSS Layers (@layer base, components, utilities)
• Responsive Design & Breakpoints
• Dark Mode
• Custom Values & Theme Configuration
• Flexbox & Grid Utilities
• Typography, Spacing, Colors
• Pseudo-classes (hover, focus, active, group, peer)
• Animations & Transitions
• Arbitrary Values

• React vs Vanilla JS — Why use a framework?
• Imperative vs Declarative — Which one is React and why?
• What is the Virtual DOM and how does it work?
• What is Reconciliation?
• Why does every list item need a key?
• What are the 3 phases of a component's lifecycle?
• What is the difference between useRef and useState?
• Controlled vs Uncontrolled Components
• What is Props Drilling and how do you solve it?
• Where should you store auth tokens and why? (XSS vs CSRF)
• What is the flash of wrong content bug in Protected Routes?
• What is the difference between useMemo and useCallback?
• When do you use useReducer instead of useState?
• What is Context's performance problem and how do you fix it?
• When do you use TanStack Query vs Redux Toolkit?
• createAsyncThunk vs RTK Query — when to use each?

✅ Beginners picking up React for the first time

✅ Junior developers preparing for interviews

✅ Mid-level developers looking to fill gaps

✅ Senior developers

✅ Anyone who already knows JavaScript and wants a structured React path

1. Read the sessions in order - each one builds on the previous.
2. Type every code example yourself, don't copy-paste.
3. For each hook or pattern, ask yourself: when would I actually use this?
4. Review the interview questions at the end of each session.
5. Come back to Session 06 (State Management) after building at least one project.

📦 react-tailwind-complete-reference-guide

├── assets/
│   └── banner.png
│
├── sessions/
│   ├── session-01-foundations.md
│   ├── session-02-vdom-lifecycle-routing.md
│   ├── session-03-forms-validation.md
│   ├── session-04-storage-auth.md
│   ├── session-05-custom-hooks-performance.md
│   ├── session-06-state-management.md
│   └── session-07-tailwind.md
│
└── README.md

• ✅ JavaScript & Bootstrap Reference
• ✅ React & Tailwind CSS Reference
• ✅ Next.js & TypeScript Reference
• 🚧 Node.js & Express.js Reference
• 🚧 NestJS Reference
• 🚧 MongoDB Reference

Contributions are always welcome!

If you'd like to improve this guide:

1. Fork the repository.
2. Create a new branch.
3. Commit your changes.
4. Open a Pull Request.

This project is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License (CC BY-NC-ND 4.0).

In simple terms:

• ✅ You can view, download, and share this guide freely
• ✅ You must give credit to the author (Eng. Diaa Elseady)
• ❌ You cannot use this guide for commercial purposes
• ❌ You cannot modify or distribute modified versions

For full license details, see the LICENSE file.

If you found this repository useful, please consider giving it a ⭐ Star.

It helps the guide reach more developers and motivates me to keep building free references for the community.

Made with passion by Eng. Diaa Elseady