大家好,我是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. 拖拽改变div宽、高(转)

    $(function () { //绑定需要拖拽改变大小的元素对象 bindResize(document.getElementById('test')); }); function bindResi ...

  2. WinForm中的MVC模式--MVP模式

    本文主要介绍MVC模式在WINFORM中的实现,其实砖家们都称它为MVP模式,小弟E文不太好,真的是记不住那个P怎么拼写的.. MVC模式主要解决的问题就是将表示层和业务层进行分离,在以往做WINFO ...

  3. P1706 全排列问题(DFS)

    全排列问题 题目描述 按照字典序输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入格式 一个整数n 输出格式 由1 ~ n组成的所有不重复的数字序列 ...

  4. mysql error Code 1441:datetime function: datetime field overflow

    mysql  error Code 1441:datetime function: datetime field overflow 网上找了好久,也没有解决 最后发现有个left join 表,on关 ...

  5. 在app中如何使weib-view不铺满全屏,自适应页面

    // #ifdef APP-PLUS //自建webview var currentWebview = this.$scope.$getAppWebview(); var height = this. ...

  6. 使用vCenter对ESXi主机进行补丁升级

    使用vCenter 对ESXi 主机进行补丁升级 背景说明:公司内部有许多ESXi主机需要进行补丁升级,记录一下通过vCenter对ESXi主机进行补丁升级的过程,也可以使用esxcli命令行方式: ...

  7. Spring 注解整理

    更多内容,前往IT-BLOG 一.核心容器 [1]@Configuration:告诉 Spring 这是一个配置类(配置类=配置文件)[2]@Bean:给容器中注册一个 Bean :类型为返回值类型, ...

  8. LevelDb-基本数据结构

    目录 Slice Arena skip list 跳表本质 时空复杂度 插入,删除数据(如何维护索引) 极端情况分析:不维护索引 极端情况分析:每次插入都维护 插入效率和查找效率取舍 删除 对比红黑树 ...

  9. 如何快速体验ChatGPT-4模型

    OpenAI免费版基于Gpt3.5,无法使用最新发布的 GPT-4 模型,必须开通 ChatGPT Plus.但是 OpenAI 不但屏蔽了中国的 IP 地址,连国内的 Visa 信用卡也一同屏蔽,即 ...

  10. 微软 New Bing AI 申请与使用保姆级教程(免魔法)

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 最近的 AI 技术实在火爆,从 OpenAI 的 ChatGPT,到微软的 New Bi ...