Using TypeScript with React

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What is TypeScript and why we need it?

Lecture 3: Installing TypeScript globally and locally

Lecture 4: Common TypeScript compiler and tsconfig options

Chapter 2: TypeScript

Lecture 1: TypeScript Section Introduction

Lecture 2: A note regarding the next lecture for students who use Windows

Lecture 3: Setting Up a Simple TypeScript Project

Lecture 4: Modules

Lecture 5: Types

Lecture 6: Interfaces

Lecture 7: Functions

Lecture 8: Classes

Lecture 9: ECMAScript Private Fields

Lecture 10: Implementing Interfaces

Lecture 11: Describing Classes Using Interfaces

Lecture 12: Generics

Lecture 13: Union Type

Lecture 14: Intersection Type

Lecture 15: Type Alias

Lecture 16: Using External Packages and Their Types

Lecture 17: Declaration Merging

Lecture 18: Utility Types

Lecture 19: Mapped Types

Lecture 20: Conditional Types

Lecture 21: TypeScript Tips

Chapter 3: TypeScript With React

Lecture 1: Section info

Lecture 2: TypeScript with React Section Introduction

Lecture 3: What is webpack?

Lecture 4: Setting up a webpack project

Lecture 5: TypeScript setup options

Lecture 6: Setting up TypeScript using ts-loader

Lecture 7: Setting up TypeScript using babel-loader

Lecture 8: Adding React

Lecture 9: Adding a source map

Lecture 10: Function components

Lecture 11: Setting up CSS Modules

Lecture 12: Importing SVGs – adding a logo

Lecture 13: Class components

Lecture 14: Handling events using React

Lecture 15: Using React context and the useState hook

Lecture 16: Replacing setState with useReducer

Lecture 17: Store cart data in local storage (useEffect hook)

Lecture 18: Creating a Higher Order Component – part 1

Lecture 19: Creating a Higher Order Component – part 2

Lecture 20: Creating a Render Props component

Lecture 21: Creating a custom hook

Lecture 22: Handling original DOM events

Chapter 4: Building a React Redux App

Lecture 1: Building a React Redux App Section Introduction

Lecture 2: What if you haven't used Redux before?

Lecture 3: Initial Setup

Lecture 4: Setting Up a Fake Server

Lecture 5: Setting Up Redux

Lecture 6: Creating the Recorder Component

Lecture 7: Creating the Event List Component

Lecture 8: Loading Events – Part 1

Lecture 9: IMPORTANT – please read this lecture before continuing to the next one

Lecture 10: Loading Events – Part 2 (using connect)

Lecture 11: Creating Events

Lecture 12: Deleting Events

Lecture 13: Editing Titles

Lecture 14: Useful Links

Chapter 5: Building the Tasks App

Lecture 1: Building the Tasks App Section Introduction

Lecture 2: Resources to help you get started with Next.js (Optional)

Lecture 3: Section tips (Optional)

Lecture 4: Setting up a Next.js project with TypeScript

Lecture 5: Explaining the tsconfig options

Lecture 6: Explaining the esModuleInterop option

Lecture 7: Important: library updates. Please read this article first

Lecture 8: Setting up the GraphQL API route

Lecture 9: Setting up a local MySQL server

Lecture 10: Creating resolvers for the "tasks" query and "createTask" mutation

Lecture 11: Adding GraphQL code generator for the back end

Lecture 12: Finishing the GraphQL API

Lecture 13: Setting up Apollo Client

Lecture 14: Generating types for the front end

Lecture 15: Adding styles

Lecture 16: Adding the form for creating tasks

Lecture 17: Running the "createTask" mutation

Lecture 18: Adding the form for updating tasks

Lecture 19: Running the "updateTask" mutation