假期学习 react，写了一个查菜谱的小网站，另外还有“老饭骨”的菜谱合集可以查看～

[zhangjc]

• 用食材查看常见菜谱点这里

• 想要在家里种菜？点这里

• 老饭骨的视频合集，在这里

为本项目添加了 docker 的支持，并且镜像大小仅 11MB

想要自己部署的朋友可以参考这条命令一键本地搭建：

docker run -it -d --name cook -p 8080:80 zhangjc1999/cook:latest

补充求助内容：

• docker buildx 在打包arm64镜像时会报错，不知道有什么好的解决方案吗？
• nextjs 的环境变量与docker的环境变量如何更好的解析和传递？

[zhangjc]

这个站点支持 pwa ，喜欢的小伙伴可以 [分享] > [保存到桌面] 离线使用～

同时这个项目也是开源的，也非常欢迎想要添加功能或者补充菜谱数据的小伙伴～

[uasier]

我不理解这种行为
该项目原作者 github repo: https://github.com/YunYouJun/cook

[zhangjc]

@uasier
1. 看关于界面的最后，有说明 UI 有参考
2. 我在原作者的 repo 的 discussion 提了分享展示 https://github.com/YunYouJun/cook/discussions/29
3. 我分享的主要是关于 “老饭骨” 的合集，这些数据目前只有我的站点有～

[zhangjc]

@uasier
4. UI 有参考这些站点上都有说明，我是用 react 实现的，参考的站点是 vue

[uasier]

我这边部分信息没有看全，sorry 。

[zhangjc]

我也贴一下原作者的 vue[站点]( https://cook.yunyoujun.cn/)吧

[uasier]

@uasier 非常抱歉

[gogogo1203]

支持！ 刚刚在 React 区有个刚接触 react 就跑出来 diss react 各种不足，你比那人强 100 倍。

[gogogo1203]

看了一下你的代码，我在搞的项目也用的 vite, zustand, typescript. https://homebh.tk/editor 还没有搞完。 如果你无聊，可以研究一下 react-dnd, 把食材拖拽到各个烹饪器具上。

[gogogo1203]

```

[gogogo1203]

function toggleStaff(stuffs: Set<string>, stuff: string): Set<string> {
if (!stuff) {
return stuffs
}

你说的 stuff 是不是 ingredient, 换个其他的名字吧

[Outshine]

我好奇的问一下，你和原作者都用的这种 tailwind class 的写法，和直接在 className 里赋值比起来有啥优点嘛？

[zhangjc]

@gogogo1203 对的，确实命名这块没有完全统一，需要改一下

[zhangjc]

@Outshine 不清楚了😅我是跟着 nextjs 官方教程走的（这个仓库第一个提交还是 learn nextjs ）
我本身是后端开发，也是第一次用前端的框架写项目

[zhangjc]

@gogogo1203 体验了一下，挺不错👍又多了一个可以尝试的东西😃

[zhangjc]

@Outshine 以前只写过裸 js 和 css 的 demo ，就开发体验来讲，tailwind 和 react 组件的内聚性更高一些，会比直接撸 css 快很多。（不过我没太多前端开发经验，个人感受仅供参考

[Outshine]

@zhangjc 昂，我想问的其实是相对于 `<div className="text-xl mt-4"></div>` 来说， 你们用的这种 `<div text-xl m="t-4"></div>` 的写法优势在哪？少写一个 className ?

[Leviathann]

@Outshine 不用两个文件来回切，而且是根据功能打包好的，一个功能的原子类可以对应几条 css

[Leviathann]

@Outshine 这个写法感觉是格式化更友好把，不然有的复杂点的 classname 太长了

[zhangjc]

添加了 docker 的支持，并且镜像大小仅 **11MB**

想要自己部署的朋友可以参考这条命令一键本地搭建：

`docker run -it -d --name cook -p 8080:80 zhangjc1999/cook:latest`