graph LR Components["fa:fa-puzzle-piece Components"] Components -->|"Class Based"| ClassComp["fa:fa-cube Class Components"] Components -->|"Function Based"| FuncComp["fa:fa-function Function Components"] Components -->|"Manages"| State["fa:fa-database State"] State -->|"Component State"| UseState["fa:fa-box useState Hook"] State -->|"Complex State"| UseReducer["fa:fa-cogs useReducer Hook"] State -->|"Global State"| Context["fa:fa-sitemap Context API"] Effects["fa:fa-sync Side Effects"] Effects -->|"Lifecycle"| UseEffect["fa:fa-clock useEffect Hook"] Effects -->|"DOM Access"| UseRef["fa:fa-link useRef Hook"] Effects -->|"Performance"| UseMemo["fa:fa-memory useMemo/useCallback"] Concepts["fa:fa-lightbulb Concepts"] Concepts -->|"One-way"| DataFlow["fa:fa-arrow-down Data Flow"] Concepts -->|"Virtual"| VDOM["fa:fa-copy Virtual DOM"] Concepts -->|"UI Updates"| Reconciliation["fa:fa-sync Reconciliation"] Components -->|"Accepts"| Props["fa:fa-arrow-right Props"] Props -->|"Read Only"| Immutable["fa:fa-lock Immutable"] Props -->|"Can Be"| PropTypes["fa:fa-check-circle PropTypes"] Events["fa:fa-bolt Events"] Events -->|"Synthetic"| SyntheticEvents["fa:fa-random Synthetic Events"] Events -->|"Handlers"| EventHandlers["fa:fa-code Event Handlers"] Styling["fa:fa-paint-brush Styling"] Styling -->|"CSS"| CSS["fa:fa-file-code CSS Modules"] Styling -->|"Inline"| Inline["fa:fa-code Inline Styles"] Styling -->|"CSS-in-JS"| StyledComp["fa:fa-palette Styled Components"] Router["fa:fa-route Routing"] Router -->|"Client-Side"| RouterDOM["fa:fa-map React Router"] Router -->|"Navigation"| Navigation["fa:fa-compass useNavigate/Link"] Router -->|"Parameters"| Params["fa:fa-key useParams"] Forms["fab:fa-wpforms Forms"] Forms -->|"Controlled"| Controlled["fa:fa-sliders-h Controlled Components"] Forms -->|"Uncontrolled"| Uncontrolled["fa:fa-toggle-off Uncontrolled Components"] Forms -->|"Validation"| Validation["fa:fa-check-circle Form Validation"]