Learn React with TypeScript

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

loading...

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.