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
| # | Session | Level | Status |
|---|---|---|---|
| 01 | Foundations & Core Concepts | 🟢 Beginner | ✅ |
| 02 | Virtual DOM, Lifecycle & Routing | 🟡 Intermediate | ✅ |
| 03 | Forms, Validation & UI Libraries | 🟡 Intermediate | ✅ |
| 04 | Browser Storage, Auth & Protected Routes | 🔵 Advanced | ✅ |
| 05 | Custom Hooks, Performance & SEO | 🔵 Advanced | ✅ |
| 06 | State Management | 🔴 Advanced | ✅ |
| 07 | Tailwind CSS | 🟢 From Zero To Hero | ✅ |
Click to Expand
- 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
- Read the sessions in order - each one builds on the previous.
- Type every code example yourself, don't copy-paste.
- For each hook or pattern, ask yourself: when would I actually use this?
- Review the interview questions at the end of each session.
- 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:
- Fork the repository.
- Create a new branch.
- Commit your changes.
- 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