Playing games is fun. What’s better, and also more beneficial, is creating your own games. Why? It is a great way to learn new skills, or get better. In this tutorial, you will learn how to write your own Tetris game with React, JavaScript and TypeScript. Have fun and work on your programming skills at the same time!

Project setup

The first step is putting setting up the files you need for our Tetris game. You can do this quickly with the help of create-react-app package. This package can generate starting template for us. There are two ways to get this done. You can install the package globally on your computer, with your favorite dependency manager. This is the first way.

The second way is using it via npx. You don’t have to install any package if you want to use it. Not even if you want to use it more often. If you have stable internet connection, you can use npx. It will temporarily download the package, let you use it, and then delete it. It is almost like using npm except that you don’t bloat your disk.

One thing before you proceed to generating the template. This tutorial will use TypeScript. This means that you have to include --typescript flag when you use create-react-app. So, if you prefer the first way, use npm create-react-app react-tetris-ts --typescript or yarn create-react-app react-tetris-ts --typescript.

If you want to use npx just replace npm, or yarn, with npm. The rest will be the same: npx create-react-app react-tetris-ts --typescript. After npm, yarn or npx do its job, you are ready to start building our Tetris game. You don’t need to add any other dependencies, unless you want to. If so, go ahead. Otherwise, you are good to go.

// package.json

{
  "name": "react-tetris-ts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.5.1"
  },
  "devDependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.7",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4"
  }
}

When you are done, this will be the structure for this project:

react-tetris-ts/
├─node_modules
├─public
│ ├─favicon.ico
│ ├─index.html
│ └─manifest.json
├─src
│ ├─components
│ │ └─tetris-board.tsx
│ │ └─tetris.tsx
│ ├─styles
│ │ └─styles.css
│ ├─index.tsx
│ └─react-app-env.d.ts
│ └─serviceWorker.ts
└─ package.json
└─ tsconfig.json

Side note: If you want to prevent webpack from automatically opening the browser every time you start the project, do the following. In the root of your project, create _.env.development_ file. Inside this file, add _BROWSER=none_ and save it. From now on, webpack will no longer open the browser when you launch the _start_ npm script.

#typescript #react #javascript #programming #design development