一些关于 React 的疑问

[vdrapb]

1. React 应该搭配什么前端 UI 框架使用，有没有推荐的
2. 在调用接口服务的时候，用 axios 还是直接 fetch
3. 如果不使用 UI 框架，有没有哪些推荐的 css 框架

[veture]

1.mui
2.fetch
3.tailwind

[NessajCN]

1. 自己写 style： https://github.com/tailwindlabs/headlessui , 现成 style： https://mui.com/material-ui/
2. 都行，没区别。用 fetch 不兼容老 ie. 不过都用 react 了也不大可能还想兼容老 ie
3. https://tailwindcss.com/

[zed1018]

1. ant-design
2. fetch
3. tailwindcss

[vlgs]

1. 主流都可。个人推荐 radix shadcn
2. fetch, 可以试试 RSC
3. tailwind

[surfwave]

1. 建议自己写 css ，省事就 tailwindcss
2. nextjs 可以选用 swr ，或者强绑定的 tRPC ，不用 nextjs ，啥都行，比如 axios ，fetch 这些
3. tailwindcss ，刚开始会觉得很繁琐，用多了就能体会到好处了

[vdrapb]

@surfwave 看到你说 next.js ，那 next ui 可以用吗？我去官网看了一下，感觉挺不错的

[surfwave]

@vdrapb 常用组件是有的。没有的组件只有自己手搓了。

[CodingNaux]

1. 后台无脑 antd ，前台随便，看风格
2. SWR ，fetcher 随便搭配,xhr 或 fetch 都可以（ swr 可以当一个全局的 api 数据 store 挺方便）
3. tailwind

建议新项目直接从 full-stack React framework 开始

[RealJacob]

1 b 端项目还是 antd 吧，整体确实是方便。c 端项目就 headlessui ，mui
2 fetch 和 axios 没区别
3 tailwind

[mdn]

@vdrapb next-ui 是非官方的，就像 material-ui ，模仿官方效果做的

[gogogo1203]

2023 年，React api call 不要直接用 axios 或者 fetch 做 async, 需要自己写各种 isLoading, isError. 用 react-query, 可以做 cache ，各种状态和结果直接一个 hook 就搞定了。

[gogogo1203]

ui 的话，shadcn+tailwind 最近非常流行。 可以说开创了一个新的组件调用的方式，非常方便

[christin]

antd axios 手写 css

[zq51500]

感觉 @vanilla-extract/css 也蛮好用的

[lianchi]

UI 框架选择：
1 、unocss ，它和 Vue 搭配更好，不过在 Vite + React 上的配置稍微多一点点；
2 、tailwindcss ；
3 、同样是 tailwind 团队出的 Headless UI ，是基于 tailwindcss 的简单封装，兼具了自由、灵活、美观。

接口调用：都行，一般都会基于现成的库（根据项目需要）做一层封装。

[plasticman64]

fetch ，axios 区别不大，如果以后要给别人维护的话推荐 axios ，会的人多点

[tkHello]

什么类型的项目 项目不同 选型不同

[xiaoxinshiwo]

@gogogo1203 #12 原子化吗？组件这么调用感觉有点麻烦了

```
<AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>

```

[gogogo1203]

@xiaoxinshiwo composition 我认为才是终极组件，按照自己的需要加减。 有些 component lib 一定要塞个按钮，多个 divider. shadcnui 大火不是没有道理的。

[xiaoxinshiwo]

@gogogo1203 #19 确实灵活很多

[vdrapb]

@tkHello 个人学着做点东西

[iamppz]

前面几楼基本都说了，个人感觉目前的最佳实践是 tailwindcss + radix shadcn ，慎重选择 antd 和 mui 这种不太容易自定义样式的框架

[gogogo1203]

@xiaoxinshiwo 而且你可以随便改逻辑，样式和组合, 代码在你 src 文件夹里，不是 node_modules 。

[vdrapb]

@xiaoxinshiwo 但是自由度高了

[shui14]

next-ui 或者 material-ui 吧，它们有设计，否则你自己来，出活不尽人意，选一个标准模仿，上限不高，但是保证下限
全栈就 nextjs trpc ，前端就随便 nextjs 或者 cra 都行，io 可以 react-query ，这样不用折腾状态，看样子你这小项目，也没用整

[LFL976]

官方推荐了 next.js 咋样

[zogwosh]

1.无脑 ant design
2.react query+axios
3.tailwindcss +daisyui

[DICK23]

1.随便都行，要快速就阿里系，antd antd pro-components,要搞定制化就 headui, 比如 shadcn-ui 这种
2.简单点可以直接请求，fetch 自己封装一下就行，要考虑状态管理啥的可以用 @tanstck/react-query 这种包，还有 swr,这些和 axios 同时使用配合更好
3.tailwindcss

[fyxtc]

居然没人推荐 chakra-ui ，那我推荐一下吧，mui 老牌子了，可以把 chakra-ui 当成下一代的 mui

[shunia]

mui 比 antd 拉多了，antd 不如 tailwindcss/unocss 自定义万物，虽然 antd 也可以自定义吧，所以 antd 和 css 自选一种。
headlessui 之类的不太适合没有自己的设计系统的项目用，组装太费劲。
next 系的 UI 设计系统里字太小，费眼，个人用没啥问题但是不适合商用不如 antd 。如果自定义设计系统又回到第一行了，选 css 。
那个 shad 就是 vercel 的员工，所以他那库样式风格也那样。
如果选了 css 可以适当配合 daisy ui 或者 flowbite 之类的库，但是我个人觉得意义不大。

[gzf6]

不需要监听上传进度就 fetch,否则用 axios 之类的

[cbdyzj]

1. mui
2. fetch
3. emotion

[maiyasu]

TailwindCSS 没有错的，如果你喜欢自己控制的话。

[shervinchen]

@shunia
主要是看需求，B 端项目（比如管理系统）不追求高定制化的话，就适合用 antd/mui 这种把逻辑样式封装好的库

如果是 C 端项目，要追求组件逻辑的高度定制化，那还是 radix/chakra 这种 headless 库好一点，可以自己用一些其他的逻辑库去组合实现想要的效果，灵活度很高（用 antd 这样的库，逻辑基本没法定制）

[shuding]

1. Radix UI：细节做到极致
2. fetch：拥抱标准，同一份代码在主流浏览器和 Node.js 18+ 里都可以无依赖直接运行
3. TailwindCSS：所有 React 环境和模式下都完美的一套方案（当然也可以用类似的原子化方案如 UnoCSS / Windi CSS ）

[HaroldFinchNYC]

React 应该搭配什么前端 UI 框架使用，有没有推荐的

其实几个出名的框架都不错

在调用接口服务的时候，用 axios 还是直接 fetch

如果只是前端网页，fetch 足够
如果有 ssr ，axios 很稳

如果不使用 UI 框架，有没有哪些推荐的 css 框架

bootstrap

但还是用框架吧，更省事一些

[sakae010]

1. to b 或者业务复杂，ui 定制化不高 antd; 业务不太复杂，ui 定制化高，选国外的，主要国内想法花里胡哨的，antd 很多好用的组件可以直接上，国外的封装的都简单，需要你再次封装费时间

2. fetch + react query

3. unocss + less

[wednesdayco]

好多推荐 tailwind 的，只有我不喜欢用这类型的 css 框架的么？

[lidongyx]

我一般前端、后端都一起写，而且非常喜欢用套装
比如 Nextjs ，就喜欢用 Nextui 、vercel 的全套服务；
比如 Amplify （ Lambda ）或 Firebase 也是能全套就尽量全套，而且这些都是全栈都有
小程序也喜欢用原生的...然后小程序云开发的网页会有 antd
接口都是用 axios

[tonytonychopper]

如果是那种后台项目，不考虑审美的情况下可以无脑 antd 吧，但是用它如果后续想改下风格会比较头疼

[xiaoxinshiwo]

@gogogo1203 #23 谢谢，再问下，你如果在项目里面使用 shadcn ， 你会对组件再次封装吗？

[speedofstephen]

mantine 这个 UI 库不错

[gogogo1203]

@xiaoxinshiwo 我记得我在上个项目碰到一个特殊的需求. 我在 shadcn 源文件下，copy and paste 一个组件，改了名字， 改了里面的一些逻辑。 使用的时候用我起的名字。 随意改动就是 shadcn 最大的优点。

[gogogo1203]

@shuding 活捉 shu 大

[gogogo1203]

当然 shadcn 用的 Radix UI + tailwind css

[abelmakihara]

@wednesdayco 不用觉得自己是少数 v2 并不是主流

[vdrapb]

@shui14 好的，谢谢

[WhiteCat1111]

@gogogo1203 我最近使用 npx shadcn-ui@latest init 报 connect ETIMEDOUT 是什么原因

[2chanriban]

@WhiteCat1111 解决了吗，好像国内用户会遇到这个问题，我是在 wsl 环境下跑这个命令才成功......