Cover Art of newline's Fullstack React with TypeScript Masterclass and Book

Fullstack React with Typescript

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 wo