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

This video is available to students only

Fullstack React with TypeScript Masterclass

WELCOMEIntroduction

Module 1: Introduction

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

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

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

Module 5: Using Redux and TypeScript

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

Module 7: GraphQL, React, and TypeScript

Module 8: Appendix

Module 9: Changelog

Fullstack React with TypeScript Masterclass

GraphQL, React, and TypeScript

Getting the list of pull requests

Lesson
Discussion 0

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

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

Request a Course
Request a Site Feature

Student stories
Community Discord

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

React Tutorials
Node.js Tutorials
Rust Tutorials

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)