Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/adam-golab/react-developer-roadmap

Roadmap to becoming a React developer
https://github.com/adam-golab/react-developer-roadmap

Last synced: about 1 month ago
JSON representation

Roadmap to becoming a React developer

Lists

README 

        
# React 开发者指南



[README in English](README.md)



[README in Japanese](README-JA.md)



[README in Korean](README-KO.md)



[README in Portuguese (Brazil)](README-PTBR.md)



[README in Russian](README-RU.md)



[README in Spanish](README-ES.md)



> 该指南将助你在 2019 成为一名 React 开发者



你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人。



## 免责声明



> 该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。

> 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。



## Roadmap



![Roadmap](./roadmap-cn.png)



## 资源



1.  基础

    1.  HTML

        - 学习 HTML 基础知识

        - 做几个页面来练习

    2.  CSS

        - 学习 CSS 基础知识

        - 完成上一步的样式页面

        - 使用 grid 布局和 flexbox 布局构建页面

    3.  JS 基础

        - 熟悉语法

        - 学习 DOM 的基本操作

        - 学习 JS 的典型机制（状态提升，事件冒泡，原型）

        - 实现一些 AJAX（XHR）调用

        - 学习新特性 (ECMA Script 6+)

        - 另外，熟悉 jQuery 库

2.  常用开发技能

    1.  学习 GIT 的使用, 在 GitHub 上创建一些仓库, 并和其他人分享你的代码

    2.  掌握 HTTP(S) 协议, 及其请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)

    3.  不要害怕使用 Google, [使用 Google 进行强力搜索](http://www.powersearchingwithgoogle.com/)

    4.  熟悉终端，并配置你的 shell (bash, zsh, fish)

    5.  阅读一些关于算法和数据结构的书籍

    6.  阅读一些关于设计模式的书籍

3.  在[官网](https://reactjs.org/tutorial/tutorial.html)上学习 React 或者完成一些[课程](https://egghead.io/courses/the-beginner-s-guide-to-react)

4.  熟悉你将用到的工具

    1.  包管理器

        - [npm](https://www.npmjs.com/)

        - [yarn](https://yarnpkg.com/lang/en/)

        - [pnpm](https://pnpm.js.org/)

    2.  任务运行器

        - [npm 脚本](https://docs.npmjs.com/misc/scripts)

        - [gulp](https://gulpjs.com/)

    - [Webpack](https://webpack.js.org/)

    - [Rollup](https://rollupjs.org/guide/en)

    - [Parcel](https://parceljs.org/)

5.  样式

    1.  CSS 预处理器

        - [Sass/CSS](https://sass-lang.com/)

        - [PostCSS](https://postcss.org/)

        - [Less](http://lesscss.org/)

        - [Stylus](http://stylus-lang.com/)

    2.  CSS 框架

        - [Bootstrap](https://getbootstrap.com/)

        - [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)

        - [Bulma](https://bulma.io/)

        - [Semantic UI](https://semantic-ui.com/)

    3.  CSS 架构

        - [BEM](http://getbem.com/)

        - [CSS Modules](https://github.com/css-modules/css-modules)

        - [Atomic](https://acss.io/)

        - [OOCSS](https://github.com/stubbornella/oocss/wiki)

        - [SMACSS](https://smacss.com/)

        - [SUITCSS](https://suitcss.github.io/)

    4.  JS 编写 CSS

        - [Styled Components](https://www.styled-components.com/)

        - [Radium](https://formidable.com/open-source/radium/)

        - [Emotion](https://emotion.sh/)

        - [JSS](http://cssinjs.org/)

        - [Aphrodite](https://github.com/Khan/aphrodite)

6.  状态管理

    1.  [组件状态](https://reactjs.org/docs/faq-state.html)/[上下文 API](https://reactjs.org/docs/context.html)

    2.  [Redux](https://redux.js.org/)

        1.  异步操作 (Side Effects)

            - [Redux Thunk](https://github.com/reduxjs/redux-thunk)

            - [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)

            - [Redux Saga](https://redux-saga.js.org/)

            - [Redux Observable](https://redux-observable.js.org)

        2. 助手

            * [Rematch](https://rematch.gitbooks.io/rematch/)

            * [Reselect](https://github.com/reduxjs/reselect)

        3.  数据持久化

            - [Redux Persist](https://github.com/rt2zz/redux-persist)

            - [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)

        4.  [Redux Form](https://redux-form.com)

    3.  [MobX](https://mobx.js.org/)

7.  类型检查器

    - [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)

    - [TypeScript](https://www.typescriptlang.org/)

    - [Flow](https://flow.org/en/)

8.  表单助手

    - [Redux Form](https://redux-form.com)

    - [Formik](https://github.com/jaredpalmer/formik)

    - [Formsy](https://github.com/formsy/formsy-react)

    - [Final Form](https://github.com/final-form/final-form)

9.  路由

    - [React-Router](https://reacttraining.com/react-router/)

    - [Router5](https://router5.js.org/)

    - [Redux-First Router](https://github.com/faceyspacey/redux-first-router)

    - [Reach Router](https://reach.tech/router/)

10. API 客户端

    1.  REST

        - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

        - [SuperAgent](https://visionmedia.github.io/superagent/)

        - [axios](https://github.com/axios/axios)

    2.  GraphQL

        - [Apollo](https://www.apollographql.com/docs/react/)

        - [Relay](https://facebook.github.io/relay/)

        - [urql](https://github.com/FormidableLabs/urql)

11. 实用工具库

    - [Lodash](https://lodash.com/)

    - [Moment](https://momentjs.com/)

    - [classnames](https://github.com/JedWatson/classnames)

    - [Numeral](http://numeraljs.com/)

    - [RxJS](http://reactivex.io/)

    - [ImmutableJS](https://facebook.github.io/immutable-js/)

    - [Ramda](https://ramdajs.com/)

12. 测试

    1.  单元（Unit）测试

        - [Jest](https://facebook.github.io/jest/)

        - [Enzyme](http://airbnb.io/enzyme/)

        - [Sinon](http://sinonjs.org/)

        - [Mocha](https://mochajs.org/)

        - [Chai](http://www.chaijs.com/)

        - [AVA](https://github.com/avajs/ava)

        - [Tape](https://github.com/substack/tape)

    2.  端到端（E2E）测试

        - [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)

        - [Cypress](https://cypress.io/)

        - [Puppeteer](https://pptr.dev/)

        - [Cucumber.js](https://github.com/cucumber/cucumber-js)

        - [Nightwatch.js](http://nightwatchjs.org/)

    3.  集成测试

        - [Karma](https://karma-runner.github.io/)

13. 国际化（i18n)

    - [React Intl](https://github.com/yahoo/react-intl)

    - [React i18next](https://react.i18next.com/)

14. 服务端渲染（SSR)

    - [Next.js](https://nextjs.org/)

    - [After.js](https://github.com/jaredpalmer/after.js)

    - [Rogue](https://github.com/alidcastano/rogue.js)

15. 静态网站生成器

    - [Gatsby](https://www.gatsbyjs.org/)

16. 后端集成框架

    - [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)

17. 移动端

    - [React Native](https://facebook.github.io/react-native/)

    - [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)

18. 桌面端

    - [Proton Native](https://proton-native.js.org/)

    - [Electron](https://electronjs.org/)

    - [React Native Windows](https://github.com/Microsoft/react-native-windows)

19. 虚拟现实（VR)

    - [React 360](https://facebook.github.io/react-360/)



## 总结



如果你认为指南可以改进，请提交包含任何更新的 PR 并提交任何问题。此外，我将继续改进这个仓库，因此你可以 star 这个仓库以便于重新访问。



## 贡献



该指南是使用[Draw.io](https://www.draw.io/)构建的。项目文件可以在 `/src` 目录中找到。要修改它, 请打开 draw.io, 点击 **Open Existing Diagram** 并选择项目中的 `xml` 文件。它将为你打开指南，更新它，上传和更新自述文件中的图像并创建一个 PR（导出为 png）。



- 改进后提交 PR

- 讨论问题中的想法

- 传播消息



## 版权许可



[![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/)