29、构建 BattleJong 客户端：技术详解与实践

构建 BattleJong 客户端：技术详解与实践

1. 项目准备

1.1 添加依赖库

在项目中，我们只需要引入 React 和 normalize.css 这两个库。使用以下命令进行安装：

npm install normalize.css@8.0.1 --save
npm install react@18.2.0 --save
npm install react-dom@18.2.0 --save

1.2 添加类型定义

为了让 TypeScript 更好地工作，我们还需要安装一些类型定义：

npm install @types/react@18.0.15 --save-dev
npm install @types/react-dom@18.0.6 --save-dev

1.3 项目文件结构

项目的客户端文件并不多，主要包括以下几个部分：
| 文件路径 | 说明 |
| — | — |
| src/index.html | 项目的主入口文件 |
| src/css/main.css | 项目的样式表 |
| src/code/d.ts | 自定义类型定义文件 |
| src/code/main.tsx | 代码的主入口文件 |
| src/code/socketComm.ts | 与服务器进行 WebSocket 通信的代码 |
| src