Series · 8 parts
React Fundamentals
From JSX and components to State, Effect, Context, and rendering optimization — the core concepts that make up React, explained one by one against a web-development background.
- 01What Is React? — Declarative UI and the Idea of ComponentsWhat problem did React set out to solve, and why does the shift 'from imperative to declarative' matter so much? A look at React's core idea, framed against your web-development experience.
- 02JSX — It Looks Like HTML, but It's Actually JavaScriptA close look at JSX, the syntax React uses to describe the screen. Why it resembles HTML yet differs, what the curly braces do, and why you write className instead of class — framed against your web experience.
- 03Props — the Attributes a Parent Hands to a ChildA look at React's Props framed against HTML attributes. How they act like function arguments, destructuring, children, and why the rule 'Props are read-only' exists at all.
- 04State and useState — the Value a Component Remembers on Its OwnA look at React's State in contrast to Props. Why a plain variable won't do, why you receive useState as a const, and why you must always change the value through the setter.
- 05useEffect — Handling the Work Outside RenderingA look at React's useEffect, starting from the concept of a 'side effect.' How it differs from rendering, when each of the three dependency-array forms runs, and the common misunderstandings.
- 06The useEffect Cleanup Function — the Art of Undoing What You Turned OnWhen and why useEffect's cleanup function runs, laid out as a lifecycle. Including the real reason behind the commonly-misunderstood 'double run in development' (StrictMode).
- 07useRef — Remembering a Value Without Touching the ScreenA look at useRef, which unlike State doesn't trigger a re-render when it changes. How it differs from a plain variable and a module-level let, why you shouldn't read or write it during render, and its most common use — reaching into the DOM.
- 08Context — a Path to Hand Values to Distant ComponentsHow Context solves the fatigue of drilling Props down step by step. The three stages of createContext, Provider, and useContext — and when to use it versus when to hold back.