Tic-Tac-Toe ReactJS Tutorial

This Project is a GitHub version of Intro to React tutorial. All rights go to Facebook Inc.

Table of Contents:

This tutorial is is separated into 5 parts. In each part the tutorial follow a series of steps to reach the part aim.

• Part 0 Tutorial Setup.

• Part 1: Aim is to have the basic structure of the Tic Tac Toe app.

  • 1st step: Design Game Component.
  • 2nd step: Link the Game Component with the DOM.
  • 3rd step: Link Board Component with Game Component.
  • 4th step: Link Square Component with Board Component.
  • Optional step: Add CSS to the entire app.

• Part 2: Aim is to discover class objects state and their usage.

  • 1st step: Add interactive behaviour to Square Component.
  • 2nd step: Add state to Square Component.

• Part 3: Aim is to learn about React data flow direction and different options to communicate between parent and child class.

  • 1st step: Link Square Components state with Board Component.
  • 2nd step: Handle Square clickEvents by Board Component.
  • 3rd step: Add handleClick functionality.

• Part 4: Aim is to improve actual knowledge about React classes.

  • 1st step: Simplify Square Class.

  • 2nd step: Introduce the 'O' Player.

  • 3rd step: Add 'calculateWinner' function and winner system.

• Part 5: Aim is to improve application behaviour using dependency injection due to move the responsibilities of handle the game.

  • 1st step: Move the game control from Board Component to Game Component.

  • 2nd step: Add game history.

  • 3rd step: Add draw case into game cases.

  • 4th step: Solve dynamic list key error.

  • 5th step: Added history buttons functionality.

  • 6th step: Solved onResetGame issue.

Intro to React (Extra Challenges).

• Extra challenge 1: Highlight the winner line.

  • 1st step: Add highlight of the winner line.
  • 2nd step: Improve code style.
  • 3rd step: Solve merge conflicts.

• Extra challenge 2: Show clicks coordinates to log history.

  • 1st step: Added click coordinates log to history.
  • 2nd step: Solved coordinates-log display issue.

• Extra challenge 3: Highlight last move.

  • 1st step: Added highlight last move functionality.

• Extra challenge 4: Avoid hardcoding each HTML element.

  • 1st step: Modified the app structure due to avoid hardcoding each HTML element.

• Extra challenge 5: Add sorting option to the history.

  • 1st step: Introduced the sorting option of the game history.

Extra Challenge (Special challenge - BattleShip).

This part is not in Intro to React tutorial so there is no specific way of do it correctly. In this part we ask you to improve your actual Tic-Tac-Toe code to create a User vs AI BattleShip game. Here I will give a squema which I used as start point due to develop a basic web application:

1. Create the Object EnemyGame: The aim of this new object will be to create and control a new Board object where the user will make the attacks.
2. Separate the game in 3 phases (load Ships, attack Ships, end).
   2.1. Load Ships: Consists in block the EnemyGame Board while the user introduce their ships. Ships can have a deffault size (1x2, 1x1, 3x1, ...) due to make the game easier.
   2.2. Attack Ships: Block the User Board and start recording clicks in EnemyGame Board.
   2.3. End game: Block User Board and EnemyGame Board and display the winner.
3. You can make an AI which makes their shoot after you so you don't need to keep the 'X' and 'O' turns.