Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by building several apps including a Trello clone, a Medium-like website, testing with a digital-item e-comm app, and more!

Available now in two formats:

Self-paced, 10+ hour video Masterclass, including all example code, taught by Maksim Ivanov

500+ page eBook in PDF, epub and mobi including all example code

How The Course Works

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

Remote

Take the course anywhere

Self-paced

Take the course anytime

Structured

Learn in a cohesive fashion

Community

Learn with other students

 

Jonathan Reeves

Software Engineer at Penn Interactive

Fullstack React with TypeScript is a gem if you love TypeScript and are trying to figure out how to make it work with React. This book walks you through the pain points of getting TypeScript and React to play nice together. You will build some really awesome projects along the way to really hone in on the skills. If you are looking for a guide to all things TypeScript and React, look no further than Fullstack React with TypeScript.

👋 Hi I’m Maksim

I’m at Spotify where I build internal tools for the editors who provide curated content, e.g., sets of albums, handpicked podcast collections, and such.

I was formerly with Mojang building web services around Minecraft. I worked on player profile page, where the player could manage their account, payments and profile settings such as game skins, player names and such.

I also worked on Minecraft Dungeons landing page and user account pages. And also I worked on the payments gateway that is used to buy both Minecraft and Minecraft Dungeons.

React and Typescript were my primary tools at all of these positions.

In Fullstack React With Typescript, I'll share my experience with you. The course provides step-by-step instructions based on example applications. Each example is big enough to provide the scope for every Typescript functionality we’ll be using.”

👋 Hi, I’m Alex

I am a consultant at 0+X. I help clients with maintaining and developing their products. My favorite project with TypeScript is Tzlvt, a mobile app that helps users to save money.

In Fullstack React With TypeScript I will show you how we use TypeScript to model software systems that reflect real life problems more accurately and solve them more efficiently.”

What You Will Build

We'll work through a variety of React apps. By seeing the same ideas in multiple contexts, you'll be able to take the concepts to your own apps.

Build a Trello Clone

In this first module we start-in easy and build a slick, drag-and-drop Trello clone.

Learn how to:

  • Using types to define props - which let's us type-check our JSX (!)
  • Create functional components that use React hooks in Typescript
  • Create our own custom hooks - with types, of course
  • Find and install types for external libraries
  • Make network requests to load data and
  • Use React Context for easy data-sharing

Testing, testing. Is this thing on?

In this second module, we have the Goblin Store: a digital-item e-commerce app and we show how to test it using the popular react-testing-library.

In this module we:

  • Setup Jest and VSCode for testing
  • Create mocks (with correct types)
  • Define global scope variables in Typescript
  • Show how to use the global helpers with Jest and Typescript

If you want to get better at testing React apps -- with built-in editor integration! -- this module will be your guide.

Learn Common Patterns and Play music with React

In the third module, we look at some common React patterns and best practices and build a sweet midi keyboard along the way.

In this module we:

  • Learn advanced React patterns such as render props and Higher Order Components
  • How to build custom React hooks that adapt native browser APIs to be more React-y
  • How to properly type render props - and expose them for team use
  • How to use the web music API
  • How to create keyboard shortcuts for our React app

Generate Static Sites with Next.js

In this module, we'll look at Next.js and we'll build a Medium-like website where can pre-build the webpages and deliver a blazing-fast site experience.

In this module we look at:

  • How to get started with Next.js and it's concept of "pages"
  • Build dynamic routes using the Next.js router
  • Fetch data from a server to use for generating our pages
  • Handle missing pages with a custom 404 page
  • Serve static assets like images
  • ... all completely with TypeScript

Create a Drawing App with Redux

In this module we'll build a drawing application usingcanvas and Redux.

In this module we look at:

  • useReducer vs. Redux - when to use which
  • Handling canvas events
  • Implementing Undo and Redo
  • Defining the Store, Actions, and Reducers in TypeScript
  • Exporting Images
  • Using Redux Toolkit

Typing GraphQL with TypeScript

In this module we'll explore a powerful combination of tools: GraphQL and TypeScript and show how they work together.

In this module we:

  • Compare tradeoffs between GraphQL to REST
  • Configure Apollo Client
  • Generate TypeScript Types from GraphQL
  • Work with GraphQL Queries
  • Build an CLI-based React (!) application

What People Are Saying...

Enroll now

Book
Learn Pro Patterns for Hooks, Testing, Redux, SSR, and GraphQL
Instantly download the complete book and code examples
$79
  • PDF, EPub, and Mobi
  • Complete Code Files
  • Access to our community
  • Learn to build production apps
Error: Can't find product fullstack-react-with-typescript-masterclass. Please contact [email protected]

Questions you might have

Here are answers to some common questions

The book is a downloadable PDF, ePub, and Mobi along with example code zip that goes through the content.

The course - which includes a free copy of the book - is an online course with hours of video lessons from Maksim, walking through the lessons.

If you like to read, you may prefer the book. If you like to watch videos, and see how Maksim works, then you'll love the masterclass.

It depends on if you enroll in the course or buy the book only.

If you buy the course, you'll be given a login to newline where you watch the videos, download the code, read the manuscript, and add comments and ask questions.

If you buy the book, you'll be able to download the book and source code after checkout. You'll also receive an email from Gumroad giving you instructions on how to download it at any time.

In either case, you'll be given access to our community Discord channel where you can get help.

Yes, but you don't necessarily need to be an expert. We assume you know the basics of programming in JavaScript. We walk through every line of code.

When joining the course, you'll be invited to our community Discord where you can chat with fellow students.

It depends. The masterclass and the book share material - so if you went through the entire book and already feel confident building apps with React and TypeScript, then you may not need the masterclass.

However, if you only worked through a couple of chapters or you find you're a visual learner, you enjoy listening to a teacher, and you want to see, hands-on, how Maksim works -- then you will love the masterclass.

If you're unhappy with the course for any reason, just reach out to us and we'll give you a full refund. There's no risk.

Our customers work at

Become proficient in TypeScript with React

Download the first module and build a Trello clone with React and TypeScript in 20 minutes. Click the button below to get started.