Project Demo

Why use TypeScript with React

What is TypeScript

Your First React TypeScript Application

Prepare Dev Environment - Windows

How to Set up a New Typescript Project

TypeScript Configuration Options

Setting up React TypeScript Using App Generators

Setting up React TypeScript App Using Create React App

Setting up React TypeScript Apps Using Vite

Setting up React TypeScript App Using Parcel

Adding Third Party Libraries

Configure ESLint and Prettier

Configure Webpack with TypeScript

Integrating with APIs

Deploying an App

Generate the App Scaffold

Setup Supabase and Netlify

What Are We Building

Supabase Setup Continued

Types Basics

What Types Does TypeScript Have

Creating Custom Types

Type Aliases

Arrays and Tuples

Union and Intersection Types

Enums

Interfaces

Parametric Types and Generics

Functions

Utility Types

Advanced Type Manipulations

Identifying and Addressing Type Errors

Using Hooks

Handling Events

Using Context

Using Props and State

Using Refs

Styling React Components

Basic Implementation

Define the Types

Spacer Component

Cover Image Component

Title Component

Render the Page and Test the App

useFocusedNodeIndex Hook

Page Component

Basic Node

Move State Management to Context

Create the usePageState Hook

Make the BasicNode - the AppStateContext

Create AppStateContext

Make the Page - the AppStateContext

useOverflowsScreenBottom

Create NodeTypeSwitcher

Add Multiple Node Kinds

Render CommandPanel Inside the BasicNode

Create CommandPanel

Make the Nodes Draggable

Create the NodeContainer Component

Reordering the Nodes

Using HOCs

Typing HOCs

Using Render Props

Create the Auth Page

Create the Private Route Component

Create AuthSessionContext

Implement Navigation

Upload the Project to Netlify

Create FileImage Component

Sync the State with the Backend

Update the Cover Component

Create Page Node Component

Create ImageNode Component

Create the withInitialState HOC

Testing with Jest or Vitest and React Testing Library

Testing Components

Setting Up Vitest and React Testing Library

Setting Up Jest and React Testing Library

Testing Hooks

Using Mocks

Prepare the Project for Migration

Migrate React Components

Update TypeScript Version

Migrate React Hooks