Master React by Building Real Things

React Challenges gives you coding exercises to practice React with TypeScript, a pre-styled UI and instant feedback, so you can focus on writing real React code and prepare for job interviews.

Why Developers Choose Us

  • 1All challenges include TypeScript for real-world coding experience
  • 2Vim mode available for developers who prefer powerful editors
  • 3Pre-styled UI in every challenge — focus on coding, not design setup
  • 4See both the code and the fully working solution live
  • 5Code only reevaluates on Ctrl+S like VSCode, avoiding preview jank
  • 6Tests run on a server (full Node/Jest), not limited client-side environments
  • 7Monaco editor with TypeScript worker provides real-time type checking, autocomplete, and IntelliSense

Try a Free React Challenge

Experience hands-on React coding right in your browser. This free challenge lets you practice ReactJS coding with live feedback, pre-styled UI, and TypeScript.

Hover over the buttons on the left and right panels to see a short description of each section.

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
Loading...
blur example code
You need to be logged in to view the solution.
60:00

Last challenges

#40
30min

Digital Segment Clock

Build a real-time digital clock using seven-segment-style digits.

useStateuseEffect
#41
60min

React Quiz

Build a timed React quiz with randomized questions, penalties, and step-based navigation, focusing on clean state management and predictable UI flow.

useStateuseEffect
#42
30min

Countdown

Build a countdown timer that tests your React fundamentals by handling state, side effects, and precise time-based updates under real-world conditions.

useStateuseEffect

Fair prices

Limited-time offer: enjoy reduced pricing while there are fewer than 100 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