# encode-hooks-react

**Repository Path**: sunzhenfeng9/encode-hooks-react

## Basic Information

- **Project Name**: encode-hooks-react
- **Description**: 从0搭建，掌握一个复杂前端项目从产品定位开始，到技术选型、架构设计，直至交付的完整流程，完成一个能够带给开发提效的React Hooks库和支持Hooks demo展示官网。助力沉淀业务中常用的功能
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-11
- **Last Updated**: 2024-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目实战

## 项目资料

- 文档地址： https://nwy3y7fy8w5.feishu.cn/docx/YMoPdpUMvopwTRxddRCcQ6Ken0c
- 官网地址：
  - https://encode-studio-fe.github.io/fe-spec/
  - encode-bundle: https://encode-studio-fe.github.io/encode-bundle/
  - dumi: https://d.umijs.org/
  - vuepress: https://vuepress.vuejs.org/zh/

## 项目背景

在前端项目开发中，我们通常有着各种各样可以复用的业务场景，如何能够将重复的代码量转为可复用的开发工具，是判断一个程序员编码水平及代码能力的衡量因素之一。但如何实现代码复用，也是前端开发同学乃至前端架构师都老生常谈的一个问题。
除此之外，很多同学在平时的开发中只是实现最基本的页面开发，对于构建工具的使用，测试用例的编写都少有涉及，在前端 gulp、grunt、webpack、esbuild、SWC、vite、trubo 等构件工具越出越多的背景下，如何掌握和选择这些框架，也是能够体现是否到达高级前端开发工程师水平的一个衡量依据。因此，这里我们通过以 React 为前端框架，React Hooks 作为核心产出，从 0 ～ 1 手把手搭建一个前端业务 Hooks 库，从产品设计、框架选择、架构设计到最终的编码落地，通过一个完整的产品实现，解决如何提升代码复用的问题。

## 项目目标

从 0 ～ 1 掌握一个复杂前端项目从产品定位开始，到技术选型、架构设计，直至最终交付的完整流程，最终交付出一个能够带给开发提效的 React Hooks 库和支持 Hooks demo 展示官网。助力沉淀业务中常用的功能。
技术上，可以掌握到：

1. 学习如何通过 gulp 和 webpack 进行 UMD 构建，以及如何将发包流程植入 CI 实现自动化发布，以及 CHANGLOG 的自动化更新部署；
2. 学习如何从 0 ～ 1 封装一批业务上常见的 React Hooks；
3. 学习如何通过 jest 对 hooks 进行测试用例的编码；
4. 学习如何像使用 dumi 搭建产品官网，并实现同 Element UI 一样，将封装好的 Hooks 在官网中实现 demo 展示

## 项目介绍

基于 encode-fe-lint (https://encode-studio-fe.github.io/fe-spec/cli/encode-fe-lint) 配套 Lint 工具，可以为项目一键接入规范、一键扫描和修复规范问题，保障项目的编码规范和代码质量。

- ./packages 多包管理
- ./package.json => private 是否允许参与发布