ReactGroundworkReact

Step 2 of 2 · your path

React, Beginner

Start with a component on the page. JSX, props, state and the handful of hooks that cover almost everything you'll build before anything else matters.

Start reading Change levelAll chapters

Your progress

0 / 11 done

Up next

Setup & JSX

5 min read · 2 exercises

The way11 chapters

The order I'd read them in

About 46 min of reading. Tick off what you've read, it is remembered on this device.

  1. Project setup & JSXJSX is not HTML and it is not a template language — it is a function call wearing a costume.
    5 min read2 exercises
    2 exercises
  2. Thinking in ReactTurning a picture into a component tree — the step that happens before you type anything.
    3 min read3 exercises
    3 exercises
  3. Components & compositionA component is a function that takes data and returns a description of a screen.
    4 min read3 exercises
    3 exercises
  4. PropsData flows down. A component can read its props and must never write to them.
    4 min read3 exercises
    3 exercises
  5. State with useStateState is memory between renders — and setting it is a request, not an assignment.
    5 min read5 exercises
    5 exercises
  6. Events & conditional renderingPass the function, do not call it — and know why && puts a zero on your page.
    4 min read6 exercises
    6 exercises
  7. Lists with .map() and keysA key is not for you and it is not for performance — it tells React which item is which.
    4 min read5 exercises
    5 exercises
  8. Controlled formsThe input shows what state says, and typing asks state to change.
    4 min read5 exercises
    5 exercises
  9. useEffect basicsFor synchronising with something outside React — and most of the time you do not need it.
    4 min read5 exercises
    5 exercises
  10. Lifting state up & basic stylingWhen two components need the same value, it belongs to the one above both of them.
    5 min read2 exercises
    2 exercises
  11. Guided project: a task boardEvery beginner chapter, in one app built end to end.
    4 min read5 exercises
    5 exercises

Practice38 exercises

Practice at this level

Every exercise opens in the editor with tests you can run.