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 环境下跑这个命令才成功......
|