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.