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 using canvas and Redux


Typing GraphQL with TypeScript

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


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 a 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 
  • coming soon
    Using Redux and TypeScript6
  • Build a drawing application 
  • Typing Redux Reducers 
  • Typing Redux Actions 
  • coming soon
    Using GraphQL with React, and TypeScript7
  • Complex GraphQL Queries and Types 

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 $79 $39
  • Applied coupon early

Note: this is for the early preview edition. Instant download today of the completed chapters, with remaining chapters due Summer 2020