Find the perfect coding resourcesLearn more→

Build Tic Tac Toe with React Hooks

ScrimbaScrimba
•
Recommended
View Course
Leaderboard
React
Meet Your Instructor
Thomas Weibenfalk avatar

Thomas Weibenfalk

Instructor

Thomas is a multitalented digital native from Sweden. He has been developing webpages and web applications ever since Internet first became a phenomenon.

49min

Completion

Certificate included

Format

Interactive coding

Subscription

What You'll Learn

Build the classic Tic Tac Toe game using React Hooks

Master useState and other React Hooks

Understand modern React patterns and best practices

Create interactive game components

Implement game logic and state management

Overview

In this course, we're going to have some fun building a Tic Tac Toe game with modern React. The example is pulled from React's official tutorials, but instead of doing the old way, we'll use React Hooks. Knowing React Hooks is a critical skill for any React developer who aims to work with modern codebases, and this course will teach it to you in a fun way and quick way! The course assumes you know basic React beforehand. If you've gone through our Learn React For Free course, you'll be well equipped to tackle this one.

Table of Contents
1
Introduction
2
Scaffolding Components
3
Square Component & destructuring props
4
Board Component and scaffolding functions
5
Square Styling
6
Board Styling
7
calculateWinner function explained
8
Create states and fill with initial data
9
Create the handleClick function
10
renderMoves function and the last JSX
11
BONUS: Implement Time Travel
12
Congratulations on completing Build Tic Tac Toe with React Hooks
13
Certificate of Completion

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!