{"id":13394263,"url":"https://github.com/adam-golab/react-developer-roadmap","last_synced_at":"2025-03-13T20:31:27.095Z","repository":{"id":37445264,"uuid":"137583435","full_name":"adam-golab/react-developer-roadmap","owner":"adam-golab","description":"Roadmap to becoming a React developer","archived":false,"fork":false,"pushed_at":"2024-02-16T12:34:44.000Z","size":15786,"stargazers_count":18752,"open_issues_count":35,"forks_count":2028,"subscribers_count":584,"default_branch":"master","last_synced_at":"2024-07-31T17:21:45.572Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adam-golab.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap-cn.png","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-16T13:40:50.000Z","updated_at":"2024-07-31T15:12:16.000Z","dependencies_parsed_at":"2024-10-25T15:06:38.624Z","dependency_job_id":null,"html_url":"https://github.com/adam-golab/react-developer-roadmap","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/adam-golab%2Freact-developer-roadmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-golab%2Freact-developer-roadmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-golab%2Freact-developer-roadmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-golab%2Freact-developer-roadmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adam-golab","download_url":"https://codeload.github.com/adam-golab/react-developer-roadmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478080,"owners_count":20297189,"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":"2024-07-30T17:01:14.226Z","updated_at":"2025-03-13T20:31:25.420Z","avatar_url":"https://github.com/adam-golab.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Learning Paths","FrontEnd","Roadmaps【[This part forked from awesome-roadmaps](https://github.com/orsanawwad/awesome-roadmaps)】","Web Development","Javascript","To Sort","目录","ReactJS","前端开发框架及项目","Roadmaps","React \u003ca name=\"react\"\u003e\u003c/a\u003e","Roadmap","七、GitHub 优质仓库精选","🗺️ Roadmaps.","📦 Legacy \u0026 Inactive Projects","[Ready](https://github.com/orsanawwad/awesome-roadmaps \"Ready\") [Roadmaps](https://github.com/liuchong/awesome-roadmaps \"Roadmaps\")"],"sub_categories":["React相关","其他_文本生成、文本对话","综合"],"readme":"# React 开发者指南\n\n[README in English](README.md)\n\n[README in Japanese](README-JA.md)\n\n[README in Korean](README-KO.md)\n\n[README in Portuguese (Brazil)](README-PTBR.md)\n\n[README in Russian](README-RU.md)\n\n[README in Spanish](README-ES.md)\n\n\u003e 该指南将助你在 2019 成为一名 React 开发者\n\n你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人。\n\n## 免责声明\n\n\u003e 该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。\n\u003e 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。\n\n## Roadmap\n\n![Roadmap](./roadmap-cn.png)\n\n## 资源\n\n1.  基础\n    1.  HTML\n        - 学习 HTML 基础知识\n        - 做几个页面来练习\n    2.  CSS\n        - 学习 CSS 基础知识\n        - 完成上一步的样式页面\n        - 使用 grid 布局和 flexbox 布局构建页面\n    3.  JS 基础\n        - 熟悉语法\n        - 学习 DOM 的基本操作\n        - 学习 JS 的典型机制（状态提升，事件冒泡，原型）\n        - 实现一些 AJAX（XHR）调用\n        - 学习新特性 (ECMA Script 6+)\n        - 另外，熟悉 jQuery 库\n2.  常用开发技能\n    1.  学习 GIT 的使用, 在 GitHub 上创建一些仓库, 并和其他人分享你的代码\n    2.  掌握 HTTP(S) 协议, 及其请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)\n    3.  不要害怕使用 Google, [使用 Google 进行强力搜索](http://www.powersearchingwithgoogle.com/)\n    4.  熟悉终端，并配置你的 shell (bash, zsh, fish)\n    5.  阅读一些关于算法和数据结构的书籍\n    6.  阅读一些关于设计模式的书籍\n3.  在[官网](https://reactjs.org/tutorial/tutorial.html)上学习 React 或者完成一些[课程](https://egghead.io/courses/the-beginner-s-guide-to-react)\n4.  熟悉你将用到的工具\n    1.  包管理器\n        - [npm](https://www.npmjs.com/)\n        - [yarn](https://yarnpkg.com/lang/en/)\n        - [pnpm](https://pnpm.js.org/)\n    2.  任务运行器\n        - [npm 脚本](https://docs.npmjs.com/misc/scripts)\n        - [gulp](https://gulpjs.com/)\n    - [Webpack](https://webpack.js.org/)\n    - [Rollup](https://rollupjs.org/guide/en)\n    - [Parcel](https://parceljs.org/)\n5.  样式\n    1.  CSS 预处理器\n        - [Sass/CSS](https://sass-lang.com/)\n        - [PostCSS](https://postcss.org/)\n        - [Less](http://lesscss.org/)\n        - [Stylus](http://stylus-lang.com/)\n    2.  CSS 框架\n        - [Bootstrap](https://getbootstrap.com/)\n        - [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)\n        - [Bulma](https://bulma.io/)\n        - [Semantic UI](https://semantic-ui.com/)\n    3.  CSS 架构\n        - [BEM](http://getbem.com/)\n        - [CSS Modules](https://github.com/css-modules/css-modules)\n        - [Atomic](https://acss.io/)\n        - [OOCSS](https://github.com/stubbornella/oocss/wiki)\n        - [SMACSS](https://smacss.com/)\n        - [SUITCSS](https://suitcss.github.io/)\n    4.  JS 编写 CSS\n        - [Styled Components](https://www.styled-components.com/)\n        - [Radium](https://formidable.com/open-source/radium/)\n        - [Emotion](https://emotion.sh/)\n        - [JSS](http://cssinjs.org/)\n        - [Aphrodite](https://github.com/Khan/aphrodite)\n6.  状态管理\n    1.  [组件状态](https://reactjs.org/docs/faq-state.html)/[上下文 API](https://reactjs.org/docs/context.html)\n    2.  [Redux](https://redux.js.org/)\n        1.  异步操作 (Side Effects)\n            - [Redux Thunk](https://github.com/reduxjs/redux-thunk)\n            - [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)\n            - [Redux Saga](https://redux-saga.js.org/)\n            - [Redux Observable](https://redux-observable.js.org)\n        2. 助手\n            * [Rematch](https://rematch.gitbooks.io/rematch/)\n            * [Reselect](https://github.com/reduxjs/reselect)\n        3.  数据持久化\n            - [Redux Persist](https://github.com/rt2zz/redux-persist)\n            - [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)\n        4.  [Redux Form](https://redux-form.com)\n    3.  [MobX](https://mobx.js.org/)\n7.  类型检查器\n    - [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)\n    - [TypeScript](https://www.typescriptlang.org/)\n    - [Flow](https://flow.org/en/)\n8.  表单助手\n    - [Redux Form](https://redux-form.com)\n    - [Formik](https://github.com/jaredpalmer/formik)\n    - [Formsy](https://github.com/formsy/formsy-react)\n    - [Final Form](https://github.com/final-form/final-form)\n9.  路由\n    - [React-Router](https://reacttraining.com/react-router/)\n    - [Router5](https://router5.js.org/)\n    - [Redux-First Router](https://github.com/faceyspacey/redux-first-router)\n    - [Reach Router](https://reach.tech/router/)\n10. API 客户端\n    1.  REST\n        - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n        - [SuperAgent](https://visionmedia.github.io/superagent/)\n        - [axios](https://github.com/axios/axios)\n    2.  GraphQL\n        - [Apollo](https://www.apollographql.com/docs/react/)\n        - [Relay](https://facebook.github.io/relay/)\n        - [urql](https://github.com/FormidableLabs/urql)\n11. 实用工具库\n    - [Lodash](https://lodash.com/)\n    - [Moment](https://momentjs.com/)\n    - [classnames](https://github.com/JedWatson/classnames)\n    - [Numeral](http://numeraljs.com/)\n    - [RxJS](http://reactivex.io/)\n    - [ImmutableJS](https://facebook.github.io/immutable-js/)\n    - [Ramda](https://ramdajs.com/)\n12. 测试\n    1.  单元（Unit）测试\n        - [Jest](https://facebook.github.io/jest/)\n        - [Enzyme](http://airbnb.io/enzyme/)\n        - [Sinon](http://sinonjs.org/)\n        - [Mocha](https://mochajs.org/)\n        - [Chai](http://www.chaijs.com/)\n        - [AVA](https://github.com/avajs/ava)\n        - [Tape](https://github.com/substack/tape)\n    2.  端到端（E2E）测试\n        - [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)\n        - [Cypress](https://cypress.io/)\n        - [Puppeteer](https://pptr.dev/)\n        - [Cucumber.js](https://github.com/cucumber/cucumber-js)\n        - [Nightwatch.js](http://nightwatchjs.org/)\n    3.  集成测试\n        - [Karma](https://karma-runner.github.io/)\n13. 国际化（i18n)\n    - [React Intl](https://github.com/yahoo/react-intl)\n    - [React i18next](https://react.i18next.com/)\n14. 服务端渲染（SSR)\n    - [Next.js](https://nextjs.org/)\n    - [After.js](https://github.com/jaredpalmer/after.js)\n    - [Rogue](https://github.com/alidcastano/rogue.js)\n15. 静态网站生成器\n    - [Gatsby](https://www.gatsbyjs.org/)\n16. 后端集成框架\n    - [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)\n17. 移动端\n    - [React Native](https://facebook.github.io/react-native/)\n    - [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)\n18. 桌面端\n    - [Proton Native](https://proton-native.js.org/)\n    - [Electron](https://electronjs.org/)\n    - [React Native Windows](https://github.com/Microsoft/react-native-windows)\n19. 虚拟现实（VR)\n    - [React 360](https://facebook.github.io/react-360/)\n\n## 总结\n\n如果你认为指南可以改进，请提交包含任何更新的 PR 并提交任何问题。此外，我将继续改进这个仓库，因此你可以 star 这个仓库以便于重新访问。\n\n## 贡献\n\n该指南是使用[Draw.io](https://www.draw.io/)构建的。项目文件可以在 `/src` 目录中找到。要修改它, 请打开 draw.io, 点击 **Open Existing Diagram** 并选择项目中的 `xml` 文件。它将为你打开指南，更新它，上传和更新自述文件中的图像并创建一个 PR（导出为 png）。\n\n- 改进后提交 PR\n- 讨论问题中的想法\n- 传播消息\n\n## 版权许可\n\n[![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadam-golab%2Freact-developer-roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadam-golab%2Freact-developer-roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadam-golab%2Freact-developer-roadmap/lists"}