Typescript with modern React (i.e. hooks, context, suspense)

Adding typescript to a modern react project with hooks (useState, useContext, useEffect) and code splitting with lazy.
Rating: 4.3 out of 5 (1,005 ratings)
17,824 students
Typescript with modern React (i.e. hooks, context, suspense)
Rating: 4.3 out of 5 (1,005 ratings)
17,824 students
How to use Typescript with their modern React project
Understand how to set up typescript with create-react-app as well as babel and webpack
Feel comfortable using hooks for state and lifecycle


  • Have a basic understanding of Javascript and React
  • Be comfortable using the terminal or command prompt

In this course you will learn how to add typescript to a create-react-app project as well as adding it to a react project from scratch with webpack and babel. You will learn a bit about react hooks, (useState, useContext, useReducer and useEffect), in a react typescript project as well as using suspense to lazy load a component. We will also attempt to recreate redux, (or the redux principles) with useReducer and Context.

This course is at an intermediate/advance level and assumes you have used React and Redux before, however you don't need to know any typescript for this.

Who this course is for:
  • Front end developers who want to level up their knowledge of React and Typescript
  • Developers who want to know a bit more about using hooks
5 sections • 26 lectures • 3h 23m total length
  • Introduction Video
  • Course Overview
  • Tools and plugins used (optional)
  • What is typescript and why use it
  • Adding typescript to create-react-app
  • Adding typescript to react with babel and webpack
  • Adding typescript to react with babel and webpack part 2
  • Quick look into a type definition file (optional)
  • The useState hook and the type alias
  • The difference between and type and interface
  • Removing todos and finishing off our app
  • Cheeky plug
  • A run-through of react context (optional)
  • Introduction to the Redux principles
  • The useReducer hook (optional)
  • Creating our reducer
  • Before the next video
  • Creating an action
  • Showing our store data
  • Adding a favourites button
  • Removing favourites
  • Lazy loading our episodes
  • Routing with Reach Router
  • Creating a file for our actions
  • Final bits of polish
  • Thanks and good luck

Front end Engineer at Octopus Labs
Richard Oliver Bray
  • 4.3 Instructor Rating
  • 1,005 Reviews
  • 17,808 Students
  • 1 Course

I love learning new things, but what I love more than learning is teaching people the things I've learnt. Seeing their faces when they get it like a lightbulb goes on in their head.

Currently, I'm creating videos and writing articles about the popular Facebook library (or framework) React, and how that can be used with Typescript, however, my desire is to move on to other programming languages, especially those that focus on game development.