[ui.dev] Tyler Mcginnis - React with TypeScript

The ability to take what you learn and apply it towards a production codebase

• Introduction
  • 
    Introduction, Philosophy, and Tips
  • 
    Projects (What you'll build)
• We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build during the course.
• Built-In React Types
  • 
    Component and Element Types
  • 
    (Quiz) Component and Element Types
  • 
    (Bonus) Intrinsic Elements
• React's type definitions come with some types that we can use in our code to help us model some of the ways that React components and elements interact.
• Context
  • 
    Context
  • 
    (Quiz) Context
• Context lets you pass values deep into your app, and TypeScript makes it so the types come with them! In this section, we'll learn how to add those types to our context creator, and how to use context in the most helpful way.
• Configuring TypeScript for React
  • 
    Configuring TypeScript for React
  • 
    (Quiz) Configuring TypeScript for React
• It doesn't take much to set up TypeScript to work with React. By the end of this section, you'll know everything you need to get started.
• Hooks
  • 
    useState & useReducer
  • 
    (Quiz) useState & useReducer
  • 
    (Practice) useReducer
  • 
    (Solution) useReducer
  • 
    useEffect, useMemo, useCallback
  • 
    (Quiz) useEffect, useMemo, useCallback
• TypeScript makes it so we always use our React Hooks correctly, so we don't have any surprises. We'll dive into the most common hooks.
• Refs
  • 
    Refs
  • 
    (Quiz) Refs
• Refs are used to store bits of data, including references to DOM elements. TypeScript helps us use these refs in a type safe way.
• Annotating Components
  • 
    Class Components
  • 
    (Quiz) Class Components
  • 
    (Practice) Annotating Components
  • 
    (Solution) Annotating Components
  • 
    Function Components
  • 
    (Quiz) Function Components
• Components are the heart and soul of React, so we'll learn how to add annotations to props and state for class components and function components.
• Typing Props
  • 
    Common Props Patterns
  • 
    (Quiz) Common Props Patterns
  • 
    Event Handlers
  • 
    (Quiz) Event Handlers
  • 
    Advanced Props Patterns
  • 
    (Quiz) Advanced Props Patterns
  • 
    (Bonus) PropTypes
  • 
    (Practice) Props
  • 
    (Solution) Props
• Props are one of the most important parts of using React, and annotating them is as easy as adding types to a function. During this section, we'll learn how to model some of the tricker, more advanced props patterns you might find.
• Project: TypeScript Conversion
  • 
    (Project) Introduction
  • 
    (Project) TypeScript Configuration
  • 
    (Project) API
  • 
    (Project) Hooks, Context, Tooltip
  • 
    (Project) Battle
  • 
    (Project) Card, Nav, Loading
  • 
    (Project) Popular
  • 
    (Project) Results
• We'll apply what we've learned by converting an entire React Hooks codebase to TypeScript.