README-CN.md

React 开发者指南

README in English

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

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

免责声明

该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。

Roadmap

资源

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 进行强力搜索
   4. 熟悉终端，并配置你的 shell (bash, zsh, fish)
   5. 阅读一些关于算法和数据结构的书籍
   6. 阅读一些关于设计模式的书籍
3. 在官网上学习 React 或者完成一些课程
4. 熟悉你将用到的工具
   1. 包管理器
      • npm
      • yarn
      • pnpm
   2. 任务运行器
      • npm 脚本
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. 样式
   1. CSS 预处理器
      • Sass/CSS
      • PostCSS
      • Less
      • Stylus
   2. CSS 框架
      • Bootstrap
      • Materialize, Material UI, Material Design Lite
      • Bulma
      • Semantic UI
   3. CSS 架构
      • BEM
      • CSS Modules
      • Atomic
      • OOCSS
      • SMACSS
      • SUITCSS
   4. JS 编写 CSS
      • Styled Components
      • Radium
      • Emotion
      • JSS
      • Aphrodite
6. 状态管理
   1. 组件状态/上下文 API
   2. Redux
      1. 异步操作 (Side Effects)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. 助手
         • Rematch
         • Reselect
      3. 数据持久化
         • Redux Persist
         • Redux Phoenix
      4. Redux Form
   3. MobX
7. 类型检查器
   • PropTypes
   • TypeScript
   • Flow
8. 表单助手
   • Redux Form
   • Formik
   • Formsy
   • Final Form
9. 路由
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. API 客户端
    1. REST
       • Fetch
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relay
       • urql
11. 实用工具库
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • Ramda
12. 测试
    1. 单元（Unit）测试
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. 端到端（E2E）测试
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
       • Nightwatch.js
    3. 集成测试
       • Karma
13. 国际化（i18n)
    • React Intl
    • React i18next
14. 服务端渲染（SSR)
    • Next.js
    • After.js
    • Rogue
15. 静态网站生成器
    • Gatsby
16. 后端集成框架
    • React on Rails
17. 移动端
    • React Native
    • Cordova/Phonegap
18. 桌面端
    • Proton Native
    • Electron
    • React Native Windows
19. 虚拟现实（VR)
    • React 360

总结

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

贡献

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

• 改进后提交 PR
• 讨论问题中的想法
• 传播消息

版权许可