{"id":24771392,"url":"https://github.com/ziyi2/react-tutorial","last_synced_at":"2025-10-07T22:43:27.845Z","repository":{"id":53812811,"uuid":"209179689","full_name":"ziyi2/react-tutorial","owner":"ziyi2","description":"React学习文档","archived":false,"fork":false,"pushed_at":"2021-03-12T09:44:42.000Z","size":644,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T04:01:35.732Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ziyi2.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}},"created_at":"2019-09-18T00:11:46.000Z","updated_at":"2022-05-11T06:42:18.000Z","dependencies_parsed_at":"2022-08-21T17:20:19.827Z","dependency_job_id":null,"html_url":"https://github.com/ziyi2/react-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ziyi2","download_url":"https://codeload.github.com/ziyi2/react-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245164227,"owners_count":20571087,"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","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":[],"created_at":"2025-01-29T04:00:47.991Z","updated_at":"2025-10-07T22:43:22.781Z","avatar_url":"https://github.com/ziyi2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Tutorial\n\n这是一个刚从 Vue 转向 React 技术栈的小白学习教程。\n\n## 创建应用程序\n\nVue 的开发者一般都知道开发的标准工具[Vue CLI](https://cli.vuejs.org/zh/)，在 React 中也有类似的开发工具[Create React App](https://www.html.cn/create-react-app/docs/getting-started/)用于创建 React 应用：\n\n- [使用 Create React App 新建应用](https://github.com/ziyi2/react-tutorial/blob/master/docs/create.md)\n\n## 设置编辑器\n\n在这里加入了一些推荐的 VS Code 插件和 VS Code 配置，从而提供开发效率：\n\n- [VS Code 设置](https://github.com/ziyi2/react-tutorial/blob/master/docs/setting.md)\n\n## 集成开发工具\n\n以前设计 Vue 脚手架时会在脚手架中集成一些提高开发效率的小工具（可以通过 Vue CLI 插件的形式集成），在 Create React App 中需要手动添加改善编辑器或者应用体验的这些工具：\n\n- [在编辑器中自动修复 Lint](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%AD%E8%87%AA%E5%8A%A8%E4%BF%AE%E5%A4%8D-lint)\n- [在编辑器中自动格式化代码](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%AD%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81)\n- [在应用中加入提交代码的 ESLint 检查功能](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E5%BA%94%E7%94%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%E7%9A%84-eslint-%E6%A3%80%E6%9F%A5%E5%8A%9F%E8%83%BD)\n- [在应用中加入提交说明规范工具](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E5%BA%94%E7%94%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E6%8F%90%E4%BA%A4%E8%AF%B4%E6%98%8E%E8%A7%84%E8%8C%83%E5%B7%A5%E5%85%B7)\n\n## 样式设置\n\n在 React Create App 中支持预处理器和类似于 Vue Scoped CSS 功能的样式设置：\n\n- [支持 Less](https://github.com/ziyi2/react-tutorial/blob/master/docs/style.md#%E6%B7%BB%E5%8A%A0-less)\n- [支持 Scoped Css](https://github.com/ziyi2/react-tutorial/blob/master/docs/style.md#%E6%B7%BB%E5%8A%A0-scoped-css)\n\n## 组件引入\n\n\u003e [antd](https://ant.design/docs/react/introduce-cn) 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。\n\n这里引入 antd 组件来快速设计应用样式。\n\n## 路由解决方案\n\nVue 的路由解决方案[`vue-router`](https://github.com/vuejs/vue-router)可以通过 Vue CLI 系统的`vue create`命令快速集成到项目中，但是在 React 中需要手动集成 React 的路由解决方案[`react-router`](https://github.com/ReactTraining/react-router)：\n\n- [路由组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6)\n- [匹配组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E5%8C%B9%E9%85%8D%E7%BB%84%E4%BB%B6)\n- [匹配组件渲染方式](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F)\n- [导航组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6)\n- 服务端渲染\n- 滚动还原\n- 嵌套路由\n- 静态路由\n- 代码拆分\n\n## React 语法\n\n## React 调试工具\n\n## React Redux\n\n## \b\bRxjs\n\n## 中台前端/设计解决方案\n\n- [ANT DESIGN PRO](https://pro.ant.design/index-cn)\n\n## React Awesome\n\n## React Static\n\n## React Next\n\n## 参考链接\n\n- [Create React App](https://www.html.cn/create-react-app/docs/getting-started/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziyi2%2Freact-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fziyi2%2Freact-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziyi2%2Freact-tutorial/lists"}