首页 > 其他分享 >ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!

ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!

时间:2023-05-09 18:35:30浏览次数:48  
标签:react 框架 网站 React 我用 ReactHub ChatGPT 资源

大家好,我是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 也用了半年了,下期我准备聊聊使用这半年来的感受。感兴趣的记得关注我哦。

标签:react,框架,网站,React,我用,ReactHub,ChatGPT,资源
From: https://www.cnblogs.com/iovec/p/reacthub.html

相关文章

  • react 杂记2
    大括号-JavaScript的“新世界”{变量}  {方法(param)}  {逻辑}   {逻辑+html}  {}里面还是可以应用变量 再用{}获取即可 函数(onClick),变量(movieName),插槽(children),都是作为props传递给子组件的 添加事件注意:传递的是一个函数 自定义事件: 以o......
  • React Native之React基础
    ReactNative的基础是React,是在web端非常流行的开源UI框架。要想掌握ReactNative,先了解React框架还是很有帮助的。主要理解三个概念:组件、状态和JSX。使用组件的方式描述UI 使用组件的方式描述UI在React中,所有的UI都是通过组件去描述和组织的。可以认为,Reac......
  • Reactor之Schedulers,publishOn 和 subscribeOn
    Schedulers类似Executor,是Reactor的线程调度接口。提供以下几种线程执行环境:当前线程(Schedulers.immediate());可重用的单线程(Schedulers.single())。注意,这个方法对所有调用者都提供同一个线程来使用,直到该调度器被废弃。如果你想使用独占的线程,请使用Schedulers.newSingle();......
  • react + antd table列表自动滚动
    /***@file:table列表自动滚动,鼠标划入滚动暂停,鼠标划出滚动继续*/const[dataSource,setDataSource]=useState([])const[timer,setTimer]=useState()useEffect(()=>{if(dataSource.length){autoScroll(dataSource)}return()=>cl......
  • Reactor接口之五
    defaultIfEmpty@TestpublicvoidtestDefaultIfEmpty(){Flux.range(1,10).defaultIfEmpty(30).subscribe(System.out::println);}@TestpublicvoidtestDefaultIfEmpty1(){Flux.empty().defaultIfEmpty(30)......
  • [React Typescript] ComponentProps
    Blog:https://www.totaltypescript.com/react-component-props-type-helper GetanyProptypefromhtmlelement:import{ComponentProps}from"react";typeButtonProps=ComponentProps<"button">; GetpropstypefromaComponen......
  • Reactor接口之四
    interval@TestpublicvoidtestInterval(){CountDownLatchcountDownLatch=newCountDownLatch(1);Flux.range(1,10).zipWith(Flux.interval(Duration.ofSeconds(1))).subscribe(System.out::println,null,countDownLatch::countD......
  • Reactor接口之三
    defer@TestpublicvoidtestDefer(){Flux.defer(()->{returnFlux.range(0,10);}).subscribe(System.out::println);}输出0到9。defer每次对结果Flux进行订阅时,懒惰地提供发布服务。因此实际的源实例化会推迟到每次订阅时。collect@Te......
  • Reactor接口之二
    merge@TestpublicvoidtestMerge(){Flux.merge(Flux.just(1,2,3),Flux.range(5,6)).subscribe(System.out::println);}merge将多个Flux合并成一个Flux。 @TestpublicvoidtestMerge1(){Flux.range(1,5).mergeWith(Flux.just(8,9......
  • react-navigation 页面跳转
    使用react-navigation在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android的差异react-navigation页面跳转方法navigationnavigate-转到另一个屏幕,找出需要采取的操作replace-用新屏幕替换当前屏幕push-将新屏幕推到堆栈上pop-回到堆栈中popToTo......