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