Websites & Frontend

React: Build apps with components

After JavaScript: build interfaces from components, with JSX, props, state, lists, forms and effects, like Instagram and Netflix do.

9 chapters · 36 lessons · free

Try a free lesson Create your free account

What you will learn

1. Hello, React

What React is, your first components, JSX, and JavaScript inside JSX.

  • Your first component Try it A component is a function with a capital name that returns JSX. createRoot(...).render(<App />) shows it.
  • A heading and a paragraph Exercise Several lines of JSX go inside return ( ... ), wrapped in one parent element.
  • JavaScript inside JSX Exercise { } in JSX shows the value of any JavaScript expression: a variable, a sum, a function call.
  • Two elements, no parent Debug Return one parent element. <> ... </> (a fragment) groups elements without an extra div.
  • Quick check Quiz Components, JSX, { } for JavaScript values, and one parent element.

2. The rules of JSX

className, styles as objects, and why every tag must close.

  • className, not class Exercise In JSX, className sets the CSS class (because class is a JavaScript word).
  • Style with an object Exercise style={{ ... }} takes an object with camelCase names: fontSize, backgroundColor...
  • The image that broke the page Debug In JSX every tag closes. Tags with no content close themselves: <img />, <input />, <br />.
  • Quick check Quiz className, style objects with camelCase, and closing every tag.

3. Props

Pass data into components, reuse them, and fill them with children.

  • A component with props Exercise Props pass data into a component: <Greeting name="Nova" /> and function Greeting({ name }).
  • Player cards Exercise Text props go in quotes, everything else in braces: level={12}.
  • A panel with children Exercise children is what is written between a component's tags. Show it with {children}.
  • The greeting that vanished Debug Component names must start with a capital letter; lowercase names are HTML tags.
  • Quick check Quiz Props pass data in, numbers in braces, children between the tags, and capital component names.

4. Lists and keys

Turn arrays into lists with map, give every item a key, and filter what to show.

  • A list with map Exercise array.map(item => <li key={...}>...</li>) turns data into a list. Every item needs a unique key.
  • A scoreboard Exercise Map a list of objects, and use each object's id as its key.
  • Only the best Exercise .filter(test).map(...) shows only the items you want.
  • The warning in the Console Debug Every item made by .map() needs a unique, stable key, like an id.
  • Quick check Quiz map, keys and filter.

5. State and events

Make pages that react to clicks: useState, onClick, counters and switches.

  • A counter Exercise useState gives a value and its setter; onClick runs code on a click; setting state redraws.
  • A light switch Exercise A true/false state with ! to flip it, and condition ? a : b to choose what to show.
  • Plus and minus Exercise Several buttons can change the same state, each with its own onClick.
  • The counter that does not count Debug Only state changes make React redraw. Plain variables are forgotten on every draw.
  • Quick check Quiz useState, setters that redraw, onClick, and the ? : choice.

6. Forms and input

Fields that follow typing, adding to lists, and forms that send without reloading.

  • A field that talks back Exercise A field in React: value={state} plus onChange={(e) => setState(e.target.value)}.
  • Add to the list Exercise Add to a state list with a new array: setItems([...items, newItem]).
  • A sign-up form Exercise <form onSubmit={...}> with event.preventDefault() handles sending without a page reload.
  • The item that does not appear Debug Do not change state in place (push, items[0] = ...); give the setter a new array or object.
  • Quick check Quiz onChange with e.target.value, new arrays with spread, and onSubmit with preventDefault.

7. Conditions and effects

Show things only when needed, and run code after drawing with useEffect: titles and loading data.

  • Show it only when... Exercise {condition && <X />} shows X only when true; {condition ? a : b} chooses between two.
  • Your first effect Exercise useEffect(fn, [deps]) runs fn after drawing, and again when a dependency changes.
  • Loading data Exercise Load data in useEffect(..., []), show a loading state until it arrives, then save it in state.
  • The mysterious 0 Debug Before && in JSX, use a real true/false (list.length > 0), not a number that can be 0.
  • Quick check Quiz && and ? : for showing, useEffect for work after drawing, and its dependency list.

8. React exam

Ten questions about everything in this course. Pass with 8 right answers.

  • The React exam Exam Components, JSX, props, lists, state, forms and effects.

9. Final project

Build a shopping list app with your own components, state, a form and a list. Then send it for review.

  • A shopping list app Final project Components, state, lists with keys and forms, together in one app: that is React.

How the course works

You learn by doing: each lesson explains one idea, then you write real code in the editor and see the result right away. The first lesson is free to try without an account; sign up to save your progress and continue.

  • Try it

    Change working code and see the result immediately.

  • Exercise

    Complete a task. A checklist confirms each requirement as you type.

  • Debug

    Fix code that is broken on purpose, and learn why it failed.

  • Quiz

    Check your understanding at the end of a chapter.

More in Websites & Frontend