SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial

The home for developers

Track your course progress, manage projects, and find your dream job - all in one place.

Start Your Free Trial

7 Day Free Trial. Cancel Anytime.

SitePoint Premium

  • Access to 700+ courses
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools
  • Library/
  • Video courses/
  • Advanced React with TypeScript
Advanced React with TypeScript

Advanced React with TypeScript

Build a hands-on project with React and TypeScript, fully tested with Vitest and the React Testing Library


Course details

4.7∙6 Ratings4 reviews

Published
April 2023
Videos
28
Duration
5h 43m
Happy students
175

Take this course

About the course

Are you looking to level up your React, TypeScript, and testing skills? Do you want to learn how to build a fully functional Rock Paper Scissors game and use it as a foundation for more complex projects? If so, this advanced course is perfect for you!

In this comprehensive course, you will:

  • Learn how to use React, TypeScript, and the Context API for state management in your projects
  • Get hands-on experience building a Rock Paper Scissors game from scratch, including designing the UI and implementing game logic
  • Gain a solid understanding of how to test your projects thoroughly using Vitest and React Testing Library
  • Learn how to use test coverage to identify gaps in your test suite and ensure that your code is well-tested
  • Receive guidance and support from an experienced instructor throughout the course, including detailed explanations and code examples

This course is designed for students who already have a basic understanding of React, TypeScript, and testing. However, even if you're not an expert in these areas, the course will provide all the information you need to complete the project successfully.

By the end of the course, you will have a fully functional Rock Paper Scissors game that you can use as a starting point for your own projects. You will also have a strong foundation in React, TypeScript, and testing, which will enable you to tackle more complex projects with confidence.

Enroll in this course today and take your skills to the next level!

Github Repository: React TypeScript RPS

Course Instructor

Telmo Sampaio

Telmo Sampaio

I'm Telmo Sampaio, a Software Engineer living in Manchester, UK. I love to share what I know through my training courses, teaching and speaking on my youtube channel. Any questions get in touch with me, I would love to meet you!

Course Outline

Lesson 1: React RPS Intro
  • Free
    React RPS Intro
    2:32
Lesson 2: Initial Setup
Lesson 3: Score and Results
Lesson 4: Choose and Play
Lesson 5: Adding Context API
Lesson 6: Retrieving Values From Context
Lesson 7: Initial State Context
Lesson 8: Creating ScoreReducer
Lesson 9: Selecting Playerhand Choice
Lesson 10: Playerhand Active Class
Lesson 11: Test Setup with Vitest
Lesson 12: Testing ScoreReducer
Lesson 13: Testing Hand Selection
Lesson 14: Testing Options Context
Lesson 15: Generate Computer Random Option
Lesson 16: Add Computer Option to Context
Lesson 17: Countdown Timer
Lesson 18: Testing Countdown Timer
Lesson 19: Player and Computer Score
Lesson 20: Checking The Winner
Lesson 21: Update ScoreReducer with Winner
Lesson 22: Display Score Results
Lesson 23: Testing Display Score Results
Lesson 24: Playing Hand Shake
Lesson 25: Winner Animation
Lesson 26: Testing Winner Animation
Lesson 27: Reset The Game
Lesson 28: Tests Coverage

Reviews
4.7

6 total

4
2
0
0
0

Course details

4.7∙6 Ratings4 reviews

Published
April 2023
Videos
28
Duration
5h 43m
Happy students
175

Take this course
SitePoint

Stuff we do

  • Premium
  • Newsletters
  • Learning paths
  • Library
  • Forums

Contact

  • Contact us
  • FAQ
  • Publish your book
  • Write an article
  • Advertise

About

  • Our Story
  • Corporate Memberships
  • Start free trial
  • Login

Connect

  • RSS
  • Facebook
  • Twitter (X)
  • Instagram

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Terms of usePrivacy policy