\newline

Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials
Pricing

Go Pro

This video is available to students only

Fullstack React with TypeScript Masterclass

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Introduction

Lesson 1: (3:47)

Course introduction

Lesson 2: (1:57)

How to get the most out of this course

Lesson 3: (3:07)

What is TypeScript? An Intro to Using Types in Your Code

Lesson 4: (3:21)

The Best Reasons to Use TypeScript With React—and a Caution

Module 2: Your First React and TypeScript Application: Building Trello with Drag and Drop

Lesson 1: (0:54)

Introduction

Lesson 2: (2:13)

What we are building and prerequisites

Lesson 3: (15:09)

How to Bootstrap a React TypeScript App With create-react-app

Lesson 4: (1:29)

How to Define Global Styles in a React App

Lesson 5: (2:10)

Style React Elements With CSS, Element Styles, and Libraries

Lesson 6: (4:22)

How to Define Styled Components in React

Lesson 7: (4:42)

How to Create a React Column Component Layout

Lesson 8: (0:53)

How to Create a Card in React With Styled Components

Lesson 9: (5:16)

Build a Button That Turns Into a Text Field to Add New Items

Lesson 10: (3:22)

How to Create a React Form Component

Lesson 11: (3:40)

How to Automatically Focus on Input Fields With React refs

Lesson 12: (1:50)

How to Submit New Items on Enter With React onKeyPress

Lesson 13: (4:44)

A useReducer Guide: How to Add Interactivity With React Context

Lesson 14: (8:17)

How to Implement React Global State With useContext

Lesson 15: (11:36)

Define Business Logic in a React App With Actions and Reducers

Lesson 16: (3:37)

How to Create Movable Elements in a React App

Lesson 17: (1:24)

How to Build Drag-and-Drop Components With React DnD

Lesson 18: (1:41)

How to Store a Drag-and-Drop Item's State in React AppState

Lesson 19: (1:43)

Building Drag-and-Drop Logic in React With DnD's useDrag Hook

Lesson 20: (2:20)

How to Build a Draggable React Column Layout

Lesson 21: (3:03)

How to Hide an Original Element While Dragging it in React

Lesson 22: (8:40)

Build a Custom React Element to Preview While Dragging in DnD

Lesson 23: (5:17)

How to Build a Drag-and-Drop Card Interface in React

Lesson 24: (2:31)

How to Update State in a React Reducer to Store Moved Items

Lesson 25: (1:33)

How to Move Drag-and-Drop Cards Into Empty Columns

Lesson 26: (7:51)

How to Save React Element State on the Backend Server

Lesson 27: (11:10)

An Intro to Building React APIs and Higher Order Components

Module 3: How to Test Your Applications: Testing a Digital Goods Store

Lesson 1: (0:34)

How to test your applications: testing a digital goods store introduction

Lesson 2: (6:00)

Get familiar with the application

Lesson 3: (3:38)

Initial setup

Lesson 4: (3:05)

Best Practices to Test a React App Component With Callbacks

Lesson 5: (2:32)

How to Mock React Components For Testing

Lesson 6: (4:03)

How to Test React Navigation Components With Jest Helper

Lesson 7: (2:27)

How to Write Routing Tests to Test React Navigation

Lesson 8: (8:38)

How to Test React Shared Components

Lesson 9: (8:00)

How to Test a React Home Page With Jest

Lesson 10: (5:02)

How to Test a React Card Component and Multi-State Buttons

Lesson 11: (8:56)

How to Test an eCommerce Cart React Component

Lesson 12: (2:46)

How to Test a Cart Item Component With a Remove Button

Lesson 13: (1:35)

How to Test a Checkout Product List React Component

Lesson 14: (6:42)

How to Test a Checkout Form React Component

Lesson 15: (3:24)

How to Test React Form Fields With Normalization Functions

Lesson 16: (4:03)

How to Test an Order Summary Page in React

Lesson 17: (7:26)

How to Test Custom React Hooks With Testing Library

Lesson 18: (10:39)

How to Test a useCart React Hook With Multiple Functions

Module 4: Patterns in React TypeScript Applications: Making Music with React

Lesson 1: (0:23)

Patterns in React TypeScript applications: making music with React introduction

Lesson 2: (0:54)

What we're going to build

Lesson 3: (6:17)

Bootstrap a React App With Footer, Header, and CSS Variables

Lesson 4: (9:02)

A Bit of Music Theory to Build MIDI Notes in React

Lesson 5: (4:09)

Build a Keyboard App With a React Hook and the Web Audio API

Lesson 6: (3:23)

Building a React Keyboard App With Custom Audio API Hooks

Lesson 7: (8:26)

Code a Keyboard in React and Compose Classes with clsx

Lesson 8: (8:13)

Add Soundfont and AudioContext to a React Adapter Hook

Lesson 9: (4:32)

How to Handle Keypress Events in a React Piano Keyboard

Lesson 10: (6:17)

How to Map Physical Keys to React Buttons

Lesson 11: (2:19)

Dynamically Load Soundfont Instruments With React Context

Lesson 12: (4:05)

Build a Soundfont Instrument Selector in React

Lesson 13: (1:22)

How to Load Soundfont Instruments in a React App

Lesson 14: (2:15)

An Intro to Render Props: Functions That Return React Elements

Lesson 15: (4:57)

How to Create Render Props With Functional React Components

Lesson 16: (10:04)

How to Create Render Props With TypeScript Classes

Lesson 17: (5:23)

An Intro to React Higher-Order Components or HOCs

Lesson 18: (8:04)

How to Build a React Higher-Order Component

Lesson 19: (2:36)

Pass Refs Through Higher-Order Components With forwardRef

Lesson 20: (3:03)

Define What to Load Before Rendering With Static Composition

Lesson 21: (2:25)

How to Use Hooks With Higher-Order Components

Module 5: Using Redux and TypeScript

Lesson 1: (0:48)

Using Redux and TypeScript introduction

Lesson 2: (2:56)

Using Redux and TypeScript preview the final result

Lesson 3: (5:44)

What is Redux? An Intro to React State Management

Lesson 4: (3:00)

How to Add Redux and TypeScript to React

Lesson 5: (1:36)

Redux Logger: How to Monitor Problems in React Redux Apps

Lesson 6: (1:24)

How to Style a React Redux App Like Windows XP With XP.css

Lesson 7: (4:58)

How to Use the Canvas API to Draw in a React Redux App

Lesson 8: (0:53)

How to Handle Canvas API Events in React

Lesson 9: (1:00)

Define the Store Type

Lesson 10: (2:01)

Add Actions

Lesson 11: (1:50)

Add the Reducer Logic

Lesson 12: (2:20)

How to Dispatch Actions With Redux

Lesson 13: (3:54)

Update Canvas With Redux Actions to Draw Strokes

Lesson 14: (4:22)

How to Build a Redux Color Selector

Lesson 15: (6:57)

How to Add Undo and Redo to a React Redux App

Lesson 16: (12:49)

How to Split Reducers and Use combineReducers in Redux

Lesson 17: (6:48)

How to Export an Image From a React Redux App

Lesson 18: (3:01)

Simplify React Redux Development With Redux Toolkit

Lesson 19: (5:41)

How to Use Redux Toolkit createAction to Simplify Actions

Lesson 20: (4:20)

How to Update Redux Reducers With createReducer

Lesson 21: (7:19)

Automatically Generate Action Creators With createSlice

Lesson 22: (2:00)

How to Create a Modal Window With React Redux

Lesson 23: (3:26)

How to Manage Modal Window Components in Redux

Lesson 24: (1:34)

Prepare the Redux Server for Deployment

Lesson 25: (8:05)

How to Save Files to a React Server With Thunks

Lesson 26: (8:36)

How to Load Project Files From a React Redux Server

Module 6: Static Site Generation and Server-Side Rendering Using Next.js

Lesson 1: (0:45)

Static Site Generation and Server-Side Rendering using Next.js introduction

Lesson 2: (2:56)

Generating pages on the backend using Next.js

Lesson 3: (1:59)

Creating the first page

Lesson 4: (4:49)

Basic application layout

Lesson 5: (2:46)

Custom document component

Lesson 6: (2:28)

Application theme

Lesson 7: (2:01)

Custom App component

Lesson 8: (5:24)

Front page

Lesson 9: (1:50)

The 404 page

Lesson 10: (1:25)

Post page template

Lesson 11: (5:48)

Backend API server

Lesson 12: (1:36)

Frontend API client

Lesson 13: (3:46)

Updating the main page

Lesson 14: (8:02)

Pre-Render the post page

Lesson 15: (7:14)

The category page

Lesson 16: (1:59)

Adding breadcrumbs

Lesson 17: (3:30)

Comments and Server-Side Rendering

Lesson 18: (5:46)

Components to render comments

Lesson 19: (2:14)

API for adding comments

Lesson 20: (1:37)

Adding comments to a page

Lesson 21: (11:28)

Connecting Redux

Lesson 22: (5:28)

Optimizing images

Lesson 23: (1:30)

Building the project

Lesson 24: (8:50)

Remaking the API

Lesson 25: (4:16)

Creating client requests

Lesson 26: (2:16)

Updating pages

Lesson 27: (2:53)

Deploying with serverless functions

Module 7: GraphQL, React, and TypeScript

Lesson 1: (1:50)

GraphQL, React, and TypeScript introduction

Lesson 2: (2:00)

GraphQL, React, and TypeScript. What we are building

Lesson 3: (1:39)

Authenticate in GitHub and preview the final result

Lesson 4: (2:42)

Setting up the project

Lesson 5: (2:34)

Running the application

Lesson 6: (5:11)

Get the auth code

Lesson 7: (4:44)

Auth flow link

Lesson 8: (0:49)

Authentication context

Lesson 9: (2:36)

GraphQL queries - getting the user data

Lesson 10: (12:12)

Adding helper components

Lesson 11: (1:17)

Defining the WelcomeWindow layout

Lesson 12: (1:15)

Getting GitHub GraphQL schema

Lesson 13: (1:18)

Generating the types

Lesson 14: (2:23)

Adding routing

Lesson 15: (5:28)

Implement navigation

Lesson 16: (3:11)

Repositories main component

Lesson 17: (4:44)

Getting the list of repositories

Lesson 18: (6:44)

GraphQL mutations. Creating repositories

Lesson 19: (1:40)

Getting the repository ID

Lesson 20: (3:25)

Working with GitHub issues

Lesson 21: (2:21)

Getting the list of issues

Lesson 22: (7:06)

Creating an issue

Lesson 23: (1:46)

Working with GitHub pull requests

Lesson 24: (2:14)

Getting the list of pull requests

Lesson 25: (7:59)

Creating a new pull request

Module 8: Appendix

Module 9: Changelog

Lesson 1:

Revision 1p (09-03-2022)

Fullstack React with TypeScript Masterclass

Your First React and TypeScript Application: Building Trello with Drag and Drop

Build a Custom React Element to Preview While Dragging in DnD

Lesson
Discussion 0

This page is a preview of Fullstack React with TypeScript Masterclass

Previous Lesson:

How to Hide an Original Element While Dragging it in React

Next Lesson:

How to Build a Drag-and-Drop Card Interface in React

Start a new discussion. All notification go to the author.

Text

Contents

Prevent the column preview from hiding

Learn

Fullstack React
ng-book
Fullstack D3
Fullstack Node.js
Fullstack React Native
Fullstack Rust

Requests

Request a Course
Request a Site Feature

Community

Student stories
Community Discord

Masterclasses

Learnify: Learn advanced ASP.NET Core, Entity Framework Core and React
Tinyhouse: Fullstack React Masterclass
Fullstack Flask: Build a SaaS Masterclass
Fullstack D3 Masterclass
Fullstack React with TypeScript Masterclass

Tutorials

React Tutorials
Node.js Tutorials
Rust Tutorials

newline

Latest Book

Fullstack React with TypeScript

Learn this

Learn Pro Patterns for Hooks, Testing, Redux, SSR, and GraphQL

Get access to our free email tutorials

Terms of Service
Privacy

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack React with TypeScript Masterclass

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Introduction

Lesson 1: (3:47)

Course introduction

Lesson 2: (1:57)

How to get the most out of this course

Lesson 3: (3:07)

What is TypeScript? An Intro to Using Types in Your Code

Lesson 4: (3:21)

The Best Reasons to Use TypeScript With React—and a Caution

Module 2: Your First React and TypeScript Application: Building Trello with Drag and Drop

Lesson 1: (0:54)

Introduction

Lesson 2: (2:13)

What we are building and prerequisites

Lesson 3: (15:09)

How to Bootstrap a React TypeScript App With create-react-app

Lesson 4: (1:29)

How to Define Global Styles in a React App

Lesson 5: (2:10)

Style React Elements With CSS, Element Styles, and Libraries

Lesson 6: (4:22)

How to Define Styled Components in React

Lesson 7: (4:42)

How to Create a React Column Component Layout

Lesson 8: (0:53)

How to Create a Card in React With Styled Components

Lesson 9: (5:16)

Build a Button That Turns Into a Text Field to Add New Items

Lesson 10: (3:22)

How to Create a React Form Component

Lesson 11: (3:40)

How to Automatically Focus on Input Fields With React refs

Lesson 12: (1:50)

How to Submit New Items on Enter With React onKeyPress

Lesson 13: (4:44)

A useReducer Guide: How to Add Interactivity With React Context

Lesson 14: (8:17)

How to Implement React Global State With useContext

Lesson 15: (11:36)

Define Business Logic in a React App With Actions and Reducers

Lesson 16: (3:37)

How to Create Movable Elements in a React App

Lesson 17: (1:24)

How to Build Drag-and-Drop Components With React DnD

Lesson 18: (1:41)

How to Store a Drag-and-Drop Item's State in React AppState

Lesson 19: (1:43)

Building Drag-and-Drop Logic in React With DnD's useDrag Hook

Lesson 20: (2:20)

How to Build a Draggable React Column Layout

Lesson 21: (3:03)

How to Hide an Original Element While Dragging it in React

Lesson 22: (8:40)

Build a Custom React Element to Preview While Dragging in DnD

Lesson 23: (5:17)

How to Build a Drag-and-Drop Card Interface in React

Lesson 24: (2:31)

How to Update State in a React Reducer to Store Moved Items

Lesson 25: (1:33)

How to Move Drag-and-Drop Cards Into Empty Columns

Lesson 26: (7:51)

How to Save React Element State on the Backend Server

Lesson 27: (11:10)

An Intro to Building React APIs and Higher Order Components

Module 3: How to Test Your Applications: Testing a Digital Goods Store

Lesson 1: (0:34)

How to test your applications: testing a digital goods store introduction

Lesson 2: (6:00)

Get familiar with the application

Lesson 3: (3:38)