14 parts
Learn React from scratch: components, JSX, props, state, hooks, events, forms, and data fetching — with a live editor in every lesson.
What React is, the component mental model, and why it took over UI development, with a live React component you edit in the first minute.
8 min read
How JSX works in React: expressions in curly braces, attributes, fragments, and the rules that trip up beginners, with a live editor.
7 min read
Build reusable React components and pass data with props. Composition, children, and default values, with runnable live examples.
9 min read
Make React components interactive with useState: state vs props, updating state correctly, and re-renders, with a live counter example.
Respond to clicks, input and form events in React: event handlers, the synthetic event, and passing arguments, with runnable live examples.
Render arrays in React with map, and why keys matter for correct, fast updates, with clear, runnable live examples.
Show and hide UI in React: ternaries, the && operator, early returns, and clean patterns for conditional rendering, with a live editor.
6 min read
Build forms in React the right way: controlled inputs, handling change, simple validation, and submitting, with runnable examples.
Understand the useEffect hook: when effects run, the dependency array, and cleanup, without the usual confusion, with live code.
Load data from an API in React: fetch in useEffect, loading and error states, and avoiding common bugs, with a live example.
Extract and reuse logic with custom React hooks: the rules of hooks and a practical useLocalStorage example, runnable live.
Use React Context to share state across components without prop drilling. When to reach for it, when not to, and live code to try it out.
Write React that stays clean: composition over props soup, the children prop, and lifting state up. Practical patterns with examples.
Put it together: build a working React todo app with state, events, lists, and forms, fully editable live in your browser.
