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"]