ReactJS 路线图 🗺 面向开发者 💻

React JS或 React 是一个用于构建用户界面或 UI 组件的开源前端 JavaScript 库。它由 Facebook 以及个人开发者和公司社区维护。近年来，它已发展成为基于组件的 GUI 开发的最佳库之一。

虽然还有其他前端框架可用，例如 Angular 和 Vue.js，但 React 与其他框架的不同之处在于，它只专注于基于组件的 GUI 开发，而不会侵入其他领域。

成为 React 开发人员的路线图：

下面的图表展示了成为 React 开发者可以选择的学习路径以及需要学习的库。该图表由Adam Gołąb制作。

注意：这份路线图将帮助您大致了解行业概况，并在您不确定从哪里开始或下一步学习什么时为您提供指导。最终，这取决于您的经验，因为您会逐渐理解为什么某种工具在某些情况下比另一种更适合。方便又流行的工具并不一定总是完美的。所以，浏览一下路线图，开始开发吧。

路线图：

作者：Adam Gołąb

资源：

1.基础知识：HTML、CSS 和 JS

i. HTML：这是 Web 开发人员的第一支柱和最重要的技能，因为它为网页提供了结构。

• 学习 HTML 基础知识
• 做几页作为练习

您可以查看HTML教程。

ii. CSS：Web 开发的第二大支柱，用于设置网页样式，使其看起来美观。

• 学习上一步中 CSS 样式页面的基础知识
• 使用网格和弹性框构建页面

您可以查看CSS教程。

查看免费的 Tailwind 组件库

iii. JS 基础：Web 开发的第三大支柱，用于使您的网页具有交互性。

• 熟悉语法 学习 DOM 的基本操作
• 学习 JS 的典型机制（提升、事件冒泡、原型设计）
• 进行一些 AJAX（XHR）调用了解新功能（ECMA Script 6+）
• 此外，熟悉 jQuery 库

您可以查看JavaScript教程

2. 通用开发技能

• 学习 GIT，在 GitHub 上创建一些存储库，与其他人分享你的代码
• 了解 HTTP(S) 协议和请求方法（GET、POST、PUT、PATCH、DELETE、OPTIONS）
• 不要害怕使用谷歌，用谷歌进行强力搜索
• 熟悉终端，并配置你的shell（bash、zsh、fish）
• 阅读一些关于算法和数据结构的书籍
• 阅读一些关于设计模式的书籍

还请检查Sneat React Admin Template，这是一个同时支持 JavaScript 和 TypeScript 的 Ultimate Next Js Admin Template 。

支持 SSR 和应用路由器的Power Next js 模板之一。

3. 在ReactJS官网学习 React或者完成一些课程

4.熟悉您将要使用的工具。

要成为一名 React 开发人员，您应该花一些时间学习作为 Web 开发人员将使用的工具，例如构建工具、单元测试工具、调试工具等。

以下是一些构建工具：

i. 包管理器

- npm
- yarn
- pnpm

ii. 任务运行器

- npm 脚本
- gulp
- Webpack
- Rollup
- Parcel

5.造型

CSS预处理器

CSS 预处理器是一个程序，它允许您从预处理器自己独特的语法生成 CSS。预处理器可以使 CSS 代码更有条理。

- Sass/CSS
- PostCSS
- Less
- Stylus

ii. CSS 框架

CSS 框架是一个代码库，它抽象了常见的 Web 设计，使开发人员更容易在其 Web 应用中实现这些设计。简而言之，CSS 框架是一组已准备好并可立即使用的 CSS 样式表的集合。

- Bootstrap
- Materialize、Material UI、Material Design Lite
- Bulma
-语义 UI

您可以查看有关 2020 年最佳 CSS 框架的综合指南以获取详细信息。

iii. CSS 架构

- BEM
- CSS 模块
- Atomic
- OOCSS
- SMACSS
- SUITCSS

iv. JS 中的 CSS

-风格组件
-镭
-情感
- JSS
-阿芙罗狄蒂

6.状态管理

i.组件状态/上下文 API

ii. Redux

a. 异步操作（副作用）
- Redux Thunk
- Redux Better Promise
- Redux Saga
- Redux Observable

b. 助手
-重赛
-重新选择

c. 数据持久化
- Redux Persist
- Redux Phoenix

d.Redux表单

iii. MobX

iv.后坐力

始终建议使用React Admin Dashboard来创建渐进式、现代且响应迅速的 Web 应用程序

7. 类型检查器

• PropTypes
• TypeScript
• 流动

8. 表单助手

• Redux 表单
• 福米克
• 福尔姆西
• 最终形态

9. 路由

组件是 React 强大的响应式编程模型的主要部分，而路由组件是任何应用程序的重要组成部分。

• React-Router
• 路由器5
• Redux-First 路由器
• 到达路由器

10. API 客户端

您可以创建一些使用 REST 和GraphQL等 API 与其他应用程序通信的东西。

i. REST
-获取
- SuperAgent
- axios

ii. GraphQL
- Apollo
-中继
- urql

11.实用程序库

让您的工作更加轻松。

• Lodash
• Day.js
• 片刻
• 类名
• 数字
• RxJS
• ImmutableJS
• 拉姆达

12. ReactJS UI 库和框架：

以下是一些最好的 ReactJS UI 库和框架。

• 材质 UI
• 反应引导
• ReactStrap
• Ant Design
• 蓝图 JS
• 常绿
• 故事书

更多详情请访问ReactJS UI 框架

13.测试

对于 React 开发人员来说，这是一项至关重要的技能。

i. 单元测试

- Jest
- React 测试库
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape

ii. 端到端测试

- Selenium
- Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js

iii. 集成测试

-因果

14.国际化

• React Intl
• React i18next

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

15. 服务器端渲染

• Next.js
• After.js
• 流氓
• 浮力

React 组件在服务器上渲染，并将输出的 HTML 内容传递到客户端或浏览器。

16. 静态站点生成器

• Jamstack
• 盖茨比

你可以使用 Gatsby 创建个性化的登录体验网站。它们将你的数据与 JavaScript 相结合，并创建格式良好的 HTML 内容。

有关 SSG 的更多详细信息，请参阅最佳静态站点生成器的详细指南

17. 后端框架集成

• 在 Rails 上做出反应

它将 Rails 与 Facebook 的 React 前端框架（服务器渲染）集成在一起。它提供服务器渲染功能，该功能通常用于 SEO 爬虫索引和用户体验性能，而 Rails/webpacker 则不提供此功能。

18. 移动端

• 反应原生
• Cordova / Phonegap

使用 JavaScript 开发移动应用程序的标准方式是采用原生的外观和感觉。

19.桌面

• 质子原生
• 电子
• React Native Windows

允许您使用 React 构建原生 UWP 和 WPF 应用程序。

20.虚拟现实

• React 360：让您使用 React 获得令人兴奋的 360 和 VR 体验。

其他有用的资源和收藏：

• React 样板
• React Redux 管理模板免费
• 终极 ReactJS 资源
• 开源 ReactJS 管理模板

查看Materio – MUI React Next.js 管理模板。
它是最方便开发者使用🤘🏻且高度可定制✨的基于 React 的React 管理仪表板模板。如果您是一位开发者，正在寻找功能丰富、高度可定制的最佳 React 管理模板， Materio 🤩 就是您的最佳选择。

此外，最高的行业标准被认为可以为您带来最好的React 模板之一。

它不仅速度快🚀、易于使用，而且管理面板高度可扩展。此外，它提供了极致的便利性和灵活性，您可以轻松构建任何您想要的应用程序。

Materio 还提供各种实用功能，旨在帮助您创建完全符合您想象的优质单页应用🤘🏻。此外，它还配备了独特实用的工具，例如模糊搜索、深色、半深色和带边框布局选项、高级卡片和图表。此外，它还提供以下精彩功能。

特征：

• 纯 ReactJS，无 jQuery 依赖
• 使用Next.js 和 MUI构建
• 利用 NextJS、React 路由器
• 基于功能组件和 React hooks
• 包含TS 和 JS 版本🎉
• AUTH 和 ACL支持
• 国际化/i18n 和 RTL就绪
• 代码拆分、延迟加载

演示 下载

也可在Bootstrap Dashboard版本中使用。

结论：

如果您认为路线图可以改进，请打开包含任何更新的 PR 并在原始 git repo Adam Golab 的React-developer-roadmap上提交任何问题。

这就是关于ReactJS 开发者路线图的全部内容。它确实非常全面，但你们中的许多人很可能已经了解了其中的大部分内容。即使你不了解，也不必被这份路线图弄得不知所措；你可以从小处着手，然后逐步完成。

除此之外，还有一篇关于最佳ReactJS UI 框架和组件库的文章也会有所帮助。

成为 React 开发人员的方法有很多，如果您已经了解 React，那么您肯定可以找到更多工具和技术来添加到您的工具包中，并在 2022 年成为一名更优秀的 React 开发人员。
您还可以下载Materio 的免费管理版本。

关于我们：

在ThemeSelection ，我们提供精选的高质量、现代设计、专业且易于使用的高级Bootstrap 模板、Next js 模板、Django 模板、Laravel 管理模板、管理仪表板和UI 工具包。

此外，不要忘记在Linkedin和Twitter上关注我们，以获取更多与前沿网页设计和开发相关的文章和内容。

作者：@abhidave001