Advanced React with TypeScript

4.7 Average Customer Rating

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

  • 28 Videos
  • 5 hours 43 minutes
  • 136 Happy Students

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

  • 28 Videos
  • 5 hours 43 minutes
  • 136 Happy Students

Courses Outline

Lesson 1: React RPS Intro
Free
React RPS Intro
2:32
Lesson 2: Initial Setup
Initial Setup
7:32
Lesson 3: Score and Results
Score and Results
7:02
Lesson 4: Choose and Play
Choose and Play
13:46
Lesson 5: Adding Context API
Adding Context API
15:47
Lesson 6: Retrieving Values From Context
Retrieving Values From Context
9:49
Lesson 7: Initial State Context
Initial State Context
9:17
Lesson 8: Creating ScoreReducer
Creating ScoreReducer
12:07
Lesson 9: Selecting Playerhand Choice
Creating ScoreReducer
10:10
Lesson 10: Playerhand Active Class
Playerhand Active Class
4:46
Lesson 11: Test Setup with Vitest
Test Setup with Vitest
6:38
Lesson 12: Testing ScoreReducer
Testing ScoreReducer
17:55
Lesson 13: Testing Hand Selection
Testing Hand Selection
22:31
Lesson 14: Testing Options Context
Testing Options Context
14:15
Lesson 15: Generate Computer Random Option
Generate Computer Random Option
11:06
Lesson 16: Add Computer Option to Context
Add Computer Option to Context
9:47
Lesson 17: Countdown Timer
Countdown Timer
18:29
Lesson 18: Testing Countdown Timer
Testing Countdown Timer
16:30
Lesson 19: Player and Computer Score
Player and Computer Score
9:59
Lesson 20: Checking The Winner
Checking The Winner
12:52
Lesson 21: Update ScoreReducer with Winner
Update ScoreReducer with Winner
8:53
Lesson 22: Display Score Results
Display Score Results
8:07
Lesson 23: Testing Display Score Results
Testing Display Score Results
23:04
Lesson 24: Playing Hand Shake
Playing Hand Shake
14:48
Lesson 25: Winner Animation
Winner Animation
4:02
Lesson 26: Testing Winner Animation
Testing Winner Animation
16:41
Lesson 27: Reset The Game
Reset The Game
10:09
Lesson 28: Tests Coverage
Tests Coverage
25:02
  • 28 Videos
  • 5 hours 43 minutes
  • 136 Happy Students