Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development React

React.js - Let's build a Tic Tac Toe game.

Helping you build your React.js portfolio
Rating: 4.4 out of 54.4 (30 ratings)
4,572 students
Created by Daryl Duckmanton
Last updated 10/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to build a Tic Tac Toe game
  • How to build a React application from using a HTML / CSS template
  • Proper way to structure components and state information in React
  • A way of reducing loops in your code by using hash maps in Javascript
  • How to use the useState React hook in a decently sized application

Course content

8 sections • 27 lectures • 1h 56m total length

  • Preview05:07
  • Preview01:59
  • Preview02:25

  • Adding our game template
    08:59
  • Creating the game component
    03:42
  • Creating the board component
    03:07
  • Creating the cell component
    03:02

  • Populating cell content
    04:30
  • Setting cell dynamic classes
    10:16
  • Creating cells from dynamic data
    03:52
  • Highlighting winning cells dynamically
    04:23
  • Lifting game state
    02:03

  • Configuring cell clicks
    05:03
  • Populating cells on click
    05:14
  • Changing turns
    02:21
  • Prevent overwriting cells
    02:24

  • Creating the result modal component
    05:36
  • Controlling modal display from the game.
    03:45
  • Setting up game over state
    02:25

  • Setting up the calculate winner function
    04:06
  • Calculating a winner
    13:08
  • Calculating a tie
    04:29

  • Showing the game's result
    05:01
  • Fixing the winning combinations
    02:42
  • Starting a new game
    03:48

  • Conclusion
    02:52
  • BONUS CONTENT: OTHER COURSES
    00:21

Requirements

  • A basic level of understand of React is preferred
  • A reasonable understand of HTML, Javascript and CSS
  • Node and NPM must be installed at a minimum

Description

In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js. This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc.

Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course.

Who this course is for:

  • React Developers looking to take on a reasonably sized project that isn't too complex
  • Developers who are keen on adding a project to their portfolio
  • Any developer that wants to know how to build a Tic Tac Toe game

Instructor

Daryl Duckmanton
Full Stack Software Developer
Daryl Duckmanton
  • 4.6 Instructor Rating
  • 451 Reviews
  • 45,176 Students
  • 3 Courses

I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years.

I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.