假期学习 react，写了一个查菜谱的小网站，另外还有“老饭骨”的菜谱合集可以查看～
zhangjc · 2022-05-03 20:43:52 +08:00 · 2987 次点击这是一个创建于 934 天前的主题，其中的信息可能已经有所发展或是发生改变。
第 1 条附言 · 2022-05-08 18:33:10 +08:00
为本项目添加了 docker 的支持，并且镜像大小仅 11MB
想要自己部署的朋友可以参考这条命令一键本地搭建：
docker run -it -d --name cook -p 8080:80 zhangjc1999/cook:latest
补充求助内容：
- docker buildx 在打包arm64镜像时会报错，不知道有什么好的解决方案吗？
- nextjs 的环境变量与docker的环境变量如何更好的解析和传递？
 |
1
zhangjc OP 这个站点支持 pwa ，喜欢的小伙伴可以 [分享] > [保存到桌面] 离线使用～
同时这个项目也是开源的，也非常欢迎想要添加功能或者补充菜谱数据的小伙伴～ |
 |
2
uasier 2022-05-03 22:08:00 +08:00
我不理解这种行为
该项目原作者 github repo: https://github.com/YunYouJun/cook |
|
3
zhangjc OP @uasier
1. 看关于界面的最后，有说明 UI 有参考 2. 我在原作者的 repo 的 discussion 提了分享展示 https://github.com/YunYouJun/cook/discussions/29 3. 我分享的主要是关于 “老饭骨” 的合集，这些数据目前只有我的站点有～ |
|
5
uasier 2022-05-03 22:20:43 +08:00
我这边部分信息没有看全，sorry 。
|
|
6
zhangjc OP 我也贴一下原作者的 vue[站点]( https://cook.yunyoujun.cn/)吧
|
 |
8
gogogo1203 2022-05-03 23:12:25 +08:00  1
支持！ 刚刚在 React 区有个刚接触 react 就跑出来 diss react 各种不足，你比那人强 100 倍。
|
|
9
gogogo1203 2022-05-04 00:37:15 +08:00
看了一下你的代码，我在搞的项目也用的 vite, zustand, typescript. https://homebh.tk/editor 还没有搞完。 如果你无聊，可以研究一下 react-dnd, 把食材拖拽到各个烹饪器具上。
|
|
10
gogogo1203 2022-05-04 00:38:08 +08:00
```
|
|
11
gogogo1203 2022-05-04 00:39:20 +08:00
function toggleStaff(stuffs: Set<string>, stuff: string): Set<string> {
if (!stuff) { return stuffs } 你说的 stuff 是不是 ingredient, 换个其他的名字吧 |
 |
12
Outshine 2022-05-04 00:53:01 +08:00
我好奇的问一下，你和原作者都用的这种 tailwind class 的写法，和直接在 className 里赋值比起来有啥优点嘛？
|
|
13
zhangjc OP @gogogo1203 对的，确实命名这块没有完全统一，需要改一下
|
|
14
zhangjc OP @Outshine 不清楚了😅我是跟着 nextjs 官方教程走的（这个仓库第一个提交还是 learn nextjs ）
我本身是后端开发，也是第一次用前端的框架写项目 |
|
15
zhangjc OP @gogogo1203 体验了一下，挺不错👍又多了一个可以尝试的东西😃
|
|
16
zhangjc OP @Outshine 以前只写过裸 js 和 css 的 demo ，就开发体验来讲，tailwind 和 react 组件的内聚性更高一些，会比直接撸 css 快很多。（不过我没太多前端开发经验，个人感受仅供参考
|
|
17
Outshine 2022-05-04 01:10:43 +08:00
@zhangjc 昂，我想问的其实是相对于 `<div className="text-xl mt-4"></div>` 来说， 你们用的这种 `<div text-xl m="t-4"></div>` 的写法优势在哪？少写一个 className ?
|
 |
18
Leviathann 2022-05-04 01:11:08 +08:00 1
@Outshine 不用两个文件来回切，而且是根据功能打包好的，一个功能的原子类可以对应几条 css
|
|
19
Leviathann 2022-05-04 01:13:12 +08:00
@Outshine 这个写法感觉是格式化更友好把，不然有的复杂点的 classname 太长了
|
|
20
zhangjc OP 添加了 docker 的支持，并且镜像大小仅 **11MB**
想要自己部署的朋友可以参考这条命令一键本地搭建： `docker run -it -d --name cook -p 8080:80 zhangjc1999/cook:latest` |
Select Language