In this tutorial, we are going to mimic a real software development lifecycle. We’ll go from inspiration to requirements to using TDD to production.

Introduce Tutorial

Write Requirements for Avatar Component

In this lesson, you’ll scaffold the project using Vite’s react-ts template and the yarn create vite command. 

Set up Application with Vite

In this lesson, you’ll scaffold the testing infrastructure using Vitest + @testing-library so that we can write tests for our functions and components.

Set up Testing with Vitest and testing-library

Discuss when to Use .ts vs .tsx

Build basic <Avatar /> component with TDD

Discuss Types or Interfaces

Define AvatarProps

Implement a Fallback Avatar URL

Understand Image Loading Errors

Implement onError to Handle Image Lading Errors

Use in “Production” CodeSandbox

Bonus: Using PropsWithChildren

Challenge: Build X Component

Build a Dynamic Avatar Component with React & TypeScript

Free TypeScript Tutorials