Intro

This code is a TypeScript clone of Samer Bunas React game memory-challenge.

You can find Samer's original JavaScript code in branch javascript. The TypeScript code is in branch master.

• This codes location: https://github.com/rasor/memory-grid-game-in-steps
• A step-by-step React Function Component TypeScript clone of Samers game
• Try the game
• From 2019 book Syncfusion Free Ebooks | React Succinctly
• Samers Code:
  • P.076: Chapter 5 Let’s Build a Game
  • P.080: Step1 Initial markup and style
  • P.082: Step2 Extracting components
  • P.086: Step3 Making the grid dynamic
  • P.086: Designing data and state elements
  • P.088: Using ENUMs
  • P.095: Step4 Wrapping stateful components
  • P.097: Step5 Determining what to make stateful
  • P.097: Completing the UI as a function of state
  • P.103: Step6 Using mock state values
  • P.103: Implementing behaviors to change the state
  • P.107: Step7 Using a timeout side effect
  • P.111: Step8 Using side effects to separate concerns
  • P.112: Step9 Resetting a React component
  • P.115: Step10 Controlling state initial value with a prop
  • P.116: Step11 Final: Using custom Hooks
• Learn:
  • React Function Components:
    • React Function Components and Hooks
    • React.js Tutorial: The Complete React Introduction
    • All the JavaScript you need to know before starting with React
  • React TypeScript:
    • react-typescript-cheatsheet
    • react-redux-typescript-guide
    • Declare a prop as a func
  • Beginner Programmers Mistakes :: The Professional Programmer
• The 2016 Book - using React Classes:
  • Syncfusion Free Ebooks | React.js Succinctly
  • Code

Starter template

The starter template is CreateReactApp using Ionic components for nice mobile experience.

npm install -g ionic
ionic start my-app
# Choose 
# - Framework: React
# - Template: SideMenu
cd my-app
npm start

The End