English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 148 Lessons (10h 23m) | 1.47 GB
Fullstack React with TypeScript: Learn Pro Patterns for Hooks, Testing, Redux, SSR, and GraphQL
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!
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.
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.
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.
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.
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.
Create a Drawing App with Redux
In this module we’ll build a drawing application usingcanvas and Redux.
Typing GraphQL with TypeScript
In this module we’ll explore a powerful combination of tools: GraphQL and TypeScript and show how they work together.
Table of Contents
Course introduction
How to get the most out of this course
What is TypeScript
Why use TypeScript with React
Introduction
What we are building and prerequisites
How to bootstrap React TypeScript app automatically
Clean up the code and define the global styles
How to style React elements
Prepare the styled components
Create column components
Create card components
Component for adding new items
The NewItemForm component
Auto focus on inputs
Submit on enter
Add global state and business logic
Implement the global state
Define the business logic
Moving the items
Add drag and drop (install React DnD)
Store the dragged item in the state
Define the useItemDrag hook
Drag the columns
Hide the dragged item
Implement the custom dragging preview
Drag the cards
Update the reducer
Drag the card to an empty column
Saving the state on the backend
Loading the data
How to test your applications: testing a digital goods store introduction
Get familiar with the application
Initial setup
Testing the App component
Mocking components
Jest helper to test navigation
Testing navigation
Shared components
The home page
The ProductCard Component
The Cart component
The CartItem component
The CheckoutList component
The CheckoutForm component
The FormField component
The order summary page
Testing the useProducts hook
Testing the useCart hook
Patterns in React TypeScript applications: making music with React introduction
What we’re going to build
First steps and basic application layout
A bit of music theory
Third party API and browser API
The main app screen
Creating the keyboard
Adapter hook
Connecting to a keyboard
Mapping the real keys to virtual
The instruments list
The instrument selector
Loading the instruments
Render Props
Creating render props with functional components
Creating render props with classes
Higher-Order Components
Instrument adapter as a Higher-Order Component
Passing refs through
Static composition
Using the hooks with HOCs
Using Redux and TypeScript introduction
Using Redux and TypeScript preview the final result
What is Redux?
Using Redux and TypeScript initial setup
Redux logger
Prepare The Styles
Working with the canvas API
Handling the canvas events
Define the store types
Add actions
Dispatch actions
Draw the current stroke
Implement selecting colors
Implement undo and redo
Splitting the root reducer and using combineReducers
Exporting an image
Using Redux Toolkit
Using createAction
Using createReducer
Using slices
Add the modal windows slice
Add the modal manager component
Prepare the server
Save the project using thunks
Load the project
Static Site Generation and Server-Side Rendering using Next.js introduction
Generating pages on the backend using Next.js
Creating the first page
Basic application layout
Custom document component
Application theme
Custom App component
Front page
The 404 page
Post page template
Backend API server
Frontend API client
Updating the main page
Pre-Render the post page
The category page
Adding breadcrumbs
Comments and Server-Side Rendering
Components to render comments
API for adding comments
Adding comments to a page
Connecting Redux
Optimizing images
Building the project
Remaking the API
Creating client requests
Updating pages
Deploying with serverless functions
GraphQL, React, and TypeScript introduction
GraphQL, React, and TypeScript. What we are building
Authenticate in GitHub and preview the final result
Setting up the project
Running the application
Get the auth code
Auth flow link
Authentication context
GraphQL queries – getting the user data
Adding helper components
Defining the WelcomeWindow layout
Getting GitHub GraphQL schema
Generating the types
Adding routing
Implement navigation
Repositories main component
Getting the list of repositories
GraphQL mutations. Creating repositories
Getting the repository ID
Working with GitHub issues
Getting the list of issues
Creating an issue
Working with GitHub pull requests
Getting the list of pull requests
Creating a new pull request
Resolve the captcha to access the links!