学 React 两周，练手项目，做了个封面制作工具

[devzhaoyou]

无前端经验，直接上 react + nextjs + nextui + tailwindcss ，工作之余 + 周末撸了一个 封面生成工具，代码写的稀烂，拷贝+粘贴，好在 work 😄

特点就是简单，简单，简单！

可以为博客文章，微信公众号等制作封面，吸引读者

地址： https://picprose.net, 部署再 vercel ，国内可能慢点

[chenhua19940128]

不能不要作者和图标信息吗。

[saka0609]

请教下 op ，无前端经验直接干 react 的学习路线大概是啥，我前天晚上也有学点前端的想法，打开 react 官网明明白白写着需要 js 经验...

[blankmiss]

这可能不是 2 周的水平

[devzhaoyou]

@chenhua19940128 可以，作者输入框里打个空格，图标的话我得改改

[devzhaoyou]

@blankmiss 本人有 c++，java, python 等编程经验所以上手快点，忘了说了 还要加上 chatgpt

[allen123890]

同在学，op 速度太快了，牛

[tianzx]

@saka0609 可以考虑从我的模版入手 https://github.com/saasfly/saasfly ，做一个增删改查基本就算入门了？

[bytewalk]

挺牛的，我一后端不知道如何设计和写样式

[devzhaoyou]

@saka0609 js 比其他语言灵活太多，没有其他编程经验，还是得学学，我是有 c++编程经验的，上手快点。没啥学习路线，直接看 react 官网教程，没有 class 组件，学起来感觉比较简单，别被概念吓住了，先学会使用。

[oceanquake]

如果可以更换分辨率，就可以作为文字壁纸生成工具了

[gcgj72]

ai 占很大一部分吧

[saka0609]

@devzhaoyou 感谢回复，周末我会学习一下

[yxzblue]

挺不错~

[saka0609]

@tianzx 可能对我来说有点早..?但是已 star, 感谢

[tianzx]

@saka0609 #14 我想说并不早。React 其实 19 的大部分需求都是在给 vercel 、Next.js 做，很多核心研发也都跑到了 vercel ，https://react.dev/learn/start-a-new-react-project 在这里明确推广了 Next.js 。其实我的也就是一个脚手架，能省去不少的时间，真心推荐学一下不吃亏

[devzhaoyou]

@poorcai 找个好看的 ui 库就好，基础的 css 也比较好掌握，用到啥查啥

[Hopetree]

有个重要功能需要做：支持本地图片上传使用

[ZZITE]

👍
GitHub 的跳转链接“https:/github.com/gezhaoyou/picprose” 少了一个 “/”

[qinyui]

调整分辨率时，背景图片不能移动选择指定范围呀

[bytewalk]

@devzhaoyou #16 好看的 ui 库，op 可以举个例子吗？

[DICK23]

@tianzx 好像有异常 “Application error: a client-side exception has occurred (see the browser console for more information).”

[tianzx]

@DICK23 我这里看没有问题啊 ，是我的项目吗

[Mistyrainjn]

@blankmiss #3 差不多吧 感觉 我已经是点击编辑 你拆分一下 只是做了一个双向绑定

[zangbianxuegu]

有个问题，是不是每个关键词只能搜索 30 个图？

[KMpAn8Obw1QhPoEP]

前端两年半练习生被吊打了 哈哈哈

[devzhaoyou]

@ZZITE 好的 谢谢~

[devzhaoyou]

@zangbianxuegu 是的，张数写死的 30 ，后面会做下调整，不知道怎么形容，叫懒加载，还是叫分段加载

[devzhaoyou]

@poorcai #20 https://nextui.org/ 和 https://ui.shadcn.com/

[devzhaoyou]

@Hopetree 谢谢，准备做下~

[devzhaoyou]

@qinyui 是的，项目比较简单

[q2677855779]

很强了大佬

[Xu3Xan89YsA7oP64]

厉害了，一般无前端经验，估计得学上几个月，然后再花 2 周才能做出这么个项目

[fenglirookie]

图片是直接放在项目里面的吗？

[dcmi2021]

我去，这用在 PPT 封面不无敌吗？不敢相信这是 2 周经验写的

[tthem]

厉害啊，学两周就能直接出成果，这执行力我羡慕了

[lujiaosama]

lz 之前有 js, vue 的经验么. 我也是最近开始实际写 react 项目, 这里最大的麻烦其实是 react 的一堆 API, hook 钩子的使用. 到现在其实就弄懂了基础的几个, 满足基本开发需求. 性能优化要用上一堆没查过的 api, 真的麻烦.

[bgm004]

歪个楼，我看你这给页面基本都是客户端组件也才加载 390kb 。我全服务器端组件的页面要 150kb 。
nextjs 这折腾 1 年多，搞的服务器端组件除了流式加载其他优点完全没感觉啊

[devzhaoyou]

@fenglirookie 不是，提供了搜索框，通过 api 获取的 https://unsplash.com/ 图片

[devzhaoyou]

@lujiaosama 有 c++和 java 经验，做之前也比较过 vue 和 react ，react 比较符合我思维，对 vue 基本不了解。我没感觉 react 有多麻烦，没必要记，感觉就是定义 hook ，使用，定义 function ， 使用，没了

[devzhaoyou]

@tthem 谢谢，gpt 也助把力

[FakerLeung]

@tianzx #22
是。动一下就报错 show 那个网站

[tianzx]

@FakerLeung 还真是，我来看看

[tianzx]

@FakerLeung
@DICK23 修复了

[FakerLeung]

@tianzx #43
中文文档为啥点进去都是 not found ？

[exploreexe]

真牛逼

[tianzx]

@FakerLeung #44 那个就是用来展示 contentlayer 和 markdown 的，没精力在做中文适配了

[madao199]

html2canvas + 表单 一周也挺快的

[devzhaoyou]

@madao199 都是堆开源 堆框架，有经验的感觉一两天就完事了，我这中间走了比较多弯路，另外代码写的很差，一点前端代码经验没有，只是 work 了。 项目开源了，希望有经验的大佬给指点一下

[vcmt]

会用不懂原理，最后导致 bugs 满天飞

[devzhaoyou]

@vcmt 你说的对，这个过程就是先跑起来再回头看原理，再优化，再看，踩坑，然后就懂了。不写 bug 估计也不会很懂原理

[wsbqdyhm]

不是程序员，就纯用户，觉得很容易上手，ui 界面很漂亮，如果可以自己上传照片，还有内容可以随意移动就好了。

[htxy1985]

真挺好的，star+clone 了

[zhangk23]

@saka0609 js 简单的很，油管上找个项目敲一下，看看 async ，箭头函数和咋操控 dom 就好了， 没啥技术含量的（

[alexmy]

以前也用这套，不过 UI 一直都是 antd ，下次试试这个 nextui 。

[unclebb]

如果你也想用 react 做一个类似的工具，可以参考我的项目 https://github.com/sleepy-zone/fabritor-web

[devzhaoyou]

@unclebb 相当赞，不过我准备基于 konva 优化下编辑器😄

[devzhaoyou]

@wsbqdyhm 感谢反馈，项目还比较早期，后面有时间会做上拖动和上传图片这些~

[Pters]

越来越喜欢 react ，我也在学，感觉上手简单

[unclebb]

@devzhaoyou #56 konva 挺好的，唯一的问题是需要依赖 dom 操作文字😂

[devzhaoyou]

@Hopetree 已支持~

[devzhaoyou]

@wsbqdyhm 已支持上传图片~

[devzhaoyou]

@unclebb 明白你的意思了，如果是富文本需要 dom 转成图片再操作。如果只是普通文字 konva 提供的选项也基本够用了😹