{"id":21978723,"url":"https://github.com/sangka/react-roadmap","last_synced_at":"2025-08-21T20:31:59.367Z","repository":{"id":80432370,"uuid":"140808186","full_name":"SangKa/react-roadmap","owner":"SangKa","description":"React 学习路线图 - 2018 版","archived":false,"fork":false,"pushed_at":"2018-07-14T08:12:38.000Z","size":6268,"stargazers_count":208,"open_issues_count":0,"forks_count":30,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-12-13T03:34:28.657Z","etag":null,"topics":["react","react-roadmap","reactjs","roadmap"],"latest_commit_sha":null,"homepage":"","language":null,"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/SangKa.png","metadata":{"files":{"readme":"README.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.png","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-13T06:45:24.000Z","updated_at":"2024-11-13T06:49:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"f42a42ed-30d2-407c-bd80-1349b6460f66","html_url":"https://github.com/SangKa/react-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/SangKa%2Freact-roadmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SangKa%2Freact-roadmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SangKa%2Freact-roadmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SangKa%2Freact-roadmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SangKa","download_url":"https://codeload.github.com/SangKa/react-roadmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230532443,"owners_count":18240792,"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":["react","react-roadmap","reactjs","roadmap"],"created_at":"2024-11-29T16:26:21.583Z","updated_at":"2024-12-20T04:06:56.839Z","avatar_url":"https://github.com/SangKa.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 学习路线图\n\n\u003e 此学习路线将指引你在 2018 年成为 React 开发者\n\n此仓库是 [react-developer-roadmap](https://github.com/adam-golab/react-developer-roadmap) 的中文版。\n\n下面的思维导图展示了 React 的学习路线以及在学习道路上所需要学习的东西。我画此图的目的主要是为了让问我“我接下来要学什么才能成为 React 开发者？”的人有一个清晰的目标。\n\n## 免责声明\n\n\u003e 此学习路线图的目的是为了 React 整体生态有个概念。如果你对于接下来要学习什么感到困惑的话，它将指引你，但并不会鼓励你去盲目地追从一些时髦和新潮的技术。你应该理解为什么某个工具在某些情况下比另一个更加适合，记住时髦和新潮的技术并不总是最适合用于工作当中\n\n## 学习路线图\n\n![Roadmap](./roadmap.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        * 学习新功能 (ES 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 scripts](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/SCSS](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. CSS in JS\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. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)\n    2. [Redux](https://redux.js.org/)\n        1. 异步 actions (副作用)\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            * [Redux Persist](https://github.com/rt2zz/redux-persist)\n            * [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)\n        3. [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    * [Ramda](https://ramdajs.com/)\n12. 测试\n    1. 单元测试\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. 端到端测试\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    3. 集成测试\n        * [Karma](https://karma-runner.github.io/)\n13. 国际化\n    * [React Intl](https://github.com/yahoo/react-intl)\n    * [React i18next](https://react.i18next.com/)\n14. 服务端渲染\n    * [Next.js](https://nextjs.org/)\n    * [After.js](https://github.com/jaredpalmer/after.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. 虚拟现实\n    * [React 360](https://facebook.github.io/react-360/)\n\n## 总结\n\n如果你认为此学习路线图还有改进之处，请提 PR 或 issues 。还有，我会持续进行补充与完善，所以你可能会想要给我个 star 以便于以后浏览。\n\n## 参与贡献\n\n学习路线图是使用 [Draw.io](https://www.draw.io/) 画的。文件就放在 `/src` 目录下。想要修改思维导图，先打开 draw.io ，点击 **Open Existing Diagram** 然后选择 `xml` 文件。之后就会打开思维导图，修改之后上传后更新 README 的 PNG 图片 (需要导出)，然后提交 PR 。\n\n- 提交 PR 以帮助改进\n- 在 issues 中进行讨论想法\n- 帮忙宣传\n\n## License\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%2Fsangka%2Freact-roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsangka%2Freact-roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsangka%2Freact-roadmap/lists"}