导出 React/TypeScript 代码的可视化原型工具 ReacType

导出 React/TypeScript 代码的可视化原型工具 ReacType

MIT
TypeScript
跨平台
2019-05-15
xplanet

ReacType 是一种可视化原型工具,适用于采用 React 组件架构以及 TypeScript 综合类型检查的开发人员。换句话说,可以用它绘制原型并导出 React/Typescript 代码。

ReacType 允许用户动态可视化其应用程序体系结构,采用画布显示、应用程序树和实时组件代码预览。用户可以在画布上创建组件并将这些组件的实例以及嵌套的 HTML 元素加载到其中。然后,可以将此体系结构导出为 TypeScript 应用程序文件,以用作任何存储库的入门模板。

适用于MacOSWindowsLinux

  • Mac用户:目前您可能需要转到安全设置以允许应用程序在您的系统上运行,因为我们还没有Apple许可证。

ReacType应用程序的图像

如何使用

  • 打开应用程序以启动新项目。它将在根App组件中打开,其名称在左侧面板中列出,组件由画布上的白色框表示。
  • 要添加新组件,请在左上方面板的“ 添加类组件 ” 字段中键入其名称,然后按Enter键。
  • 要将组件实例呈现到屏幕,请首先选择要在其中呈现实例的组件或父组件。此选定组件将在新的画布视图中显示,并带有自己的白色框。然后按组件名称旁边的加号按钮。实例或子表示将出现在画布上。
  • 要添加可拖动的HTML元素,请选择左下方面板上的图像图标。

添加的GIF

  • 底部面板允许用户4个不同视图之间切换:一个应用程序的树状图,一个可输出码的实时预览,进入组件道具形式,并且一个表单添加HTML属性。

代码预览和树的GIF

  • 可以在底部面板的选项卡中将道具添加到每个组件中。输入键值对,选择其数据类型,然后按“ADD PROP”底部。
  • HTML元素在将HTML元素渲染到画布后,可以将类名和ID的属性添加到每个HTML元素中。

attr&道具的GIF

  • 要从画布删除一个实例,选择所需的实例,并按删除键。
  • 删除一个组件,点击左侧面板的所希望组分的“删除”按钮。
  • 要重新开始,请在左侧面板中选择蓝色的“CLEAR WORKSPACE”按钮。这将清除整个应用程序

导出文件

  • 完成设置应用程序模板后,按左侧面板底部的绿色“EXPORT PROJECT”按钮,在两个选项之间选择导出文件:
    1. 将组件文件导出到组件文件夹中。此选项将允许开发人员将这些文件添加到现有项目中。
    2. 使用TypeScript配置文件和组件文件导出新项目。此选项将允许开发人员立即开始新项目。
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

暂无博客

返回顶部
顶部