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 view all books →
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
Explore new Communities Join our Discord Server What Our Students Say
Tutorials
Pricing

Welcome to

Fullstack React with TypeScript Masterclass

Module 1

Introduction

4 Lessons 12 Minutes

01Course introduction
Sneak Peek00:03:47
02How to get the most out of this course
Sneak Peek00:01:57
03What is TypeScript? An Intro to Using Types in Your Code
Sneak Peek00:03:07
04The Best Reasons to Use TypeScript With React—and a Caution
Sneak Peek00:03:21

Module 2

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

27 Lessons2 Hours 1 Minutes

01Introduction
Sneak Peek00:00:54
02What we are building and prerequisites
Sneak Peek00:02:13
03How to Bootstrap a React TypeScript App With create-react-app
Sneak Peek00:15:09
04How to Define Global Styles in a React App
Sneak Peek00:01:29
05Style React Elements With CSS, Element Styles, and Libraries
Sneak Peek00:02:10
06How to Define Styled Components in React
Sneak Peek00:04:22
07How to Create a React Column Component Layout
Sneak Peek00:04:42
08How to Create a Card in React With Styled Components
Sneak Peek00:00:53
09Build a Button That Turns Into a Text Field to Add New Items
Sneak Peek00:05:16
10How to Create a React Form Component
Sneak Peek00:03:22
11How to Automatically Focus on Input Fields With React refs
Sneak Peek00:03:40
12How to Submit New Items on Enter With React onKeyPress
Sneak Peek00:01:50
13A useReducer Guide: How to Add Interactivity With React Context
Sneak Peek00:04:44
14How to Implement React Global State With useContext
Sneak Peek00:08:17
15Define Business Logic in a React App With Actions and Reducers
Sneak Peek00:11:36
16How to Create Movable Elements in a React App
Sneak Peek00:03:37
17How to Build Drag-and-Drop Components With React DnD
Sneak Peek00:01:24
18How to Store a Drag-and-Drop Item's State in React AppState
Sneak Peek00:01:41
19Building Drag-and-Drop Logic in React With DnD's useDrag Hook
Sneak Peek00:01:43
20How to Build a Draggable React Column Layout
Sneak Peek00:02:20
21How to Hide an Original Element While Dragging it in React
Sneak Peek00:03:03
22Build a Custom React Element to Preview While Dragging in DnD
Sneak Peek00:08:40
23How to Build a Drag-and-Drop Card Interface in React
Sneak Peek00:05:17
24How to Update State in a React Reducer to Store Moved Items
Sneak Peek00:02:31
25How to Move Drag-and-Drop Cards Into Empty Columns
Sneak Peek00:01:33
26How to Save React Element State on the Backend Server
Sneak Peek00:07:51
27An Intro to Building React APIs and Higher Order Components
Sneak Peek00:11:10

Module 3

How to Test Your Applications: Testing a Digital Goods Store

18 Lessons1 Hours 27 Minutes

01How to test your applications: testing a digital goods store introduction
Sneak Peek00:00:34
02Get familiar with the application
Sneak Peek00:06:00
03Initial setup
Sneak Peek00:03:38
04Best Practices to Test a React App Component With Callbacks
Sneak Peek00:03:05
05How to Mock React Components For Testing
Sneak Peek00:02:32
06How to Test React Navigation Components With Jest Helper
Sneak Peek00:04:03
07How to Write Routing Tests to Test React Navigation
Sneak Peek
08How to Test React Shared Components
Sneak Peek00:08:38
09How to Test a React Home Page With Jest
Sneak Peek00:08:00
10How to Test a React Card Component and Multi-State Buttons
Sneak Peek00:05:02
11How to Test an eCommerce Cart React Component
Sneak Peek00:08:56
12How to Test a Cart Item Component With a Remove Button
Sneak Peek00:02:46
13How to Test a Checkout Product List React Component
Sneak Peek00:01:35
14How to Test a Checkout Form React Component
Sneak Peek00:06:42
15How to Test React Form Fields With Normalization Functions
Sneak Peek00:03:24
16How to Test an Order Summary Page in React
Sneak Peek00:04:03
17How to Test Custom React Hooks With Testing Library
Sneak Peek00:07:26
18How to Test a useCart React Hook With Multiple Functions
Sneak Peek00:10:39

Module 4

Patterns in React TypeScript Applications: Making Music with React

21 Lessons1 Hours 38 Minutes

01Patterns in React TypeScript applications: making music with React introduction
Sneak Peek00:00:23
02What we're going to build
Sneak Peek00:00:54
03Bootstrap a React App With Footer, Header, and CSS Variables
Sneak Peek00:06:17
04A Bit of Music Theory to Build MIDI Notes in React
Sneak Peek00:09:02
05Build a Keyboard App With a React Hook and the Web Audio API
Sneak Peek00:04:09
06Building a React Keyboard App With Custom Audio API Hooks
Sneak Peek00:03:23
07Code a Keyboard in React and Compose Classes with clsx
Sneak Peek00:08:26
08Add Soundfont and AudioContext to a React Adapter Hook
Sneak Peek00:08:13
09How to Handle Keypress Events in a React Piano Keyboard
Sneak Peek00:04:32
10How to Map Physical Keys to React Buttons
Sneak Peek00:06:17
11Dynamically Load Soundfont Instruments With React Context
Sneak Peek00:02:19
12Build a Soundfont Instrument Selector in React
Sneak Peek00:04:05
13How to Load Soundfont Instruments in a React App
Sneak Peek00:01:22
14An Intro to Render Props: Functions That Return React Elements
Sneak Peek00:02:15
15How to Create Render Props With Functional React Components
Sneak Peek00:04:57
16How to Create Render Props With TypeScript Classes
Sneak Peek00:10:04
17An Intro to React Higher-Order Components or HOCs
Sneak Peek00:05:23
18How to Build a React Higher-Order Component
Sneak Peek00:08:04
19Pass Refs Through Higher-Order Components With forwardRef
Sneak Peek00:02:36
20Define What to Load Before Rendering With Static Composition
Sneak Peek00:03:03
21How to Use Hooks With Higher-Order Components
Sneak Peek00:02:25

Module 5

Using Redux and TypeScript

26 Lessons1 Hours 47 Minutes

01Using Redux and TypeScript introduction
Sneak Peek00:00:48
02Using Redux and TypeScript preview the final result
Sneak Peek00:02:56
03What is Redux? An Intro to React State Management
Sneak Peek00:05:44
04How to Add Redux and TypeScript to React
Sneak Peek00:03:00
05Redux Logger: How to Monitor Problems in React Redux Apps
Sneak Peek00:01:36
06How to Style a React Redux App Like Windows XP With XP.css
Sneak Peek00:01:24
07How to Use the Canvas API to Draw in a React Redux App
Sneak Peek00:04:58
08How to Handle Canvas API Events in React
Sneak Peek00:00:53
09Define the Store Type
Sneak Peek00:01:00
10Add Actions
Sneak Peek00:02:01
11Add the Reducer Logic
Sneak Peek00:01:50
12How to Dispatch Actions With Redux
Sneak Peek00:02:20
13Update Canvas With Redux Actions to Draw Strokes
Sneak Peek00:03:54
14How to Build a Redux Color Selector
Sneak Peek00:04:22
15How to Add Undo and Redo to a React Redux App
Sneak Peek00:06:57
16How to Split Reducers and Use combineReducers in Redux
Sneak Peek00:12:49
17How to Export an Image From a React Redux App
Sneak Peek00:06:48
18Simplify React Redux Development With Redux Toolkit
Sneak Peek00:03:01
19How to Use Redux Toolkit createAction to Simplify Actions
Sneak Peek00:05:41
20How to Update Redux Reducers With createReducer
Sneak Peek00:04:20
21Automatically Generate Action Creators With createSlice
Sneak Peek00:07:19
22How to Create a Modal Window With React Redux
Sneak Peek00:02:00
23How to Manage Modal Window Components in Redux
Sneak Peek00:03:26
24Prepare the Redux Server for Deployment
Sneak Peek00:01:34
25How to Save Files to a React Server With Thunks
Sneak Peek00:08:05
26How to Load Project Files From a React Redux Server
Sneak Peek00:08:36

Module 6

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

27 Lessons1 Hours 44 Minutes

01Static Site Generation and Server-Side Rendering using Next.js introduction
Sneak Peek00:00:45
02Generating pages on the backend using Next.js
Sneak Peek00:02:56
03Creating the first page
Sneak Peek00:01:59
04Basic application layout
Sneak Peek00:04:49
05Custom document component
Sneak Peek00:02:46
06Application theme
Sneak Peek00:02:28
07Custom App component
Sneak Peek00:02:01
08Front page
Sneak Peek00:05:24
09The 404 page
Sneak Peek00:01:50
10Post page template
Sneak Peek00:01:25
11Backend API server
Sneak Peek00:05:48
12Frontend API client
Sneak Peek00:01:36
13Updating the main page
Sneak Peek00:03:46
14Pre-Render the post page
Sneak Peek00:08:02
15The category page
Sneak Peek00:07:14
16Adding breadcrumbs
Sneak Peek00:01:59
17Comments and Server-Side Rendering
Sneak Peek00:03:30
18Components to render comments
Sneak Peek00:05:46
19API for adding comments
Sneak Peek00:02:14
20Adding comments to a page
Sneak Peek00:01:37
21Connecting Redux
Sneak Peek00:11:28
22Optimizing images
Sneak Peek00:05:28
23Building the project
Sneak Peek00:01:30
24Remaking the API
Sneak Peek00:08:50
25Creating client requests
Sneak Peek00:04:16
26Updating pages
Sneak Peek00:02:16
27Deploying with serverless functions
Sneak Peek00:02:53

Module 7

GraphQL, React, and TypeScript

25 Lessons1 Hours 29 Minutes

01GraphQL, React, and TypeScript introduction
Sneak Peek00:01:50
02GraphQL, React, and TypeScript. What we are building
Sneak Peek00:02:00
03Authenticate in GitHub and preview the final result
Sneak Peek00:01:39
04Setting up the project
Sneak Peek00:02:42
05Running the application
Sneak Peek00:02:34
06Get the auth code
Sneak Peek00:05:11
07Auth flow link
Sneak Peek00:04:44
08Authentication context
Sneak Peek00:00:49
09GraphQL queries - getting the user data
Sneak Peek00:02:36
10Adding helper components
Sneak Peek00:12:12
11Defining the WelcomeWindow layout
Sneak Peek00:01:17
12Getting GitHub GraphQL schema
Sneak Peek00:01:15
13Generating the types
Sneak Peek00:01:18
14Adding routing
Sneak Peek00:02:23
15Implement navigation
Sneak Peek00:05:28
16Repositories main component
Sneak Peek00:03:11
17Getting the list of repositories
Sneak Peek00:04:44
18GraphQL mutations. Creating repositories
Sneak Peek00:06:44
19Getting the repository ID
Sneak Peek00:01:40
20Working with GitHub issues
Sneak Peek00:03:25
21Getting the list of issues
Sneak Peek00:02:21
22Creating an issue
Sneak Peek00:07:06
23Working with GitHub pull requests
Sneak Peek00:01:46
24Getting the list of pull requests
Sneak Peek00:02:14
25Creating a new pull request
Sneak Peek00:07:59

Module 8

Appendix

0 Lessons

Module 9

Changelog

1 Lesson

01Revision 1p (09-03-2022)
Sneak Peek

Course introduction