Master React Patterns
with Real Challenges

This is not another React course. You already know the basics — now it's time to practice. React Challenges gives you ready-to-use coding challenges with TypeScript, pre-styled UI, and a built-in editor with Vim mode. Focus on writing real React code, repeat key patterns, and reinforce your skills faster than ever.

Hover over the buttons on the left and right panels to see a short description of each section.
https://www.reactchallenges.com/challenges/26/run

Tic Tac Toe run

Overview

Simple Tic Tac Toe game built with React following the official React tutorial solution.

Requirements

  • Render a 3x3 board of squares.
  • Players alternate turns: ❌ goes first, then 🔵.
  • Clicking on a square marks it with the current player's symbol.
  • Do not allow clicking on an already occupied square.
  • Detect the winner and display it.
  • Track the history of moves and allow jumping to previous moves.
  • After jumping back, new moves should continue from that point.
  • Include a Clear button to reset the board and history.

Notes

  • Use useState for managing the board state and move history.
  • Make sure the Clear button resets both the board and the move history.
  • After jumping back in history and making a new move, ensure future moves are discarded.

Tests

  1. renders board with 9 squares
  2. first click places an X and next move places an O
  3. cannot click on same square twice
  4. winner is declared when a line is completed
  5. after winner no more moves allowed
  6. allows going back and continuing the game from a previous point
  7. clear button resets the game
60:00

Last challenges

#27
30min

Objects - The Must have

Master the most important object utilities in JavaScript — from keys, values, and entries to property checks, merging, and the new Object.groupBy. These fundamentals will boost how you organize, transform, and query data structures in any real-world React project.

#28
30min

Strong Password

Create the logic for a password strength checker that validates whether the user's password meets specific security rules.

useStateuseEffect
#29
45min

Shopping cart

In this challenge, you'll create a simple shopping cart. The goal is to manage the cart’s state globally using context and a provider — allowing users to add, remove, and update products, as well as toggle the cart’s visibility.

useStateuseContext

Fair prices

Limited-time offer: enjoy reduced pricing while we're still below 100 coding challenges!
monthly plan
$9/month
Billed monthly
  • 1Access to all coding challenges
  • 2New challenges every week
  • 3Run and test directly in your browser
annual plan
$5/month
Billed $60yearly
save 44%!
  • 1Access to all coding challenges
  • 2New challenges every week
  • 3Run and test directly in your browser
quarterly plan
$7/month
Billed $21quarterly
save 22%!
  • 1Access to all coding challenges
  • 2New challenges every week
  • 3Run and test directly in your browser
Free
  • 1Start solving free coding challenges
  • 2All challenges include TypeScript and pre-styled layouts
  • 3Code editor with optional Vim mode
  • 4Run and test your code instantly in the browser
Get Started

Frequently Asked Questions