大家好,我是DOM哥。

图谱年年有,今年我来盘!

之前已经盘完了 Vue 的技术图谱,今天来盘 React 的。

我用 ChatGPT 开发了一个 React 的资源导航网站。

不管你是资深 React 用户,还是刚入门想学习 React 的小白,这个网站都能帮助到你。

网站地址:https://dombro.site/react#/react

项目托管在 GitHub,访问不了的可以私信我哟,包教包会,送你 Magic Power!

React 的生态已经相当成熟,优秀的组件,库,框架琳琅满目,数不胜数。

资源在精不在多。这里我只收录了开源免费,GitHub 上的高星项目。

这上面包括以下资源:

必备核心

  • react:facebook 出品的 mvvm 框架
  • react-router:标配,路由管理
  • redux:标配,状态管理

进阶

  • mobx:简单,可扩展的状态管理
  • styled-components:css in js

UI框架

  • ant-design:蚂蚁金服出品的企业级 ui 组件库
  • ant-design-mobile:移动端 ui 组件库
  • material-ui:风格继承自 google's material design

WEB 框架

  • next.js:vercel 出品,全栈 web 应用
  • gatsby:web 框架

跨端

  • react-native:使用 react 框架来创建 Android 和 iOS 应用程序
  • taro:京东凹凸实验室出品的跨端框架

工具

  • react-devtools:浏览器扩展,react 开发调试必备利器
  • create-react-app:开箱即用 react 项目脚手架,现在推荐 vite

你不需要报什么班,买什么课,花那冤枉钱。

只需要把网页上的这几个资源,钻进去,吃透。

你就能胜任任何 React 项目的开发。

从这个导航页不但能跳到资源的中文或英文官网,还能直接跳到 GitHub 项目,以及 CDN 地址。

如果配合我之前分享的 Vimium 插件,那是相当方便。

现在前端 mvvm 框架要么是 Vue,要么是 React。两者都有各自的生态。

如果你只打算学一个,那我推荐 Vue!首先是 vue 中文资源比 React 要多的多。

其次是 React 官网的这横幅我实在是看不懂。

当然 技术嘛,多多益善。能两个都掌握那最好。哪个公司会拒绝一个多才多艺的打工人呢!

对了,一开始我提到 这个网站我是用 ChatGPT 开发的,其实也并不全是。

ChatGPT 只是开发了个架子,然后里面的资源是用 ChatGPT 查的,包括网址和描述。

但 CSS 是我自己写的。

ChatGPT 也用了半年了,下期我准备聊聊使用这半年来的感受。感兴趣的记得关注我哦。

ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!的更多相关文章

  1. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  2. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  3. 搞了一个独立博客,请各位光临pingworld.cn

    嘿嘿,每次在一个大网站上建立自己的博客后总是没有动力持续更新下去,回想其原因很大是因为没有一个自己的地盘,懒得维护!还有一个原因就是自己也没有什么干货值得跟大家分享. 随着工作的时日见长,有了各种各样 ...

  4. 从零构建一个react+webpack+typescript的应用

    今天要完成在windows下从零开始构建一个react应用的任务 首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个node项目. 然后安装所需依赖, npm i react ...

  5. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  6. 一个 react 小的 demo

    一.搭建开发环境: webpack构建工具. 新建一个文件夹(login),进入根目录, 1.输入命令:cnpm init,生成了一个package.json文件,这是一个标准的npm说明文件,里面蕴 ...

  7. 第一个react

    个人觉着react和vue是很相似的,之前还转载过一篇介绍两个异同点的文章,那个时候还完全不懂react,现在才慢慢开始接触,所以只能总结一些个人的心得,首先自然是react的优点了,个人觉着主要有以 ...

  8. 业余时间正在开发一个REACT小视频站点

    业余时间正在开发一个REACT小视频站点,数据接口来源于吐槽弹幕网(C站),供C站用户移动端的观看.因现存在移动网络屏蔽C站的关系,最好使用非移动网络进行观看.否则会比较卡,影响用户体验. 站点测试入 ...

  9. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  10. 推荐一个React 入门的教程

    推荐一个React 入门的教程 react 入门实例教程 Github地址:https://github.com/ruanyf/react-demos

随机推荐

  1. Hash中的bucket什么意思?

    这个好理解.无序容器的内部是由一个个的bucket(桶)构成的,每个bucket里面由相同hash的元素构成. 因此无序容器的搜索是先根据hash值,定位到bucket,然后再在bucket里面搜索符 ...

  2. Python第四章实验报告

    一.实验项目名称:<零基础学Python>第四章的14道实例和4道实战 二.实验环境:IDLE(Python 3.9 64-bit) 三.实验目的和要求:熟练掌握Python序列的应用 四 ...

  3. [picoCTF]Insp3ct0r write up

    根据提示,需要检查浏览器上的Web代码(动手翻译一下啦) (漫不经心的瞅瞅页面,curl+UUUUUUU(一只U就行)一下下,微微瞄一瞄,where is flag? fn+f12(或其它)打开源代码 ...

  4. webpack之性能优化(webpack4)

    在讲解性能优化的方案之前,我们需要了解一下webpack的整个工作流程, 方案一:减少模块解析 也就是省略了构建chunk依赖模块的这几个步骤 如果没有loader对该模块进行处理,该模块的源码就是最 ...

  5. CSS伪类三角形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. XSS(Cross-site Scripting)-跨站脚本

    XSS介绍 XSS 是基于 JavaScript 的,因此对该语言有基本的了解会很有帮助.了解XSS需要对客户端-服务器请求和响应有基本的了解 跨站点脚本,在网络安全社区中更广为人知的是 XSS,被归 ...

  7. 实践解析丨如何通过 WebAssembly 在 Web 进行实时视频人像分割

    5 月 15 日,声网Agora 高级架构师高纯参加了 WebAssambly 社区举办的第一场线下活动"WebAssembly Meetup",并围绕声网Agora 在 Web ...

  8. Opengl ES之矩阵变换(上)

    前言 说到矩阵变换,我们第一时间想到的就是大学时代的线性代数这些复杂的东西,突然有了一种令人从入门到放弃的念头,不慌,作为了一个应用层的CV工程师, 在实际应用中线性代数哪些复杂的计算根本不用我们自己 ...

  9. Gateway 网关

    Spring Cloud Gateway 作为 Spring Cloud框架的第二代网关,在功能上要比 Zuul更加的强大,性能也更好.随着 Spring Cloud的版本迭代,Spring Clou ...

  10. 钛度守望者旗舰版TSG550鼠标(原相3335芯片)拆解

    鼠标整体外观 鼠标按键支柱,采用的十字形的按键柱,没有采用现在市面上多数鼠标的平面贴片形的按键柱设计,但是耐用性比一字型的按键柱会好很多. 可换微动设计,原装的是凯华GM8.0黑曼巴8000万次微动, ...