学 React 两周，练手项目，做了个封面制作工具
这是一个创建于 548 天前的主题，其中的信息可能已经有所发展或是发生改变。
无前端经验，直接上 react + nextjs + nextui + tailwindcss ，工作之余 + 周末撸了一个 封面生成工具，代码写的稀烂，拷贝+粘贴，好在 work
特点就是简单，简单，简单！
可以为博客文章，微信公众号等制作封面，吸引读者
地址： https://picprose.net, 部署再 vercel ，国内可能慢点
 | 1 chenhua19940128 2024-04-11 09:34:13 +08:00 不能不要作者和图标信息吗。 |
 | 2 saka0609 2024-04-11 09:35:11 +08:00 请教下 op ，无前端经验直接干 react 的学习路线大概是啥，我前天晚上也有学点前端的想法，打开 react 官网明明白白写着需要 js 经验... |
 | 3 blankmiss 2024-04-11 09:37:02 +08:00 这可能不是 2 周的水平 |
 | 4 devzhaoyou OP @chenhua19940128 可以，作者输入框里打个空格，图标的话我得改改 |
| 5 devzhaoyou OP @blankmiss 本人有 c++，java, python 等编程经验所以上手快点，忘了说了 还要加上 chatgpt |
 | 6 allen123890 2024-04-11 09:43:37 +08:00 同在学，op 速度太快了，牛 |
 | 7 tianzx PRO @saka0609 可以考虑从我的模版入手 https://github.com/saasfly/saasfly ，做一个增删改查基本就算入门了？ |
 | 8 poorcai 2024-04-11 09:44:27 +08:00 挺牛的，我一后端不知道如何设计和写样式 |
| 9 devzhaoyou OP @saka0609 js 比其他语言灵活太多，没有其他编程经验，还是得学学，我是有 c++编程经验的，上手快点。没啥学习路线，直接看 react 官网教程，没有 class 组件，学起来感觉比较简单，别被概念吓住了，先学会使用。 |
 | 10 oceanquake 2024-04-11 09:47:45 +08:00 如果可以更换分辨率，就可以作为文字壁纸生成工具了 |
 | 11 gcgj72 2024-04-11 09:53:23 +08:00 via iPhone ai 占很大一部分吧 |
| 12 saka0609 2024-04-11 09:54:27 +08:00 @devzhaoyou 感谢回复，周末我会学习一下 |
 | 13 yxzblue 2024-04-11 09:54:55 +08:00 挺不错~ |
| 15 tianzx PRO @saka0609 #14 我想说并不早。React 其实 19 的大部分需求都是在给 vercel 、Next.js 做，很多核心研发也都跑到了 vercel ，https://react.dev/learn/start-a-new-react-project 在这里明确推广了 Next.js 。其实我的也就是一个脚手架，能省去不少的时间，真心推荐学一下不吃亏  |
| 16 devzhaoyou OP @poorcai 找个好看的 ui 库就好，基础的 css 也比较好掌握，用到啥查啥 |
 | 17 Hopetree 2024-04-11 10:10:02 +08:00 有个重要功能需要做：支持本地图片上传使用 |
 | 18 ZZITE 2024-04-11 10:10:48 +08:00 GitHub 的跳转链接“https:/github.com/gezhaoyou/picprose” 少了一个 “/” |
 | 19 qinyui 2024-04-11 10:25:42 +08:00 调整分辨率时，背景图片不能移动选择指定范围呀 |
| 20 poorcai 2024-04-11 10:34:43 +08:00 @devzhaoyou #16 好看的 ui 库，op 可以举个例子吗？ |
 | 21 DICK23 2024-04-11 10:37:15 +08:00 @tianzx 好像有异常 “Application error: a client-side exception has occurred (see the browser console for more information).” |
 | 23 Mistyrainjn 2024-04-11 10:47:23 +08:00 @blankmiss #3 差不多吧 感觉 我已经是点击编辑 你拆分一下 只是做了一个双向绑定 |
 | 24 zangbianxuegu 2024-04-11 10:50:34 +08:00 有个问题，是不是每个关键词只能搜索 30 个图？ |
 | 25 KMpAn8Obw1QhPoEP 2024-04-11 10:51:34 +08:00 via Android 前端两年半练习生被吊打了 哈哈哈 |
| 26 devzhaoyou OP @ZZITE 好的 谢谢~ |
| 27 devzhaoyou OP @zangbianxuegu 是的，张数写死的 30 ，后面会做下调整，不知道怎么形容，叫懒加载，还是叫分段加载 |
| 28 devzhaoyou OP  1 |
| 29 devzhaoyou OP @Hopetree 谢谢，准备做下~ |
| 30 devzhaoyou OP @qinyui 是的，项目比较简单 |
 | 31 q2677855779 2024-04-11 14:00:13 +08:00 很强了大佬 |
 | 32 Xu3Xan89YsA7oP64 2024-04-11 14:29:57 +08:00 厉害了，一般无前端经验，估计得学上几个月，然后再花 2 周才能做出这么个项目 |
 | 33 fenglirookie 2024-04-11 15:19:32 +08:00 图片是直接放在项目里面的吗？ |
 | 34 dcmi2021 2024-04-11 15:28:39 +08:00 我去，这用在 PPT 封面不无敌吗？不敢相信这是 2 周经验写的 |
 | 35 tthem 2024-04-11 16:27:49 +08:00 厉害啊，学两周就能直接出成果，这执行力我羡慕了 |
 | 36 lujiaosama 2024-04-11 16:32:15 +08:00 lz 之前有 js, vue 的经验么. 我也是最近开始实际写 react 项目, 这里最大的麻烦其实是 react 的一堆 API, hook 钩子的使用. 到现在其实就弄懂了基础的几个, 满足基本开发需求. 性能优化要用上一堆没查过的 api, 真的麻烦. |
 | 37 bgm004 2024-04-11 16:36:54 +08:00 歪个楼，我看你这给页面基本都是客户端组件也才加载 390kb 。我全服务器端组件的页面要 150kb 。 nextjs 这折腾 1 年多，搞的服务器端组件除了流式加载其他优点完全没感觉啊 |
| 38 devzhaoyou OP @fenglirookie 不是，提供了搜索框，通过 api 获取的 https://unsplash.com/ 图片 |
| 39 devzhaoyou OP @lujiaosama 有 c++和 java 经验，做之前也比较过 vue 和 react ，react 比较符合我思维，对 vue 基本不了解。我没感觉 react 有多麻烦，没必要记，感觉就是定义 hook ，使用，定义 function ， 使用，没了 |
| 40 devzhaoyou OP @tthem 谢谢，gpt 也助把力 |
 | 41 FakerLeung 2024-04-11 19:23:42 +08:00 @tianzx #22 是。动一下就报错 show 那个网站 |
| 42 tianzx PRO @FakerLeung 还真是，我来看看 |
| 43 tianzx PRO |
| 44 FakerLeung 2024-04-11 20:17:53 +08:00 @tianzx #43 中文文档为啥点进去都是 not found ？ |
 | 45 exploreexe 2024-04-11 20:20:17 +08:00 真牛逼 |
| 46 tianzx PRO @FakerLeung #44 那个就是用来展示 contentlayer 和 markdown 的，没精力在做中文适配了  |
 | 47 madao199 2024-04-11 20:47:40 +08:00 html2canvas + 表单 一周也挺快的 |
| 48 devzhaoyou OP @madao199 都是堆开源 堆框架，有经验的感觉一两天就完事了，我这中间走了比较多弯路，另外代码写的很差，一点前端代码经验没有，只是 work 了。 项目开源了，希望有经验的大佬给指点一下 |
 | 49 vcmt 2024-04-11 22:43:57 +08:00 via Android 会用不懂原理，最后导致 bugs 满天飞 |
| 50 devzhaoyou OP @vcmt 你说的对，这个过程就是先跑起来再回头看原理，再优化，再看，踩坑，然后就懂了。不写 bug 估计也不会很懂原理 |
 | 51 wsbqdyhm 2024-04-11 23:19:29 +08:00 不是程序员，就纯用户，觉得很容易上手，ui 界面很漂亮，如果可以自己上传照片，还有内容可以随意移动就好了。 |
 | 52 htxy1985 2024-04-11 23:57:48 +08:00 真挺好的，star+clone 了 |
 | 53 zhangk23 2024-04-12 00:30:01 +08:00 @saka0609 js 简单的很，油管上找个项目敲一下，看看 async ，箭头函数和咋操控 dom 就好了， 没啥技术含量的（ |
 | 54 alexmy 2024-04-12 00:50:50 +08:00 以前也用这套，不过 UI 一直都是 antd ，下次试试这个 nextui 。 |
 | 55 unclebb 2024-04-12 09:14:15 +08:00 via iPhone 如果你也想用 react 做一个类似的工具，可以参考我的项目 https://github.com/sleepy-zone/fabritor-web |
| 56 devzhaoyou OP @unclebb 相当赞，不过我准备基于 konva 优化下编辑器 |
| 57 devzhaoyou OP @wsbqdyhm 感谢反馈，项目还比较早期，后面有时间会做上拖动和上传图片这些~ |
 | 58 Pters 2024-04-12 10:23:38 +08:00 越越喜欢 react ，我也在学，感觉上手简单 |
| 59 unclebb 2024-04-12 15:59:45 +08:00 @devzhaoyou #56 konva 挺好的，唯一的问题是需要依赖 dom 操作文字 |
| 60 devzhaoyou OP @Hopetree 已支持~ |
| 61 devzhaoyou OP @wsbqdyhm 已支持上传图片~ |
| 62 devzhaoyou OP @unclebb 明白你的意思了，如果是富文本需要 dom 转成图片再操作。如果只是普通文字 konva 提供的选项也基本够用了 |
Select Language