{"id":13496039,"url":"https://github.com/worldzhao/react-ui-library-tutorial","last_synced_at":"2025-08-01T04:45:59.314Z","repository":{"id":40653730,"uuid":"228736763","full_name":"worldzhao/react-ui-library-tutorial","owner":"worldzhao","description":"📚React组件库搭建指南","archived":false,"fork":false,"pushed_at":"2023-08-05T06:29:39.000Z","size":3405,"stargazers_count":501,"open_issues_count":5,"forks_count":120,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-06T02:07:13.791Z","etag":null,"topics":["frontend","react","react-components","react-tutorial","tutorial","tutorial-demos","web"],"latest_commit_sha":null,"homepage":"https://worldzhao.github.io/react-ui-library-tutorial/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/worldzhao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-18T01:59:46.000Z","updated_at":"2025-07-03T02:27:12.000Z","dependencies_parsed_at":"2024-11-20T13:45:03.049Z","dependency_job_id":null,"html_url":"https://github.com/worldzhao/react-ui-library-tutorial","commit_stats":{"total_commits":47,"total_committers":5,"mean_commits":9.4,"dds":"0.25531914893617025","last_synced_commit":"707c1b5501ff8db3521f8cf4b07043e9db77d5a0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/worldzhao/react-ui-library-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Freact-ui-library-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Freact-ui-library-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Freact-ui-library-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Freact-ui-library-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/worldzhao","download_url":"https://codeload.github.com/worldzhao/react-ui-library-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Freact-ui-library-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268171719,"owners_count":24207418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","react","react-components","react-tutorial","tutorial","tutorial-demos","web"],"created_at":"2024-07-31T19:01:41.201Z","updated_at":"2025-08-01T04:45:59.237Z","avatar_url":"https://github.com/worldzhao.png","language":"TypeScript","readme":"## React 组件库搭建指南\n\n- [React 组件库搭建指南（一）：项目初始化](https://github.com/worldzhao/blog/issues/3)\n- [React 组件库搭建指南（二）：开发调试](https://github.com/worldzhao/blog/issues/4)\n- [React 组件库搭建指南（三）：编译打包](https://github.com/worldzhao/blog/issues/5)\n- [React 组件库搭建指南（四）：单元测试](https://github.com/worldzhao/blog/issues/6)\n- [React 组件库搭建指南（五）：标准化发布流程](https://github.com/worldzhao/blog/issues/7)\n\n[🚀 在线预览](https://worldzhao.github.io/react-ui-library-tutorial)\n\n🚆 本地预览\n\n```bash\ngit clone git@github.com:worldzhao/react-ui-library-tutorial.git\ncd react-ui-library-tutorial\npnpm install\npnpm start\n```\n\n按顺序执行完命令后，即可在 localhost:3000 端口看到以下内容：\n\n![preview](https://raw.githubusercontent.com/worldzhao/blog/master/images/rc-lib-v1-1.jpg)\n\n## 概览\n\n本系列文章主要包含以下内容：\n\n- 项目初始化: 组件库前期开发准备工作。`eslint`/`commit lint`/`typescript`等等；\n- 开发阶段: 使用 [dumi](https://d.umijs.org/zh-CN) 进行开发调试以及文档编写；\n- 打包阶段: 输出~~`umd`~~/`cjs`/`esm`产物并支持按需加载；\n- 组件测试: 使用`@testing-library/react`及其相关生态进行组件测试；\n- 发布 npm: 编写脚本完成发布或直接使用 [np](https://www.npmjs.com/package/np) 发布；\n- 部署文档站点: 使用 Github Pages 以及 Github Actions 完成文档站点自动部署。\n","funding_links":[],"categories":["TypeScript","目录"],"sub_categories":["\u003ca id=\"project\"\u003e项目\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworldzhao%2Freact-ui-library-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworldzhao%2Freact-ui-library-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworldzhao%2Freact-ui-library-tutorial/lists"}