React展示项目
一个用React、TypeScript和Vite构建的展示网站，展示了多个迷你项目，包括Tic Tac Toe和Poke Collection。
技术栈
- 反应18+ -仅限功能部件
- TypeScript -严格模式已启用
- 维特 -快速构建工具和开发服务器
- CSS模块 -组件范围样式
- ITCSS架构 -有组织的CSS结构
- BEM命名约定 -可维护的CSS类
项目结构
src/
├── styles/ # ITCSS layers
│ ├── settings/ # CSS variables
│ ├── generic/ # Resets
│ ├── elements/ # Base styles
│ └── global.css # Main import
├── components/ # Reusable components
│ ├── Button/
│ ├── Tag/
│ ├── ProjectCard/
│ └── LanguagePicker/
├── pages/ # Page components
│ └── HomePage/
├── contexts/ # React contexts
│ └── I18nContext.tsx
├── locales/ # Translations (en/es)
├── utils/ # Utility functions
└── App.tsx特性
- 🌐 国际化（i18n） -支持英语和西班牙语的手动实施
- 🎨 现代用户界面 -按照Figma规范进行清洁设计
- 📱 响应式设计 -移动友好布局
- ♿ 可访问的 -语义HTML和ARIA标签
- 🎯 类型安全 -完全覆盖TypeScript
入门指南
先决条件
- 已安装Node.js 18+
- npm或yarn包管理器
安装
- 安装依赖项：
npm install- 启动开发服务器：
npm run dev- 打开 http://localhost:5173 在浏览器中
为生产而建
npm run build预览生产版本
npm run preview小型项目
1. ReactDev Tic-Tac-Toe
React教程Tic Tac Toe游戏的完整实现及其增强功能：
- TypeScript实现
- 游戏历史跟踪
- 重置功能
- 获胜者线突出显示
- 平局检测
- 本地存储持久性
2.扑克收藏
《口袋妖怪》收藏经理的特色是：
- 用户认证
- 通过PokeAPI搜索口袋妖怪
- 收藏夹管理
- API与Poke Collection Lite的集成
- 本地存储持久性
架构指南
CSS架构（ITCSS）
- 设置：CSS变量和设计标记
- 通用的：重置和规范样式
- 元素：基本HTML元素样式
- 组件：使用边界元法的组件特定样式
BEM命名约定
- 块:
.component - 元素:
.component__element - 修饰符:
.component--modifier
反应模式
- 仅指定导出：
export { Component } - 年桶出口量
index.ts - 使用TypeScript的功能组件
- 全局状态的上下文API
- 可重用逻辑的自定义挂钩
脚本
npm run dev-启动开发服务器npm run build-为生产而建npm run preview-预览生产构建npm run lint-运行ESLint
API集成
PokeAPI
- 基本URL:
https://pokeapi.co/api/v2/ - 口袋妖怪终点：
/pokemon/[pokemon-name]
扑克系列精简版API
- 基本URL:
https://poke-collection-lite-production.up.railway.app - 终点：
- 获取 /api/[username]/favorites -列出收藏夹 - 发布 /api/[username]/favorites -添加收藏夹 - 删除 /api/[username]/favorites/[id] -删除收藏夹 - 发布 /api/[username]/reset -重置收藏夹
贡献
该项目遵循严格的编码标准：
- 使用
intent而不是variant用于组件变化 - 遵循CSS模块中的BEM命名
- 对所有设计标记使用CSS变量
- 保持TypeScript严格模式
- 不
console.log在生产代码中
许可证
用于教育目的的私人项目。