这是一个创建于 456 天前的主题，其中的信息可能已经有所发展或是发生改变。
- React 应该搭配什么前端 UI 框架使用，有没有推荐的
- 在调用接口服务的时候，用 axios 还是直接 fetch
- 如果不使用 UI 框架，有没有哪些推荐的 css 框架
 |
1
veture 2023-08-23 10:36:52 +08:00  1
1.mui
2.fetch 3.tailwind |
 |
2
NessajCN 2023-08-23 10:37:28 +08:00 1
1. 自己写 style： https://github.com/tailwindlabs/headlessui , 现成 style： https://mui.com/material-ui/
2. 都行，没区别。用 fetch 不兼容老 ie. 不过都用 react 了也不大可能还想兼容老 ie 3. https://tailwindcss.com/ |
 |
3
zed1018 2023-08-23 10:40:37 +08:00
1. ant-design
2. fetch 3. tailwindcss |
 |
4
vlgs 2023-08-23 10:44:14 +08:00
1. 主流都可。个人推荐 radix shadcn
2. fetch, 可以试试 RSC 3. tailwind |
 |
5
surfwave 2023-08-23 11:03:41 +08:00
1. 建议自己写 css ，省事就 tailwindcss
2. nextjs 可以选用 swr ，或者强绑定的 tRPC ，不用 nextjs ，啥都行，比如 axios ，fetch 这些 3. tailwindcss ，刚开始会觉得很繁琐，用多了就能体会到好处了 |
 |
8
CodingNaux 2023-08-23 11:21:38 +08:00
1. 后台无脑 antd ，前台随便，看风格
2. SWR ，fetcher 随便搭配,xhr 或 fetch 都可以（ swr 可以当一个全局的 api 数据 store 挺方便） 3. tailwind 建议新项目直接从 full-stack React framework 开始 |
 |
9
RealJacob 2023-08-23 11:22:19 +08:00
1 b 端项目还是 antd 吧，整体确实是方便。c 端项目就 headlessui ，mui
2 fetch 和 axios 没区别 3 tailwind |
 |
11
gogogo1203 2023-08-23 11:52:15 +08:00 2
2023 年，React api call 不要直接用 axios 或者 fetch 做 async, 需要自己写各种 isLoading, isError. 用 react-query, 可以做 cache ，各种状态和结果直接一个 hook 就搞定了。
|
|
12
gogogo1203 2023-08-23 11:54:17 +08:00
ui 的话，shadcn+tailwind 最近非常流行。 可以说开创了一个新的组件调用的方式，非常方便
|
 |
13
christin 2023-08-23 11:55:08 +08:00
antd axios 手写 css
|
 |
14
zq51500 2023-08-23 14:42:01 +08:00
感觉 @vanilla-extract/css 也蛮好用的
|
 |
15
lianchi 2023-08-23 14:52:36 +08:00
UI 框架选择：
1 、unocss ，它和 Vue 搭配更好，不过在 Vite + React 上的配置稍微多一点点； 2 、tailwindcss ； 3 、同样是 tailwind 团队出的 Headless UI ，是基于 tailwindcss 的简单封装，兼具了自由、灵活、美观。 接口调用：都行，一般都会基于现成的库（根据项目需要）做一层封装。 |
 |
16
plasticman64 2023-08-23 15:02:18 +08:00
fetch ，axios 区别不大，如果以后要给别人维护的话推荐 axios ，会的人多点
|
 |
17
tkHello 2023-08-23 15:39:21 +08:00
什么类型的项目 项目不同 选型不同
|
 |
18
xiaoxinshiwo 2023-08-23 16:05:10 +08:00
@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> ``` |
|
19
gogogo1203 2023-08-23 16:14:35 +08:00
@xiaoxinshiwo composition 我认为才是终极组件，按照自己的需要加减。 有些 component lib 一定要塞个按钮，多个 divider. shadcnui 大火不是没有道理的。
|
|
20
xiaoxinshiwo 2023-08-23 16:18:05 +08:00
@gogogo1203 #19 确实灵活很多
|
 |
22
iamppz 2023-08-23 16:44:07 +08:00 2
前面几楼基本都说了，个人感觉目前的最佳实践是 tailwindcss + radix shadcn ，慎重选择 antd 和 mui 这种不太容易自定义样式的框架
|
|
23
gogogo1203 2023-08-23 16:48:51 +08:00
@xiaoxinshiwo 而且你可以随便改逻辑，样式和组合, 代码在你 src 文件夹里，不是 node_modules 。
|
 |
24
vdrapb OP @xiaoxinshiwo 但是自由度高了
|
 |
25
shui14 2023-08-23 17:27:30 +08:00
next-ui 或者 material-ui 吧，它们有设计，否则你自己来，出活不尽人意，选一个标准模仿，上限不高，但是保证下限
全栈就 nextjs trpc ，前端就随便 nextjs 或者 cra 都行，io 可以 react-query ，这样不用折腾状态，看样子你这小项目，也没用整 |
 |
26
LFL976 2023-08-23 17:29:54 +08:00 via iPhone
官方推荐了 next.js 咋样
|
 |
27
zogwosh 2023-08-23 18:01:49 +08:00
1.无脑 ant design
2.react query+axios 3.tailwindcss +daisyui |
 |
28
DICK23 2023-08-23 18:02:53 +08:00 1
1.随便都行，要快速就阿里系，antd antd pro-components,要搞定制化就 headui, 比如 shadcn-ui 这种
2.简单点可以直接请求，fetch 自己封装一下就行，要考虑状态管理啥的可以用 @tanstck/react-query 这种包，还有 swr,这些和 axios 同时使用配合更好 3.tailwindcss |
 |
29
fyxtc 2023-08-23 18:20:40 +08:00
居然没人推荐 chakra-ui ，那我推荐一下吧，mui 老牌子了，可以把 chakra-ui 当成下一代的 mui
|
 |
30
shunia 2023-08-23 21:52:56 +08:00
mui 比 antd 拉多了，antd 不如 tailwindcss/unocss 自定义万物，虽然 antd 也可以自定义吧，所以 antd 和 css 自选一种。
headlessui 之类的不太适合没有自己的设计系统的项目用，组装太费劲。 next 系的 UI 设计系统里字太小，费眼，个人用没啥问题但是不适合商用不如 antd 。如果自定义设计系统又回到第一行了，选 css 。 那个 shad 就是 vercel 的员工，所以他那库样式风格也那样。 如果选了 css 可以适当配合 daisy ui 或者 flowbite 之类的库，但是我个人觉得意义不大。 |
 |
31
gzf6 2023-08-23 22:05:18 +08:00 via Android
不需要监听上传进度就 fetch,否则用 axios 之类的
|
 |
32
cbdyzj 2023-08-23 22:47:05 +08:00
1. mui
2. fetch 3. emotion |
 |
33
maiyasu 2023-08-23 23:53:14 +08:00
TailwindCSS 没有错的，如果你喜欢自己控制的话。
|
 |
34
shervinchen 2023-08-24 00:23:31 +08:00 1
@shunia
主要是看需求，B 端项目（比如管理系统）不追求高定制化的话，就适合用 antd/mui 这种把逻辑样式封装好的库 如果是 C 端项目，要追求组件逻辑的高度定制化，那还是 radix/chakra 这种 headless 库好一点，可以自己用一些其他的逻辑库去组合实现想要的效果，灵活度很高（用 antd 这样的库，逻辑基本没法定制） |
 |
35
shuding 2023-08-24 00:52:46 +08:00 1
1. Radix UI：细节做到极致
2. fetch：拥抱标准，同一份代码在主流浏览器和 Node.js 18+ 里都可以无依赖直接运行 3. TailwindCSS：所有 React 环境和模式下都完美的一套方案（当然也可以用类似的原子化方案如 UnoCSS / Windi CSS ） |
 |
36
HaroldFinchNYC 2023-08-24 01:43:09 +08:00
React 应该搭配什么前端 UI 框架使用，有没有推荐的
其实几个出名的框架都不错 在调用接口服务的时候，用 axios 还是直接 fetch 如果只是前端网页，fetch 足够 如果有 ssr ，axios 很稳 如果不使用 UI 框架，有没有哪些推荐的 css 框架 bootstrap 但还是用框架吧，更省事一些 |
 |
37
sakae010 2023-08-24 09:50:07 +08:00
1. to b 或者业务复杂，ui 定制化不高 antd; 业务不太复杂，ui 定制化高，选国外的，主要国内想法花里胡哨的，antd 很多好用的组件可以直接上，国外的封装的都简单，需要你再次封装费时间
2. fetch + react query 3. unocss + less |
 |
38
wednesdayco 2023-08-24 11:19:15 +08:00
好多推荐 tailwind 的，只有我不喜欢用这类型的 css 框架的么？
|
 |
39
lidongyx 2023-08-24 11:33:08 +08:00
我一般前端、后端都一起写，而且非常喜欢用套装
比如 Nextjs ，就喜欢用 Nextui 、vercel 的全套服务； 比如 Amplify （ Lambda ）或 Firebase 也是能全套就尽量全套，而且这些都是全栈都有 小程序也喜欢用原生的...然后小程序云开发的网页会有 antd 接口都是用 axios |
 |
40
tonytonychopper 2023-08-24 12:05:14 +08:00
如果是那种后台项目，不考虑审美的情况下可以无脑 antd 吧，但是用它如果后续想改下风格会比较头疼
|
|
41
xiaoxinshiwo 2023-08-24 13:40:43 +08:00
@gogogo1203 #23 谢谢，再问下，你如果在项目里面使用 shadcn ， 你会对组件再次封装吗？
|
 |
42
speedofstephen 2023-08-24 15:46:32 +08:00
mantine 这个 UI 库不错
|
|
43
gogogo1203 2023-08-24 16:01:26 +08:00
@xiaoxinshiwo 我记得我在上个项目碰到一个特殊的需求. 我在 shadcn 源文件下，copy and paste 一个组件，改了名字， 改了里面的一些逻辑。 使用的时候用我起的名字。 随意改动就是 shadcn 最大的优点。
|
|
44
gogogo1203 2023-08-24 16:04:37 +08:00
@shuding 活捉 shu 大
|
|
45
gogogo1203 2023-08-24 16:11:22 +08:00
当然 shadcn 用的 Radix UI + tailwind css
|
 |
46
abelmakihara 2023-08-24 16:20:54 +08:00
@wednesdayco 不用觉得自己是少数 v2 并不是主流
|
 |
48
WhiteCat1111 2023-10-10 09:48:26 +08:00
@gogogo1203 我最近使用 npx shadcn-ui@latest init 报 connect ETIMEDOUT 是什么原因
|
 |
49
2chanriban 2023-10-13 13:48:23 +08:00
@WhiteCat1111 解决了吗，好像国内用户会遇到这个问题，我是在 wsl 环境下跑这个命令才成功......
|
Select Language