React Course

Course overview

Learn JavaScript and React together by building a TV watchlist app, one feature per lesson: components, state, hooks, and real data.

4 modules
30 lessons
Start the course
Part 1

JavaScript refresher

The JavaScript you need before React fundamentals. Scope, functions, objects and arrays, destructuring, and async work — practised on the same show data the app will render.

  1. let, const, and Scope

    Block scope, the temporal dead zone, and why var still causes surprises.

  2. Functions and Parameters

    Declarations versus expressions, default and rest parameters, and functions as values.

  3. Arrow Functions and this

    Concise function syntax, implicit returns, and how arrow functions change what this means.

  4. Working with Objects

    Property access, computed keys, nested data, and reading values that might not be there.

  5. Working with Arrays

    Indexes, length, searching, slicing, and the array of objects behind every list.

  6. Destructuring, Spread, and Rest

    Pulling values out of objects and arrays, and copying them without mutation.

  7. Array Methods: map, filter, reduce

    The transformations you will reach for in every list you render.

  8. Modules: import and export

    Named and default exports, and how a component file is wired together.

  9. Promises and async/await

    Asynchronous work, error handling, and the model behind data fetching.

Part 2

React fundamentals

The core of React: describe a page of shows as a function of data, and let React work out what to change on screen.

  1. Why React, and what we're building

    Declarative UI, and a tour of the watchlist app you will build lesson by lesson.

  2. Your first component

    Write a component, put values into JSX with braces, and render the first card of the watchlist.

  3. Passing props to a card

    Hand a component its data as props, and draw three different shows with one card component.

  4. Rendering a list of shows

    Turn an array of shows into cards with map, and give React a key it can trust.

  5. Showing only the good ones

    Hide the shows you would not watch, and put a badge on the ones you would.

  6. Splitting into files

    Give each component its own file, and wire the app back together with export and import.

Part 3

Making it interactive

Click a show card and watch it change: events first, then useState, snapshots, queued updates, and copying objects and arrays.

  1. Handling clicks

    Attach a click handler to a show card, and pass the function instead of calling it.

  2. Passing handlers down

    Pass an onPlay handler from App through ShowCard into a Button.

  3. Propagation and defaults

    See why a click on Play also hits the card, and how to stop a link leaving the page.

  4. A component's memory

    Give a show card memory with useState, so Watched stays after the click.

  5. Render and commit

    Watch React re-run the card, compare the result, and apply only the difference.

  6. State as a snapshot

    See that a handler still reads the watched flag from the click, even after you set it.

  7. Queueing updates

    Queue several watched-count updates, and use an updater when the next value depends on the last.

  8. Updating objects in state

    Copy a show object with spread when you change a field, including a nested rating.

  9. Updating arrays in state

    Toggle watched on a list of shows by mapping to a new array, not by mutating.

Part 4

Building the watchlist

Search TVMaze, save shows, and organise the list — with the React you already know.

  1. The watchlist layout

    Give the watchlist a heading, a ShowList, and a count that follows the cards.

  2. The search box

    Keep the search field in state, and submit it without reloading the preview.

  3. Searching TVMaze

    Fetch matching shows when Search is pressed, and show loading, error, or cards.

  4. Adding a show

    Keep search results and the watchlist as two arrays, and copy a show into the list.

  5. Removing and duplicates

    Skip a show that is already saved, and take one off the list without mutating.

  6. The show details

    Select a saved show in state, and load extra fields from TVMaze when you ask.