Hi, community. I want to start a series of stories where I will try to implement a Checkers game. This will be a good experience for me. I still do not have a clear vision of a final product, maybe it will be a multiplayer game with node and WebSocket, maybe not. Firstly I’ll start with a simple single mode, and later I’ll add new functionality I decided to use React for this game. I haven’t used this library to create any game previously, so this will be very interesting and maybe a little bit tricky. Our game will not have any difficult animations, so Canvas API is not needed here, that’s why I want to try React. And I also will use TypeScript Let’s start with the project creation. I’ll use with template create-react-app typescript . This command will create an initial app with all basic dependencies. After successful installation we will see the next structure: npx create-react-app my-app --template typescript I’ll clean and remove non-used files a little bit later. Not let’s add to the project. This will give us the ability to format our code. prettier This command will install prettier, husky and lint- staged, which will help us with formatting the code on during pre-commit or pre-push phase. npm install --save husky lint-staged prettier I always use this basic configuration of file: .prettierrc {
  "printWidth": 100,
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always"
} Then let’s add some new lines to file: package.json "husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**/*.{ts,tsx,css}": [
        "prettier --write"
    ]
} This will run prettier and format the code during pre-commit phase. Also, I want to check that in settings in WebStorm (I use this IDE, but the same can be checked in any other developing tool which supports prettier) prettier is enabled on save: I also want to have a separate command to run linter. Eslint is already included from . So I just add additional command to scripts section in file: create-react-app package.json "lint": "eslint \"./src/**/*.{ts,tsx}\"" And another one to hooks in husky section "husky": {
    "hooks": {
        "pre-commit": "lint-staged",
        "pre-push": "npm run lint"
    }
} Now, let’s check our initial files and remove all that we don’t need. In the public folder, I’ll remove favicon.ico, logo files, robots.txt, manifest.json, and in src folder - logo.svg, reportWebVitals.ts, App.test.tsx, setupTests.ts Final structure: The next thing is to update some files and remove parts that we don’t need. public/indes.html: <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Web site created using create-react-app" />
        <title>Checkers</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html> src/index.tsx import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
); src/index.css body {
    margin: 0;
    padding: 0;
} src/App.tsx import React from 'react';
import './App.css';

function App() {
    return <div className="App">Checkers Game</div>;
}

export default App; Also, I removed all styles from src/App.css Now let’s check that everything works and execute We’ll see our empty page with the text “Checkers Game“ npm run start This is the end of project configuration and initialization. Link to repository

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Checkers on React - Part 1 - Project Configuration and Initialization

Too Long; Didn't Read

Company Mentioned

Roman

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Checkers on React - Part 1 - Project Configuration and Initialization

Too Long; Didn't Read

Company Mentioned

Roman

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES