React Firebase Starter 项目使用教程

1. 项目的目录结构及介绍

React Firebase Starter 是一个基于 React、Relay 和 GraphQL 的项目模板，用于构建现代化的无服务器架构 Web 应用程序。以下是项目的目录结构及其简要介绍：

react-firebase-starter/
├── build/                        # 编译后的输出文件
├── migrations/                   # 数据库迁移文件
├── node_modules/                 # 第三方库和工具
├── public/                       # 静态文件，如 favicon.ico 等
├── scripts/                      # 自动化脚本
├── src/                          # 应用程序源代码
│   ├── admin/                    # 管理后台部分（如仪表盘、用户管理等）
│   ├── common/                   # 共享的 React 组件和高阶组件（HOCs）
│   ├── hooks/                    # React.js 钩子和上下文提供者
│   ├── icons/                    # 图标组件
│   ├── legal/                    # 法律文件（如使用条款、隐私政策等）
│   ├── misc/                     # 其他页面（如关于我们、联系方式等）
│   ├── mutations/                # 客户端使用的 GraphQL 变更
│   ├── news/                     # 新闻部分（示例）
│   ├── server/                   # 服务器端代码（API、认证等）
│   ├── user/                     # 用户页面（登录、账户设置、用户资料等）
│   ├── utils/                    # 实用工具函数
│   ├── relay.js                  # Relay 工厂方法，适用于浏览器环境
│   ├── index.js                  # 客户端入口点
│   ├── router.js                 # 应用程序路由
│   ├── serviceWorker.js          # 服务工作者辅助方法
│   └── theme.js                  # Material UI 默认样式的覆盖
├── ssl/                          # SSL 证书，用于连接 Cloud SQL 实例
├── .env                          # 开发环境的环境变量
├── .env.production               # 生产环境的环境变量
├── .env.test                     # 测试环境的环境变量
├── graphql.schema                # GraphQL schema（自动生成，供 Relay 使用）
└── package.json                  # 项目依赖列表和 NPM 脚本

2. 项目的启动文件介绍

项目的启动主要通过 package.json 中的 NPM 脚本来完成。以下是一些主要的启动脚本：

• yarn setup: 安装依赖并创建 PostgreSQL 数据库。
• yarn start: 编译应用并在浏览器中打开，同时开启“实时重新加载”功能。

在开发过程中，可以通过以下命令重新编译 GraphQL 片段：

• yarn relay: 重新编译 GraphQL 片段。
• yarn relay --watch: 在观察模式下重新编译 GraphQL 片段。

3. 项目的配置文件介绍

项目的配置文件主要用于定义环境变量和应用程序的设置。

• .env: 包含本地开发环境的环境变量。
• .env.production: 包含生产环境的环境变量。
• .env.test: 包含测试环境的环境变量。

此外，src 目录下的 config.js 文件用于配置应用程序的设置，这些设置将被传递给客户端。

通过以上介绍，你可以开始使用 React Firebase Starter 来构建你的应用程序。记得在开始之前，确保你的开发环境已经安装了 Node.js、Yarn 和 PostgreSQL。