1,119 reads

Checkers on React - Part 1 - Project Configuration and Initialization

by RomanAugust 15th, 2022

Too Long; Didn't Read

I want to start a series of stories where I will try to implement a Checkers game. I haven’t use this library to create any game previously, so this will be a very interesting and maybe a little bit tricky. Our game will not have any difficult animations, so Canvas API is not needed here. And I also will use TypeScript. I’ll use `create-react-app` with `typescript` template. This command will create initial app with all basic dependencies.

Company Mentioned

featured image - Checkers on React - Part 1 - Project Configuration and Initialization

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 create-react-app with typescript template

npx create-react-app my-app --template typescript. This command will create an initial app with all basic dependencies. After successful installation we will see the next structure:

I’ll clean and remove non-used files a little bit later. Not let’s add prettier to the project. This will give us the ability to format our code.

npm install --save husky lint-staged 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.

I always use this basic configuration of .prettierrc file:

{
  "printWidth": 100,
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always"
}

Then let’s add some new lines to package.json file:

"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 create-react-app. So I just add additional command to scripts section in package.json file:

"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 npm run start We’ll see our empty page with the text “Checkers Game“

This is the end of project configuration and initialization.

L O A D I N G
. . . comments & more!

About Author

Roman@rzhelieznov

Javascript and React fan. Also love reading, traveling, pc gaming :)

Read my stories Learn More

TOPICS

programming #react #typescript #tutorial #game #react-native #react-native-development #react-tutorial #coding

THIS ARTICLE WAS FEATURED IN...

Terminal

Lite

Join HackerNoon

Latest technology trends. Customized Experience. Curated Stories. Publish Your Ideas