Master React Through Real-World Challenges

Write React and TypeScript in a full Monaco editor with IntelliSense, autocomplete, and optional Vim mode.

Run your code against a real Node + Jest server — the same setup you’d face in production and technical interviews.

Last challenges

#50
45min

File explorer

Build a recursive file explorer tree view with expandable and collapsible folders, similar to VS Code's sidebar.

ddd
useStaterecursion
#51
45min

Shopping cart with Redux

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

ddd
Redux
#52
30min

Use optimistic

Learn React's useOptimistic hook by building instant heart toggles that update the UI before the server responds — and revert automatically when requests fail.

ddd
useOptimisticstartTransitionreact 19

Try a Free React Challenge

Try a real challenge right in your browser. Write code with TypeScript and IntelliSense, run tests on a live Node + Jest server, and see your solution validated instantly — no setup required.

https://www.reactchallenges.com/challenges/tic-tac-toe/run
The workspace is designed for desktop. For the best experience, please switch to a larger screen.

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.
  • Only App.tsx should be modified. Components.tsx is read-only.

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

Simple, transparent pricing

Limited-time offer: enjoy reduced pricing while there are fewer than 100 challenges!
monthly plan
$9/month
Billed monthly
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
annual plan
$5/month
Billed $60yearly
save 44%!
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
quarterly plan
$7/month
Billed $21quarterly
save 22%!
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
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