React 学习路线图 2018版

本文首发于知乎,各位可以通过点击文章下方的阅读原来来访问原文地址。

文中有多处学习资料链接,大家可以通过访问原文来获取

这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时,原仓库已经有了中文版,大家可自行选择查阅,由于是 roadmap 的聚合类列表,所以翻译方面差异不会很大。

学习路线图

资料

1.基础

i.HTML

·学习 HTML 基础

·写些页面作为练习

ii.CSS

·学习 CSS 基础

·在上一步练习的基础上为页面添加样式

·使用 grid 和 flexbox 为页面布局

iii.JS 基础

·熟悉语法

·学习 DOM 的基础操作

·学习 JS 中的经典机制 (提升、事件冒泡、原型)

·发起一些 AJAX (XHR) 请求

·学习新功能 (ES 6+)

·此外,熟悉下 jQuery 库

2.开发通用技能

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

ii.了解 HTTP(S) 协议,请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)

iii.别害怕使用 Google Google 的强力搜索

iv.熟悉终端,配置 shell (bash、zsh、fish)

v.读一些数据结构和算法的书

vi.读一些设计模式的书

3.在官方网站上学习 React ,或者看一些教程

4.熟悉一些将会用到的工具

i.包管理工具

·npm

·yarn

·pnpm

ii.任务执行工具

·npm scripts

·gulp

○Webpack

○Rollup

○Parcel

5.样式

CSS 预处理

·Sass/SCSS

·PostCSS

·Less

·Stylus

CSS 框架

·Bootstrap

·Materialize、Material UI、Material Design Lite

·Bulma

·Semantic UI

CSS 架构

·BEM

·CSS Modules

·Atomic

·OOCSS

·SMACSS

·SUITCSS

CSS in JS

·Styled Components

·Radium

·Emotion

·JSS

·Aphrodite

6.状态管理

i.Component State/Context API

ii.Redux

a.异步 actions (副作用)

·Redux Thunk

·Redux Better Promise

·Redux Saga

·Redux Observable

b.数据持久化

·Redux Persist

·Redux Phoenix

·Redux Form

iii.MobX

7.类型检查

○PropTypes

○TypeScript

○Flow

8.表单

○Redux Form

○Formik

○Formsy

○Final Form

9.路由

○React-Router

○Router5

○Redux-First Router

○Reach Router

10.API 客户端

i.REST

·Fetch

·SuperAgent

·axios

ii.GraphQL

·Apollo

·Relay

·urql

11.工具库

○Lodash

○Moment

○classnames

○Numeral

○RxJS

○Ramda

12.测试

i.单元测试

·Jest

·Enzyme

·Sinon

·Mocha

·Chai

·AVA

·Tape

ii.端到端测试

·Selenium, Webdriver

·Cypress

·Puppeteer

·Cucumber.js

iii.集成测试

·Karma

13.国际化

○React Intl

○React i18next

14.服务端渲染

○Next.js

○After.js

15.静态网站生成器

○Gatsby

16.后端集成框架

○React on Rails

17.移动端

○React Native

○Cordova/Phonegap

18.桌面端

○Proton Native

○Electron

○React Native Windows

19.虚拟现实

○React 360

总结

如果你认为此学习路线图还有改进之处,请提 PR 或 issues 。还有,我会持续进行补充与完善,所以你可能会想要给我个 star 以便于以后浏览。

参与贡献

学习路线图是使用 Draw.io 画的。文件就放在 /src 目录下。想要修改思维导图,先打开 draw.io ,点击 Open Existing Diagram 然后选择 xml 文件。之后就会打开思维导图,修改之后上传后更新 README 的 PNG 图片 (需要导出),然后提交 PR 。

  • 提交 PR 以帮助改进
  • 在 issues 中进行讨论想法
  • 帮忙宣传

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2018-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏梁源的专栏

React Native 用JavaScript开发移动应用 - 思维导图

1774
来自专栏十月梦想

字体大小单位vw和reg

vm是相对浏览器宽度,1vm浏览器1%,10vm10%,浏览器窗口大小,字体自适应,开发多用到vm作为字体单位

1405
来自专栏CRPER折腾记

React 折腾记 - (7) 基于React+Antd封装聊天记录(用到React的memo,lazy, Suspense这些)

3132
来自专栏IMWeb前端团队

QQ天气H5-前端完整解析

前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果...

1.4K9
来自专栏Android 开发者

Android P 中的新文本特性

在 “What’s new in Android P Beta” 中我们已经谈到 Android 的两个新文本特性。现在既然 Android P Beta 3 ...

1022
来自专栏Material Design组件

Human Interface Guidelines — Accessibility

1712
来自专栏非著名程序员

AndroidTShare Weekly No.11

本期热点开源项目 FreshDownloadView 一个下载动画,下载完成和失败的时候会有酷酷的动画,非常炫酷和使用。 效果图如下: ? 作者:dudu90 ...

2108
来自专栏DeveWork

WordPress By Example:一个WordPress 主题搜索引擎

来,今天介绍个好东东,一个WordPress 主题搜索引擎。你只要在搜索框输入相关关键词,就可以获取相应的WordPress 主题。这些主题有收费与付费。就Je...

2607
来自专栏Java帮帮-微信公众号-技术文章全总结

HTML5学习-day01【悟空教程】

网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

2013
来自专栏IT大咖说

听饿了么前端主管如何解析H5渲染性能

内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id...

2991

扫码关注云+社区

领取腾讯云代金券