Dice Roller App

In this tutorial, you will build a Dice Roller App using React. Along the way you will use React’s core concepts: components, props, state, event handling, and lifting state up. By the end, you will have two dice that can be rolled individually or together, with a running total displayed below them.

Getting Started

Go to the dice-roller-app repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> dice-roller-app
cd dice-roller-app
code .

You should see only a README.md file and a .gitignore file.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Set up a React project with Vite, TypeScript, and Tailwind CSS, and configure tooling and deployment
  • Build and compose function components, using JSX patterns such as expressions, conditional rendering, and list rendering
  • Pass data between components with props, defining prop types with TypeScript
  • Add interactivity with the useState hook and event handlers, and explain how state drives UI rendering
  • Lift state up to a parent component to coordinate multiple components with callback props
  • Apply basic accessibility practices, such as semantic HTML and accessible names, to interactive elements

Sections

  1. Create the Vite Project
  2. Add Tooling and Deployment
  3. Creating the Die Component
  4. JSX Patterns and the Die Face
  5. Props
  6. Add Interactivity with State
  7. Lifting State Up
  8. Accessibility Basics
  9. Practice Questions