AI导哈

React展示项目

一个使用React、TypeScript和Vite构建的展示网站，包含多个迷你项目如井字棋和口袋妖怪收藏管理器。

  • by rgap
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 rgap/Reactshowcaseproject-MCP

使用说明

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包管理器

安装

  1. 安装依赖项：
npm install
  1. 启动开发服务器：
npm run dev
  1. 打开 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）

  1. 设置：CSS变量和设计标记
  2. 通用的：重置和规范样式
  3. 元素：基本HTML元素样式
  4. 组件：使用边界元法的组件特定样式

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 在生产代码中

许可证

用于教育目的的私人项目。

相关 MCP