\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 7.5Running the application
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 7.7Auth flow link
    • Go Pro
    • Courses
    • Fullstack React with TypeScript Masterclass
    • Get the auth code
    • Go To Previous Lesson
      Running the application
      Running the application
    • Go To Next Lesson
      Auth flow link
      Auth flow link