claytoncountysd/jotsjailinterface

React Starter App

镜像概述和主要用途

React Starter App 是一个React应用开发启动模板，旨在提供标准化的开发环境、编码规范和自动化部署流程。该模板集成了ESLint、Prettier等开发工具，定义了详细的编码标准，并通过GitHub Action实现Docker镜像的自动构建与推送，帮助开发团队快速搭建符合规范的React应用项目。

核心功能和特性

• 开发工具集成：包含ESLint代码检查和Prettier代码格式化工具，确保代码风格一致
• 自动化部署：通过GitHub Action实现代码推送时自动构建并推送Docker镜像至Docker Hub
• 编码标准规范：提供详细的命名规范、代码结构、注释风格等编码标准
• 项目初始化脚本：提供便捷的项目初始化脚本，支持快速创建新的React应用
• StoryBook支持：集成StoryBook用于组件开发和文档化

使用场景和适用范围

适用于需要快速启动React应用开发的团队或个人，尤其是需要遵循统一编码规范、实现自动化部署的开发场景。可作为企业内部React项目的标准化启动模板，确保团队开发效率和代码质量。

详细使用方法和配置说明

资源

• StoryBook

环境设置

NPM依赖管理

• 安装模块时需指定版本以锁定依赖
• 执行命令 npm install PackageName@version 指定版本安装

Prettier配置

Prettier本身不包含所有必要的配置来强制ESLint规则和编码标准，因此结合ESLint的--fix命令与Prettier使用：

1. 从VS Code市场安装"Prettier ESLint"插件
2. 在编辑器设置中，将默认格式化程序设置为"Prettier ESLint"：
   • 通过设置UI："Editor: Default Formatter"选择"rvest.vs-code-prettier-eslint"
   • 或在settings.json中添加："editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
3. 开启"Editor: Format on Save"：
   • 通过设置UI启用"Editor: Format on Save"
   • 或在settings.json中添加："editor.formatOnSave": true
4. 手动运行Prettier：npm run prettier
5. Prettier详细文档：Prettier官网

ESLint配置

配置"Prettier ESLint"后，.eslintrc.json文件将自动作为ESLint配置文件加载。

GitHub Action - 构建并推送Docker镜像至Docker Hub

触发条件

当代码推送到以下分支时触发Action，镜像将以分支名作为标签：

• Main
• Develop
• Release/*

配置步骤

1. 在GitHub仓库设置中添加以下secrets（由仓库所有者或授权人员操作）：
   • DOCKER_USERNAME：Docker Hub仓库的授权用户名
   • DOCKER_PASSWORD：上述用户名的密码
   • DOCKER_REPO_REGISTRY_NAME：例如：claytoncountysd
   • DOCKER_REPO_NAME：例如：react-starter-app

编码标准检查清单

• 布尔值命名需以_Flag结尾（如variableNameFlag）
• 数组命名需以List结尾（如nameOfVariableList）
• 组件名称使用完整驼峰式命名（如ComponentName而非componentName）
• 父组件传递给子组件的props应与子组件的props名称保持一致
• 不使用var声明变量，静态变量用const，非静态变量用let
• 使用useMemo简化仅用于从其他值派生值的有状态逻辑
• 使用propTypes和defaultProps减少非语义化的变量验证代码
• 使用特定的数组函数（map、filter、reduce等）代替for循环
• 访问属性时使用可选链操作符短路处理
• 可能时使用三元运算符简化if/else语句
• 不允许悬空的if语句
• 保持StoryBook更新
• 代码段的目的或潜在问题需使用/* C风格 */注释；使用/** */注释标注prop类型（可能需要jsdocs以获得智能提示）；使用/ /注释作为标题或标记代码的逻辑部分；测试时注释代码使用标准// C++风格注释（确保清理），例如：

javascript
/ prop types /
Form.propTypes = {
    /**
     * 标题，在适用时显示在表单框架中
     */
    title: PropTypes.string,
    /**
     * 初始表单数据，例如：data={{firstName: "Bill", lastName: "Jameson", enabled: true}}
     */
    data: PropTypes.object,
    /** 用于调试目的
     * 显示所有信息——当前表单数据、当前表单验证、当前表单状态、表单初始数据
     */
    showInfo: PropTypes.bool,
    /** 用于调试目的
     * 显示当前表单数据
     */
    showData: PropTypes.bool,
    /** 用于调试目的
     * 显示当前表单验证
     */
    showValidation: PropTypes.bool,
    /** 用于调试目的
     * 显示当前表单状态
     */
    showStatus: PropTypes.bool,
    /** 用于调试目的
     * 显示表单初始数据——或提交后的最后提交数据
     * 重置表单会将当前表单数据更改为该值
     */
    showInitialData: PropTypes.bool,
    /**
     * 指示表单是否包含默认提交按钮
     */
    submitButton: PropTypes.bool,
    /**
     * 指示表单是否包含默认重置按钮
     */
    resetButton: PropTypes.bool,
    /**
     * 指示表单是否包含默认清除按钮
     */
    clearButton: PropTypes.bool,
    /**
     * 指示成功提交后（之后）要执行的操作
     */
    onSubmit: PropTypes.func,
    /**
     * 如果为true，验证错误仅在首次提交尝试后显示
     */
    validateOnlyAfterSubmit: PropTypes.bool,
    /**
     * 如果为true，即使数据未更改（未修改）也可以提交表单
     */
    canSubmitUnchanged: PropTypes.bool,
    /**
     * 不要将子元素作为props传递。而是将子元素嵌套在开始和结束标签之间。
     */
    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};

• 在函数顶部解构组件中使用的props。子组件props通过展开运算符传递，例如：

javascript
const Component = props => {
    const { prop1, prop3 } = props;

    return <Child {...props} />;
};

• 如果多个子组件需要来自父组件的不同props，将它们解构为各自的对象，例如：

javascript
const Component = props => {
    const { prop1, prop3 } = props;
    const child1Props = useMemo(() => {
        child1prop1 = props.uniqueProp1;
    }, [props]);

    const child2Props = useMemo(() => {
        child2prop1 = props.uniqueProp2;
    }, [props]);

    return (
        <>
            <Child1 {...child1Props} />
            <Child2 {...child2Props} />
        </>
    );
};

请求代码审查前检查

• 查看站会记录中需要修改的内容并进行修改
• 检查所有更改/新增文件并验证使用情况
• 删除未使用的声明/导入
• 删除未使用的props
• 寻找优化点（如使用useMemo等）
• 尽可能解决所有todo语句
• 在GitHub上查看所有更改/新增文件，验证文件结构和命名
• 检查更改/新增文件，确保没有失效代码
• 拉取最新的dev代码并合并到当前分支
• 验证是否使用了最新的CJIS、hooks、utils等
• 确保控制台中没有错误或警告，删除console.log，移除未使用的声明/props
• 确保每个新增文件/更改文件中的新prop都有default props和prop types
• 更新任务列并添加必要的备注

基于react-starter-app创建新的React应用

（以下示例中，我们将创建一个名为"new-react-app"的新仓库）

1. （可选）在GitHub上创建一个新的空白仓库，不进行任何配置更改：

   • 生产环境：https://github.com/RicWilliamsCC/new-react-app
   • 测试环境：可使用测试仓库或https://github.com/bill-jameson/new-react-app%EF%BC%88%E5%A6%82%E6%9E%9C%E5%B7%B2%E5%AD%98%E5%9C%A8%EF%BC%8C%E8%AE%B0%E5%BE%97%E5%88%A0%E9%99%A4%E5%B9%B6%E6%9B%BF%E6%8D%A2%E4%B8%BA%E7%A9%BA%E7%99%BD%E4%BB%93%E5%BA%93%EF%BC%89

2. 在本地PC上执行以下命令（例如在repos文件夹中）：

bash
# 克隆react-starter-app仓库并命名为new-react-app
git clone https://github.com/RicWilliamsCC/react-starter-app new-react-app

# 进入新目录
cd new-react-app

# 如果正在开发或测试init-script本身，切换到功能分支
git checkout (功能分支名称)
# 测试时，更新scripts/init-app.js顶部设置中的REMOTE_TARGET_URL

# 运行初始化脚本
npm run init-app

3. 运行npm run init-app后，根据提示执行：

   • 输入新仓库名称（例如new-react-app）
   • 按提示输入GitHub凭据
   • 输入环境变量值
   • 确认/输入默认的git flow设置：
     • 生产发布分支名称：[main]
     • "下一个发布"开发分支名称：[develop]
     • 功能分支前缀？[feature/]
     • 修复分支前缀？[bugfix/]
     • 发布分支前缀？[release/]
     • 热修复分支前缀？[hotfix/]
     • 支持分支前缀？[support/]
     • 版本标签前缀？2.0（需手动输入）
     • Hooks和filters目录？选择默认

4. 验证应用是否正常运行：

bash
npm run start