佬们, 咨询一个前端 React 的开发效率问题, 就是如果想快速实现一个界面组件的效果,只需要 render 部分, 有什么好用的工具吗?

[JoeJoeJoe]

最好是方便一些的, 能快速将样式和 html 导出来的.

万分感谢🙏🏻

[wgbx]

看起来你需要 imgCook https://www.imgcook.com/ ，但是现在拿 AI 调教一下，写出来的质量也可以了

[JoeJoeJoe]

@wgbx 我是想自己快速写一个小的组件界面,但是又不想打开工程.

[crocoBaby]

你是不是想要这种?https://playcode.io/react

[zzdcool]

https://v0.dev/chat

[JoeJoeJoe]

@crocoBaby 对对对, 就是这种, 但是这个太重了, 有没有类似的 vscode 插件?

[JoeJoeJoe]

@zzdcool crocoBaby 大佬给的这个 playground 就是我想要的

[crocoBaby]

@JoeJoeJoe 没有,很少用 react 生态

[shihao9618]

不知道你想要的是不是我这种的，直接用 html 执行就可以
https://github.com/ZSH-HSZ/editor-react

[JoeJoeJoe]

@shihao9618 对 差不多就是这么个东西,但是想要 react 的, 上面 crocoBaby 佬提供了一个

[shihao9618]

@JoeJoeJoe #9 我这个是 react 的，可以直接本地执行，全 js ，很简单

[shihao9618]

@JoeJoeJoe #9 down 下来执行 html 就可以了

[JoeJoeJoe]

@shihao9618 #11 cool

[bojue]

我们放弃的一个方向不知道是不是你要的，低代码产品，拖拽一个组件或者组装一个页面：输出各个框架的源码

不过我们组件库主要收录 toC 的组件，效果图有一个导出源码的按钮：

https://private-user-images.githubusercontent.com/14350577/505760790-7ec6c850-6af6-4206-b9e0-d151b4b76514.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjE2MjgwMjQsIm5iZiI6MTc2MTYyNzcyNCwicGF0aCI6Ii8xNDM1MDU3Ny81MDU3NjA3OTAtN2VjNmM4NTAtNmFmNi00MjA2LWI5ZTAtZDE1MWI0Yjc2NTE0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTEwMjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUxMDI4VDA1MDIwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVmNmMwNGU4MTc3MDhkNWJiYjRkZWQ0NWJiN2I4NjM3Y2M1ZTBiODg2MGUxMzJlMGM2ZjRmMDI2YzRkOTU5MDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Et6cakkn7WZc7AunHpg-Pz2pBF1eFQU-BWkDehLpFf4


[AI 来了我们放弃了做 SASS 方向]

[JoeJoeJoe]

@bojue 哈哈哈 非常感谢, 我其实就想要个 playground, AI 只用作辅助, 代码还是得自己写的放心

[coffeedeveloper]

可以用一下 [weavefox]( https://www.weavefox.cn/) 能够直接用图片或者描述来生成，生成后的代码可以继续二次编辑

[fridaythx]

codesandbox ，或者本地起一个 storybook

[xiaoshan5733]

我也发一个： https://unpkg.com/[email protected]/public/index.html#preset=react