Fullstack React with TypeScript: Learn Pro Patterns for Hooks, Testing, Redux, Next.js, SSR, and GraphQL - Basic Package

The book is a practical, guide that will have you (and your team) writing React apps with TypeScript (and hooks) in no time.

You might think of TypeScript as something that only applies to Angular - after all, it was Angular that pioneered using TypeScript for web development.

But adoption of TypeScript with React has skyrocketed - and for good reason. React and TypeScript are a powerful combination that can prevent bugs and help you (and your team) ship products faster.

I've switched all of my new React development to TypeScript this year. While the type-checking is a little bit more work in the beginning, it's a huge help to productivity over the course of a project -- particularly because your editor can now help you code.

But there is one problem with using React and TypeScript:

Understanding idiomatic React patterns with TypeScript isn't always straightforward.

When I was starting off, I struggled:

• to get typings working properly -- without using the generic any type everywhere
• integrating with third-party libraries that didn't always include their own types! - what are you supposed to do then?
• typing complicated objects like Redux reducers and actions
• typing even more complicated objects like GraphQL queries

I love the productivity boost using TypeScript gives me with React. But it took me months and months to get these patterns straight. And that's why we wrote this book. You won't have to struggle for months. In fact, you'll be able to learn these patterns in just a few hours.

In Fullstack React with TypeScript, we walk through several apps that show you The React Way of building apps with TypeScript.

image

By the end of the first chapter, you'll already have built your first React app with TypeScript. The subsequent chapters will dive into more ideas such as:

• how to use types in state, hooks, props, context, and higher-order components
• how to write tests using react-testing-library
• how to load data from a remote API server
• common patterns for React applications (in TypeScript, of course)
• How to generate static sites with Next.js
• How to use GraphQL with React with TypeScript (it's tricky!)

What's in the book? A lot.

You'll get:

• Instant access to the most current version of the full book (it's over 300 PDF pages)
• Instant access to the code for ALL sample apps in a ZIP folder
• e-book in PDF, ePub, and Mobi formats

Of course, the book is not just about TypeScript. It's chock-full of modern React best-practices. We build a bunch of apps and show React patterns during that process. Here's the a peak of just 4 of the 6 apps you build:

"You had me at Trello"

In this first chapter of the book we start-in easy but build a slick, drag-and-drop Trello clone.

Along the way we 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 to make data-sharing easy

Testing, testing. Is this thing on?

In the second chapter, we have the Goblin Store: a digital-item e-comemrce 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.

Play that funky 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 the fourth chapter, we'll look at the fantastic library 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

There is so much more! The next chapters will cover:

Using Redux with TypeScript (to create a drawing application) and

Using GraphQL with React and TypeScript

You probably have questions... (the FAQ)

Q: “Do I have to know React already?”

A: Nope. You don't have to be a React expert, although you probably should run through the official React tutorials at least once before reading this book.

Q: “How does this relate to Fullstack React? It is a sequel?”

A: No It's more of a companion. One of the main differences is that Fullstack React focuses on class components, whereas Fullstack React with TypeScript builds nearly everything with functional components and hooks. (If you don't know the difference yet, don't worry about it! We will explain.)

Q: Is the book complete? Or is this a pre-release?

A: This book is 100% complete.

Q: How long is the book?

A: It's over 300+ PDF pages with 6 sample apps.

Q: What happens after I buy the book?

A: You'll checkout through Gumroad and be able to download the book and code packages. You'll also receive an email detailing instructions on how to access your Gumroad library.

With Fullstack React with TypeScript you won't have to struggle for months figuring out best-practices. Instead, within the first few minutes you'll build a React app with TypeScript and within a few hours, you'll have a strong grasp of how to build production-ready apps.

If you (and your team) are looking to reduce bugs, improve documentation, and ship faster, then grab a copy of Fullstack React with TypeScript