Learn React with TypeScript

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

Our customers work at

What You Will Build

In this book, 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 chapter of the book 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 chapter, 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 chapter 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 chapter will be your guide.

Learn Common Patterns and Play music with React

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

In this chapter 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 chapter, 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 chapter 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 chapter we'll build a drawing application usingcanvas and Redux.

In this chapter 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 chapter we'll explore a powerful combination of tools: GraphQL and TypeScript and show how they work together.

In this chapter 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

Table of Contents

  • Why Use TypeScript with React?1
  • How to Get the Most Out of This Book 
  • Why Types and Tests Prevent Errors 
  • A Quick Intro to TypeScript 
  • Your First React and TypeScript Application2
  • Building Trello with Drag and Drop 
  • Creating the Card Component 
  • Implementing Drag and Drop 
  • State, Hooks, and Events 
  • How to Test React Applications with TypeScript3
  • Testing the Goblin Digital Goods Store 
  • Setting up TypeScript Tests 
  • Rendering Components in Tests 
  • Testing Custom React Hooks 
  • Common Patterns4
  • Making Music with React 
  • Capturing Keystrokes with React 
  • Render-props and Higher-order components 
  • Using Next.js with TypeScript5
  • Building a Medium-like Blog 
  • SSG: Working with Static-site generation 
  • SSR: Working with Server-side rendering 
  • Using Redux and TypeScript6
  • Build a drawing application 
  • Implementing Undo and Redo 
  • Redux vs. useReducer 
  • Using GraphQL with React, and TypeScript7
  • Complex GraphQL Queries and Types 
  • Generate TypeScript Types from GraphQL 
  • Build a CLI-based React application 

👋 Hi I’m Maksim

I work in Mojang building web services around Minecraft.

I used Typescript to help build the in-game UI for Battlefield V - a large part of Battlefield interface is written in React and Typescript.

Game-dev is a challenging industry, but thanks to Typescript we were able to quickly deliver new features - and feel secure in our code.

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

👋 Hi, I’m Alex

I work in DRIVE2.RU and help building user interfaces for the social network. 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

Purchase the book today

What's Inside

Instantly download the complete book and code examples

  • 📕 PDF, EPub, and Mobi
  • 👩‍💻 Completed code
  • 👫 Access to our community
  • ✅ Learn to build production apps
  • One-time price of $59 $39

I'm wondering...

What happens after I 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.

Is the book complete?

Yes! It's 100% complete and currently over 500 pages.

Do I have to know JavaScript?

Yes, we assume you know the basics of programming in JavaScript. However, you don't have to be a JavaScript expert - we walk through every line of code.

Are there free updates?

Yes! Buying now entitles you to free updates for at least one year after purchase

How do I download the book and updates?

If you've purchased the book, you can download it from your Gumroad library.

How up to date is the book?

The book is up to date with the latest version of React and TypeScript

What format is the book?

The book is in PDF, epub, and mobi format. It also comes with a large folder of example code

What if I don't like it?

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

Become proficient in TypeScript with React

Download the first chapter and build a Trello clone with React and TypeScript in 20 minutes