Go to Preview Lesson
LESSON 8
LESSON 9.1
Revision 1p (09-03-2022)
Fullstack React with TypeScript Masterclass
MODULE 1
Introduction
LESSON 1.1
Course introduction
LESSON 1.2
How to get the most out of this course
LESSON 1.3
What is TypeScript? An Intro to Using Types in Your Code
LESSON 1.4
The Best Reasons to Use TypeScript With Reactβand a Caution
MODULE 2
Your First React and TypeScript Application: Building Trello with Drag and Drop
LESSON 2.1
Introduction
LESSON 2.2
What we are building and prerequisites
LESSON 2.3
How to Bootstrap a React TypeScript App With create-react-app
LESSON 2.4
How to Define Global Styles in a React App
LESSON 2.5
Style React Elements With CSS, Element Styles, and Libraries
LESSON 2.6
How to Define Styled Components in React
LESSON 2.7
How to Create a React Column Component Layout
LESSON 2.8
How to Create a Card in React With Styled Components
LESSON 2.9
Build a Button That Turns Into a Text Field to Add New Items
LESSON 2.10
How to Create a React Form Component
LESSON 2.11
How to Automatically Focus on Input Fields With React refs
LESSON 2.12
How to Submit New Items on Enter With React onKeyPress
LESSON 2.13
A useReducer Guide: How to Add Interactivity With React Context
LESSON 2.14
How to Implement React Global State With useContext
LESSON 2.15
Define Business Logic in a React App With Actions and Reducers
LESSON 2.16
How to Create Movable Elements in a React App
LESSON 2.17
How to Build Drag-and-Drop Components With React DnD
LESSON 2.18
How to Store a Drag-and-Drop Item's State in React AppState
LESSON 2.19
Building Drag-and-Drop Logic in React With DnD's useDrag Hook
LESSON 2.20
How to Build a Draggable React Column Layout
LESSON 2.21
How to Hide an Original Element While Dragging it in React
LESSON 2.22
Build a Custom React Element to Preview While Dragging in DnD
LESSON 2.23
How to Build a Drag-and-Drop Card Interface in React
LESSON 2.24
How to Update State in a React Reducer to Store Moved Items
LESSON 2.25
How to Move Drag-and-Drop Cards Into Empty Columns
LESSON 2.26
How to Save React Element State on the Backend Server
LESSON 2.27
An Intro to Building React APIs and Higher Order Components
MODULE 3
How to Test Your Applications: Testing a Digital Goods Store
LESSON 3.1
How to test your applications: testing a digital goods store introduction
LESSON 3.2
Get familiar with the application
LESSON 3.3
Initial setup
LESSON 3.4
Best Practices to Test a React App Component With Callbacks
LESSON 3.5
How to Mock React Components For Testing
LESSON 3.6
How to Test React Navigation Components With Jest Helper
LESSON 3.7
How to Write Routing Tests to Test React Navigation
LESSON 3.8
How to Test React Shared Components
LESSON 3.9
How to Test a React Home Page With Jest
LESSON 3.10
How to Test a React Card Component and Multi-State Buttons
LESSON 3.11
How to Test an eCommerce Cart React Component
LESSON 3.12
How to Test a Cart Item Component With a Remove Button
LESSON 3.13
How to Test a Checkout Product List React Component
LESSON 3.14
How to Test a Checkout Form React Component
LESSON 3.15
How to Test React Form Fields With Normalization Functions
LESSON 3.16
How to Test an Order Summary Page in React
LESSON 3.17
How to Test Custom React Hooks With Testing Library
LESSON 3.18
How to Test a useCart React Hook With Multiple Functions
MODULE 4
Patterns in React TypeScript Applications: Making Music with React
LESSON 4.1
Patterns in React TypeScript applications: making music with React introduction
LESSON 4.2
What we're going to build
LESSON 4.3
Bootstrap a React App With Footer, Header, and CSS Variables
LESSON 4.4
A Bit of Music Theory to Build MIDI Notes in React
LESSON 4.5
Build a Keyboard App With a React Hook and the Web Audio API
LESSON 4.6
Building a React Keyboard App With Custom Audio API Hooks
LESSON 4.7
Code a Keyboard in React and Compose Classes with clsx
LESSON 4.8
Add Soundfont and AudioContext to a React Adapter Hook
LESSON 4.9
How to Handle Keypress Events in a React Piano Keyboard
LESSON 4.10
How to Map Physical Keys to React Buttons
LESSON 4.11
Dynamically Load Soundfont Instruments With React Context
LESSON 4.12
Build a Soundfont Instrument Selector in React
LESSON 4.13
How to Load Soundfont Instruments in a React App
LESSON 4.14
An Intro to Render Props: Functions That Return React Elements
LESSON 4.15
How to Create Render Props With Functional React Components
LESSON 4.16
How to Create Render Props With TypeScript Classes
LESSON 4.17
An Intro to React Higher-Order Components or HOCs
LESSON 4.18
How to Build a React Higher-Order Component
LESSON 4.19
Pass Refs Through Higher-Order Components With forwardRef
LESSON 4.20
Define What to Load Before Rendering With Static Composition
LESSON 4.21
How to Use Hooks With Higher-Order Components
MODULE 5
Using Redux and TypeScript
LESSON 5.1
Using Redux and TypeScript introduction
LESSON 5.2
Using Redux and TypeScript preview the final result
LESSON 5.3
What is Redux? An Intro to React State Management
LESSON 5.4
How to Add Redux and TypeScript to React
LESSON 5.5
Redux Logger: How to Monitor Problems in React Redux Apps
LESSON 5.6
How to Style a React Redux App Like Windows XP With XP.css
LESSON 5.7
How to Use the Canvas API to Draw in a React Redux App
LESSON 5.8
How to Handle Canvas API Events in React
LESSON 5.9
Define the Store Type
LESSON 5.10
Add Actions
LESSON 5.11
Add the Reducer Logic
LESSON 5.12
How to Dispatch Actions With Redux
LESSON 5.13
Update Canvas With Redux Actions to Draw Strokes
LESSON 5.14
How to Build a Redux Color Selector
LESSON 5.15
How to Add Undo and Redo to a React Redux App
LESSON 5.16
How to Split Reducers and Use combineReducers in Redux
LESSON 5.17
How to Export an Image From a React Redux App
LESSON 5.18
Simplify React Redux Development With Redux Toolkit
LESSON 5.19
How to Use Redux Toolkit createAction to Simplify Actions
LESSON 5.20
How to Update Redux Reducers With createReducer
LESSON 5.21
Automatically Generate Action Creators With createSlice
LESSON 5.22
How to Create a Modal Window With React Redux
LESSON 5.23
How to Manage Modal Window Components in Redux
LESSON 5.24
Prepare the Redux Server for Deployment
LESSON 5.25
How to Save Files to a React Server With Thunks
LESSON 5.26
How to Load Project Files From a React Redux Server
MODULE 6
Static Site Generation and Server-Side Rendering Using Next.js
LESSON 6.1
Static Site Generation and Server-Side Rendering using Next.js introduction
LESSON 6.2
Generating pages on the backend using Next.js
LESSON 6.3
Creating the first page
LESSON 6.4
Basic application layout
LESSON 6.5
Custom document component
LESSON 6.6
Application theme
LESSON 6.7
Custom App component
LESSON 6.8
Front page
LESSON 6.9
The 404 page
LESSON 6.10
Post page template
LESSON 6.11
Backend API server
LESSON 6.12
Frontend API client
LESSON 6.13
Updating the main page
LESSON 6.14
Pre-Render the post page
LESSON 6.15
The category page
LESSON 6.16
Adding breadcrumbs
LESSON 6.17
Comments and Server-Side Rendering
LESSON 6.18
Components to render comments
LESSON 6.19
API for adding comments
LESSON 6.20
Adding comments to a page
LESSON 6.21
Connecting Redux
LESSON 6.22
Optimizing images
LESSON 6.23
Building the project
LESSON 6.24
Remaking the API
LESSON 6.25
Creating client requests
LESSON 6.26
Updating pages
LESSON 6.27
Deploying with serverless functions
MODULE 7
GraphQL, React, and TypeScript
LESSON 7.1
GraphQL, React, and TypeScript introduction
LESSON 7.2
GraphQL, React, and TypeScript. What we are building
LESSON 7.3
Authenticate in GitHub and preview the final result
LESSON 7.4
Setting up the project
LESSON 7.5
Running the application
LESSON 7.6
Get the auth code
LESSON 7.7
Auth flow link
LESSON 7.8
Authentication context
LESSON 7.9
GraphQL queries - getting the user data
LESSON 7.10
Adding helper components
LESSON 7.11
Defining the WelcomeWindow layout
LESSON 7.12
Getting GitHub GraphQL schema
LESSON 7.13
Generating the types
LESSON 7.14
Adding routing
LESSON 7.15
Implement navigation
LESSON 7.16
Repositories main component
LESSON 7.17
Getting the list of repositories
LESSON 7.18
GraphQL mutations. Creating repositories
LESSON 7.19
Getting the repository ID
LESSON 7.20
Working with GitHub issues
LESSON 7.21
Getting the list of issues
LESSON 7.22
Creating an issue
LESSON 7.23
Working with GitHub pull requests
LESSON 7.24
Getting the list of pull requests
LESSON 7.25
Creating a new pull request
MODULE 8
Appendix
MODULE 9
Changelog
LESSON 9.1
Revision 1p (09-03-2022)
Go Pro
Log In
Revision 1p (09-03-2022)
Project Source Code
Get the