Skip to content
WANCODE
BM

▍Learn / React

Build Modern Interfaces

Learn React the practical way in a real in-browser React sandbox: components, JSX, props, state, events, lists, forms and effects — and finish by building a task manager.

12 published lessons 3.6 hIntermediate

Start the track

Free to start. No signup required.

  1. 01Thinking in ComponentsSee any interface as a tree of small, named building blocks — then split a real React page into components yourself.
  2. 02Your First React ComponentWrite function components that return JSX, learn why names must be capitalised, nest components, and share them between files.
  3. 03JSX ExplainedJSX looks like HTML but it's JavaScript. Learn curly-brace expressions, className, style objects, fragments — and what JSX compiles to.
  4. 04Props: Passing Data to ComponentsMake one component show different data with props: pass values, destructure them, set default values and wrap content with children.
  5. 05State: Components That RememberUse the useState hook to give components memory, understand re-rendering, and avoid the two classic state bugs: mutation and stale values.
  6. 06Event HandlingRespond to clicks and typing in React: onClick and onChange, passing handlers to child components, the event object, and your first controlled input.
  7. 07Conditional RenderingShow different UI for different situations with early returns, the ternary operator and && — and avoid the sneaky stray 0.
  8. 08Lists and KeysTurn arrays into UI with map(), learn why every item needs a stable key, and see what goes wrong when you use the index.
  9. 09Forms in ReactBuild a real sign-up form: controlled inputs, one state object for many fields, onSubmit with preventDefault, and friendly validation messages.
  10. 10Effects and Common PitfallsUse useEffect to sync with the world outside React — the tab title, timers, localStorage — with the right dependencies and cleanup, and know when not to use one.
  11. 11Component CompositionBuild UIs from small reusable pieces across files: wrap content with children, lift shared state up, and pass callbacks down.
  12. 12Build a Task ManagerCapstone: build a complete task manager — add, toggle, delete, filter, count what's left and save to localStorage — using everything from this track.