【ArchSummit】如何通过AIOps推动可量化的业务价值增长和效率提升?>>> 了解详情
写点什么

2019 年 React 学习路线图

  • 2018-12-21
  • 本文字数:3162 字

    阅读完需:约 10 分钟

2019年React学习路线图

之前我们已经介绍了2019年Vue学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,所以,我们将在下文中介绍 2019 年 React 学习路线图,希望给想学 React 的开发者一些借鉴。


这就是 2018 年的 React 路线图。它非常全面,2018 年剩下的时间可能不够你学会所有这些,但不要担心,所有的技术在 2019 年仍然有效。



图片来源:https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

1. 基础知识

不管你要学习哪个 Web 开发框架或库,都必须掌握基础知识,如 HTML、CSS 和 JavaScript,这三个是 Web 开发的三大支柱。

HTML

HTML 是 Web 开发人员最重要的技能之一,因为它为网页提供了基本结构。

CSS

CSS 用于设置网页样式,让网页看起来更好看。

JavaScript

JavaScript 让网页具备交互性。React 是基于 JavaScript 的,因此在学习 React 之前,你应该先了解 JavaScript。

2. 通用的开发技能

无论你是前端开发人员还是后端开发人员,甚至是全栈工程师,都必须了解一些能够让你在编程世界中生存下来的通用开发技能。

学习 GIT

你必须在 2018 年完全了解 Git。尝试在 GitHub 上创建一些存储库,与其他人共享你的代码,并学习如何在你喜欢的 IDE 中克隆 Github 上的代码。

了解 HTTP(S)协议

如果你想成为一名 Web 开发人员,那么了解 HTTP 绝对是有必要的。


我不是要你去阅读 HTTP(S)规范,但你至少应该熟悉常见的 HTTP 请求方法,如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。

学习终端

虽然前端开发人员学习 Linux 或终端并不是强制性的,但我强烈建议你熟悉以下终端,了解如何配置你的 shell(bash、zsh、csh)等。

算法和数据结构

好吧,这又是一个通用编程技能,成为 React 开发者不一定需要了解这些,但要成为真正的程序员,这是必备技能。

学习设计模式

就像算法和数据结构一样,成为 React 开发者并不一定要学习设计模式,但学好设计模式会让你变得更好。了解设计模式将帮你找到能够经受住时间考验的解决方案。

3.学习 React

你必须学好 React 才能成为一名 React 开发者。学习 React 最好的资源是它的官方网站,但作为初学者,它对你来说可能有点难。

3.1 学习构建工具

如果你想成为一名专业的 React 开发者,那么你应该花一些时间熟悉一下你将作为 Web 开发者需要使用的工具,比如构建工具、单元测试工具、调试工具等。


以下是路线图中列出的构建工具:


包管理器:


  • npm

  • yarn

  • pnpm

  • 任务执行器

  • npm 脚本

  • gulp

  • WebPack

  • Rollup

  • Parcel


顺便说一句,并非要学习所有这些工具,对于初学者来说,学习 npm 和 Webpack 应该足够了。在你对 Web 开发和 React 生态系统有了更多的了解后,你就可以学习其他工具。

3.2 样式

如果你的目标是成为 React 开发者,了解一些样式相关的知识只会有益无害。路线图中提到了很多 CSS 相关的东西,比如 CSS 预处理器、CSS 框架、CSS 架构和 JS 中的 CSS。


我建议你至少学习一下 Bootstrap,这是你经常会用到的 CSS 框架。


如果你想进一步学习 bootstrap,也可以学习 Materialise 或 Material UI。

3.3 状态管理

这是 React 开发者应该关注的另一个重要领域。路线图中提到了以下一些需要掌握的概念和框架:


  • 组件 State/ContextAPI

  • Redux

  • 异步操作(副作用)

  • Redux Thunk

  • Redux Better Promise

  • Redux Saga

  • Redux Observable

  • Helpers

  • Rematch

  • Reselect

  • Data persistence

  • Redux Persist

  • Redux Phoenix

  • Redux Form

  • MobX


如果东西太多,我建议你只关注 Redux。

3.4 Type Checker

由于 JavaScript 不是一种强类型语言,因此编译器不会捕获那些与类型相关的错误。


随着应用程序的增长,你可以通过类型检查捕获大量错误,尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 扩展对整个应用程序进行类型检查。


React 也提供了一些内置的类型检查功能,可以用它们帮你尽早发现 bug。


由于 Angular 也使用了 TypeScript,我认为可以同时学习 JavaScript 和 TypeScript。

3.5 Form Helper

除了 Type Checker 之外,还可以学习像 Redux Form 这样的 Form Helper,它提供了在 Redux 中管理表单状态的最佳方法。除了 Redux Form 之外,还有 Formik、Formsy 和 Final。

3.6 路由

组件是 React 声明性编程模型的核心,而路由组件是应用程序的重要组成部分。


React Router 提供了一组导航组件,这些组件可以通过声明的方式与你的应用程序组合在一起。


除了 React Router 之外,你还可以看看 Router 5 和 Redux-First Router。

3.7 API 客户端

在今天的世界中,你很少会构建独立的 GUI,相反,你将有更多机会使用 REST 和 GraphQL 等 API 构建与其他应用程序发生交互的东西。


值得庆幸的是,React 开发者可以使用很多 API 客户端:


REST


  • Fetch

  • SuperAgent

  • axios


GraphQL


  • Apollo

  • Relay

  • urql


Apollo 客户端是我的最爱,它提供了一种使用 GraphQL 构建客户端应用程序的简便方法。Apollo 可以帮你快速构建使用 GraphQL 获取数据的 UI,并可以与任意 JavaScript 前端一起使用。

3.8 辅助库

这些库可以让你的工作变得更轻松。React 开发人员可以使用很多辅助库,如下所示:


  • Lodash

  • Moment

  • classnames

  • Numeral

  • RxJS

  • Ramda


这些不一定都要学,路线图中的 Lodash、Moment 和 Classnames 是用黄色标注的,所以应该先从它们开始学习。

3.9 测试

测试是 React 开发者的一项重要技能,但经常被忽视,如果你想在竞争中保持领先,就要学习一些用于测试的库。这些库可用于单元测试、集成测试和端到端测试。


以下是路线图中提到的库:

单元测试

  • Jest

  • Enzyme

  • Sinon

  • Mocha

  • Chai

  • AVA

  • Tape

端到端测试

  • Selenium, Webdriver

  • Cypress

  • Puppeteer

  • Cucumber.js

  • Nightwatch.js

集成测试

  • Karma


你可以学习你想学习的库,但建议一定要学习 Jest 和 Enzyme。

3.10 国际化

这是前端开发的另一个重要主题。你可能需要支持日本、中国、西班牙和其他欧洲国家的本地 GUI 版本。


 路线图中建议你学习以下技术,它们都很好理解:


  • React Intl

  • React i18next


这两个库都提供了 React 组件和 API 来格式化日期、数字和字符串,包括复数和处理翻译。

3.11 服务器端渲染

你可能会想,服务器端渲染和客户端渲染之间有什么区别。在使用客户端渲染时,你的浏览器会下载一个最小的 HTML 页面,然后通过 JavaScript 并将内容填充到页面中。


在使用服务器端渲染时,React 组件是在服务器上进行渲染的,将输出的 HTML 内容传到客户端或浏览器。


路线图推荐了以下的服务器端渲染:


  • Next.js

  • After.js

  • Rogue


不过我建议学习 Next.js 应该足够了,Max 的“ React 16 — The Complete Guide”也涵盖了 Next.js 的基础知识。

3.12 静态站点生成器

Gatsby.js 是一个现代静态站点生成器。你可以使用 Gatsby 创建个性化的登录网站体验。它将你的数据与 JavaScript 相结合,并创建格式良好的 HTML 内容。

3.13 后端框架集成

React on Rails 将 Rails 与 Facebook 的 React 前端框架(服务器渲染)集成在一起。它提供了服务器渲染,通常用于 SEO 爬虫索引和 UX。

4.移动端

React Native 正迅速成为使用 JavaScript 开发具有原生外观的移动应用程序的标准方法。


路线图中建议你学习以下库:


  • React Native

  • Cordova/PhoneGap


但我认为只要学习 React Native 就足够了。

5.桌面端

还有一些基于 React 的框架可用于构建像 React Native Windows 这样的桌面 GUI,让你可以使用 React 构建原生 UWP 和 WPF 应用程序。


路线图建议使用以下几个库:


  • Proton Native

  • Electron

  • React Native Windows


它们都是进阶的内容,如果你已经掌握了 React,可以看一下它们。

6.虚拟现实

如果你对构建基于虚拟现实的应用程序感兴趣,还可以了解以下像 React 360 这样的框架,让你可以通过 React 开发 VR 体验。如果你对这个领域感兴趣,可以进一步了解 React 360。


更多内容,可关注前端之巅(ID:frontshow)



英文原文:


https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02


公众号推荐:

2024 年 1 月,InfoQ 研究中心重磅发布《大语言模型综合能力测评报告 2024》,揭示了 10 个大模型在语义理解、文学创作、知识问答等领域的卓越表现。ChatGPT-4、文心一言等领先模型在编程、逻辑推理等方面展现出惊人的进步,预示着大模型将在 2024 年迎来更广泛的应用和创新。关注公众号「AI 前线」,回复「大模型报告」免费获取电子版研究报告。

AI 前线公众号
2018-12-21 10:386540
用户头像

发布了 731 篇内容, 共 433.3 次阅读, 收获喜欢 1997 次。

关注

评论 3 条评论

发布
用户头像
涨知识
2019-02-22 15:36
回复
用户头像
有如此长虫在人间作乱,应尽快杀之
2018-12-25 13:46
回复
没有更多了
发现更多内容

2021低代码平台推荐,每一个都具有10年行业开发经验!

J2PaaS低代码平台

低代码 低代码开发 低代码开发平台 地代码平台

由IDC余热回收创新技术实践引出的跨界合作探讨

安第斯智能云

算力 碳中和 节能 跨界合作

干货分享!边云融合的时序时空数据库实践详解

百度开发者中心

物联网 时序数据库

区块链数字收藏品平台开发,数字藏品交易平台搭建

电微13828808271

清河机械:用宜搭建设工厂数字化系统,节省80%开发成本

一只大光圈

阿里巴巴 低代码 数字化转型 钉钉宜搭

安全漏洞之任意文件上传漏洞分析

网络安全学海

黑客 网络安全 信息安全 渗透测试 安全漏洞

情报信息分析研判系统搭建,情指勤一体化平台建设开发

电微13828808271

模块7作业

Asha

语音信号处理2:语音信号处理的应用

轻口味

CRM系统如何帮助企业改变销售周期

低代码小观

程序员 销售管理 销售 CRM CRM系统

智慧社区小程序搭建,智慧平安社区解决方案

电微13828808271

优酷 Android 构建速度优化实践

阿里巴巴终端技术

android App Gradle 移动开发 客户端

语音信号处理1:语音信号处理的发展

轻口味

重磅发布全总结丨一文看懂阿里云弹性计算年度峰会

阿里云弹性计算

弹性计算 年度峰会

飞桨EasyDL桌面版正式发布 本地数据、本地网络、本地算力也能高效建模

科技热闻

饿了么小程序容器首屏秒开优化实践

阿里巴巴终端技术

小程序 App 移动开发 客户端 小程序容器

Log4j2 Zero Day 漏洞 Apache Flink 应对指南

Apache Flink

大数据 flink log4j2

重点人员管控系统开发搭建,指挥调度平台建设方案

电微13828808271

CSS之变量(二)条形加载条

Augus

CSS 12月日更

波卡生态的去中心化存储Crust Network | Hoo虎符研究院

区块链前沿News

波卡生态挖矿 Hoo虎符 虎符交易所 虎符研究院 去中心化存储

全球IT服务将增1.3万亿美元,联想持续布局智慧服务能力

科技大数据

语音信号处理3:语音信号处理的的整体结构

轻口味

致敬全新的未来!创业邦100未来独角兽峰会暨2021创业邦年会成功举办

创业邦

[架构实战营] 模块七作业

张祥

架构实战营

微服务架构 | 如何利用日志链路追踪程序执行的慢SQL?

码农架构

性能分析 微服务治理 慢SQL 链路分析

如何在 GitHub 上高效阅读源码?

AlwaysBeta

GitHub 源码 源码分析 源码阅读 源码解析

如何开始移动网站测试

FunTester

测试 web测试 FunTester 移动端测试 响应式网页

CameraX ImageAnalysis

Changing Lin

12月日更

“有创业者的地方,创业邦一直都在” 创业邦100未来独角兽峰会暨2021创业邦年会圆满落幕

创业邦

把酒言欢话聊天,基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统

刘悦的技术博客

tornado 实时通信 Vue 3 web socket redis'

语音信号处理 4:汉语中语音的分类及韵律特性

轻口味

28天写作 12月日更

2019年React学习路线图_大前端_javinpaul_InfoQ精选文章