SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial

The home for developers

Track your course progress, manage projects, and find your dream job - all in one place.

Start Your Free Trial

7 Day Free Trial. Cancel Anytime.

SitePoint Premium

  • Access to 700+ courses
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools
  • Library/
  • Video courses/
  • A Playful Intro to React
A Playful Intro to React

A Playful Intro to React

Building a Tic-Tac-Toe Game


Course details

4.2∙6 Ratings4 reviews

Published
May 2021
Videos
13
Duration
47m
Happy students
363

Take this course

About the course

Do you want to learn React the fun way? In this class, you will learn the key concepts of React while building a Tic Tac Toe game.

React is currently the most popular front-end library. It's easy to begin with yet it's very capable even for building large-scale professional web-applications. In this course, we learn the fundamentals of React while having some fun and creating a Tic Tac Toe game.

While building a game we dive into the fundamentals of React like:

  • How to break down your application or game into smaller pieces, into components?
  • How to structure your logic and how to connect these components with props and callbacks?
  • How to deal with change, what is the state, what to store in it, and where to define it?
  • How to add interaction and how does re-rendering work in React?
  • And while it has nothing to do with React we are also going to draw some basic images by coding SVGs

This is an introductory course for beginners. We don't get to more advanced things like routing or state management of large-scale applications. Instead, I give you a foundation you can build on.

Requirements:

This is an intro course, no prior React knowledge is required, but some HTML, CSS, and basic Javascript skills are necessary.

You can also check out the result of each lesson step by step on CodePen. Take a look on lesson notes in each step to see CodePen link

Note: If you are having problems with the settings: New versions of React and React DOM come out together, but it can happen that the website providing these libraries for CodePen is not up to date with both of them. If for some reason the version number of React and the version number of React DOM do not match then you have to downgrade the one with the higher version number by simply changing the number in the url of the added library to match.

Course Instructor

Hunor Márton Borbély

Hunor Márton Borbély

Hunor is a full-stack web developer focused on frontend with a deep understanding of React and Vue. He's enthusiastic about UX design. He coaches the next generation of web developers at codebar, shares hobby projects on CodePen, publishes video tutorials on YouTube, and occasionally writes articles on CSS-Tricks and freeCodeCamp.

Course Outline

Lesson 1: A Playful Intro to React
  • Free
    Introduction
    0:44
  • Locked
    Breaking down the game into components
    3:13
  • Locked
    Creating our first components
    4:58
  • Locked
    The Grid
    4:46
  • Locked
    Which square is which?
    4:05
  • Locked
    The changing parts
    4:47
  • Locked
    Our first attempt to have a state
    3:09
  • Locked
    Lifecycle of a component
    2:53
  • Locked
    Circles and Crosses
    4:15
  • Locked
    Interaction
    4:06
  • Locked
    Detecting the winner
    4:43
  • Locked
    And the winner is ...
    5:29
  • Locked
    Conclusion
    0:43

Reviews
4.2

6 total

4
1
0
0
1

Course details

4.2∙6 Ratings4 reviews

Published
May 2021
Videos
13
Duration
47m
Happy students
363

Take this course
SitePoint

Stuff we do

  • Premium
  • Newsletters
  • Learning paths
  • Library
  • Forums

Contact

  • Contact us
  • FAQ
  • Publish your book
  • Write an article
  • Advertise

About

  • Our Story
  • Corporate Memberships
  • Start free trial
  • Login

Connect

  • RSS
  • Facebook
  • Twitter (X)
  • Instagram

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Terms of usePrivacy policy