Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build a Notion Clone with React and TypeScript
Introduction
Project Demo (2:32)
Project FAQ
Exercise: Meet Your Classmates and Instructor
Project Resources
Set Your Learning Streak Goal
Introduction to React TypeScript!
What is TypeScript? (4:42)
Exercise: Play with TypeScript Playground
Why use TypeScript with React? (3:10)
Your First React TypeScript Application (16:58)
Exercise: Create Your First Application Using CodeSandbox
Creating React TypeScript Applications
Preparing Our Dev Environment
Prepare Dev Environment - Windows (7:28)
Prepare Dev Environment - MacOS (5:58)
Prepare Dev Environment - Linux
How to Set up a New Typescript Project (4:40)
TypeScript Configuration Options (4:24)
Exercise: Experiment with the TypeScript Configuration Options
Setting up React TypeScript Using App Generators (3:06)
Setting up React TypeScript App Using Create React App (4:44)
Setting up React TypeScript Apps Using Vite (10:31)
Setting up React TypeScript App Using Parcel (20:15)
Configure Webpack with TypeScript (18:15)
Configure ESLint and Prettier (8:35)
Adding Third Party Libraries (5:26)
Integrating with APIs (4:50)
Deploying an App (4:21)
Notion Clone: Creating The Project
What Are We Building? (2:32)
Overview: Creating the Project
Generate the App Scaffold (3:00)
Setup Supabase and Netlify (2:22)
Supabase Setup Continued (1:58)
Introduction to TypeScript
Types Basics (5:59)
What Types Does TypeScript Have? (4:10)
Exercise: Experiment with Types in the Playground
Creating Custom Types (4:08)
Arrays and Tuples (2:47)
Exercise: Using Arrays and Tuples
Type Aliases (1:23)
Union and Intersection Types (1:58)
Exercise: Using Union and Intersection Types
Interfaces (2:52)
Exercise: Using Interfaces
Enums (2:26)
Exercise: Using Enums
Functions (3:33)
Exercise: Using Functions
Parametric Types and Generics (4:08)
Exercise: Using Parametric Types and Generics
Utility Types (1:43)
Exercise: Utility Types
Advanced Type Manipulations (4:06)
Exercise: Advanced Type Manipulations
Using React with TypeScript
Identifying and Addressing Type Errors (2:07)
Using Props and State (2:52)
Using Hooks (2:24)
Handling Events (1:50)
Using Context (3:22)
Using Refs (3:54)
Exercise: Using Refs
Styling React Components (5:31)
Notion Clone: Basic Implementation
Overview: Basic Implementation
Define the Types (4:24)
Basic Implementation (2:22)
Cover Image Component (9:01)
Spacer Component (2:49)
Title Component (10:37)
Basic Node (20:10)
useFocusedNodeIndex Hook (7:49)
Page Component (11:48)
Render the Page and Test the App (1:36)
Notion Clone: Move State Management to Context
Overview: Move State Management to Context
Move State Management to Context (1:07)
Create the usePageState Hook (10:07)
Create AppStateContext (10:01)
Make the BasicNode - the AppStateContext (1:27)
Make the Page - the AppStateContext (2:01)
Notion Clone: Add Multiple Node Kinds
Overview: Add Multiple Node Kinds
Add Multiple Node Kinds (0:42)
Create NodeTypeSwitcher (5:31)
useOverflowsScreenBottom (4:49)
Create CommandPanel (13:48)
Render CommandPanel Inside the BasicNode (6:04)
Notion Clone: Dragging the Nodes
Overview: Make the Nodes Draggable
Make the Nodes Draggable (0:43)
Create the NodeContainer Component (6:43)
Reordering the Nodes (8:15)
React TypeScript Cookbook
Using HOCs (2:26)
Typing HOCs (3:01)
Using Render Props (2:22)
Notion Clone: Implement Authentication
Implement Navigation (3:27)
Overview: Implement Authentication
Create AuthSessionContext (12:39)
Create the Auth Page (7:50)
Create the Private Route Component (3:39)
Notion Clone: Save Data on the Backend
Overview: Saving Data on the Backend
Sync the State with the Backend (8:05)
Create the withInitialState HOC (16:04)
Create Page Node Component (10:47)
Create FileImage Component (6:23)
Update the Cover Component (7:06)
Create ImageNode Component (7:56)
Upload the Project to Netlify (1:04)
Testing React TypeScript Applications
Testing with Jest or Vitest and React Testing Library (3:00)
Setting Up Jest and React Testing Library (7:43)
Setting Up Vitest and React Testing Library (7:29)
Testing Components (2:56)
Testing Hooks (2:16)
Using Mocks (3:13)
Migrating Existing React Applications to TypeScript
Prepare the Project for Migration (4:24)
Migrate React Components (3:46)
Migrate React Hooks (3:08)
Update TypeScript Version (2:44)
Where To Go From Here?
Review This Project!
Cover Image Component
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures