【源码】基于 React 和 GraphQL 的 fbi 开发模板

项目简介

本项目是基于 React 和 GraphQL 的 fbi 开发模板，集成了 CRA - CLI、TypeScript、react - router - dom 等现代前端开发技术栈。以 GraphQL 作为后端服务接口规范，借助 graphql - codegen 自动生成对应的 Apollo Client、React Hooks 和 TypeScript 代码，提升开发效率。还运用 ESLint、Prettier、Husky 和 lint - staged 等工具保障代码风格和质量的一致性。

项目的主要特性和功能

技术栈

• 以 CRA - CLI 为基础模板，有丰富开发工具和优化的构建配置。
• 整合 React、TypeScript、react - router - dom 等主流前端技术，支持组件化开发与类型检查。
• 采用 GraphQL 实现前后端数据高效交互。

开发体验

• 集成 graphql - codegen，根据 GraphQL Schema 自动生成 Apollo Client 和 React Hooks 代码，减少手动编写重复代码工作量。
• 用 ESLint 和 Prettier 进行代码规范和格式检查，确保代码质量。
• 通过 Husky 和 lint - staged 实现 Git pre - commit 钩子，保证提交代码符合规范。

功能特点

• 支持模块化样式管理，通过 CSS Modules 实现样式隔离与复用。
• 提供别名 @ 简化路径引用，如 @/router 对应 src/router。

安装使用步骤

假设用户已下载本项目的源码文件，按以下步骤操作： 1. 安装依赖：在项目根目录下执行 npm install 命令安装项目所需依赖。 2. 启动项目：执行 npm run start 命令启动项目。 3. 配置 GraphQL：将所有项目相关的 GQL 文件放置在 src/graphql 文件夹下，运行 npm run gql - codegen 生成对应的代码。此命令执行后会自动监听 src/graphql 文件的变化，每次文件变化后会自动生成包含 TypeScript 类型和 GQL 相关 React Hooks 的代码。

说明

• 项目的 GQL 文件需放在 src/graphql 文件夹下，具体配置可查看 graphql - codegen - cli 文档。
• 项目支持使用别名 @ 引用路径，如 @/router。
• 样式管理采用 CSS Modules 方式，推荐安装 VSCode 插件 Css Modules 实现自动补全和跳转定义功能，提升开发体验。

待完善事项

• 修复 nodemon 和 concurrently 同时开启 start + gql - codegen 脚本终端服务时，首次启动打开浏览器空白的问题。
• 确定项目文件夹结构和命名规则。
• 制定 React 组件开发规范。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】