ReacType

导出 React/TypeScript 代码的可视化原型工具
授权协议 MIT
开发语言 TypeScript
所属分类 开发工具、 界面原型设计工具
软件类型 开源软件
地区 不详
投 递 者 滕英奕
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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配置文件和组件文件导出新项目。此选项将允许开发人员立即开始新项目。
 相关资料
  • 如何下载visual studio代码中的python模块?我尝试使用pip下载,但是vs-code使用windows cmd/PowerShell,因此pip无法工作。

  • 在我的项目中,我希望有一个包含所有类型脚本定义的文件,如下所示: type_defs.tsx: 问题是,当我尝试导出typedefs时,如下所示: 我得到了错误: 正如我在网络中发现的那样,只能对typedef文件进行默认导出,这意味着我必须为每个类型定义准备一个文件,这绝对是荒谬的! 在我看来,不允许typedefs具有多个非默认导出的约束完全是无稽之谈,并且使编码变得多余且难以重用。拥有一个包

  • 本文向大家介绍pytorch 可视化feature map的示例代码,包括了pytorch 可视化feature map的示例代码的使用技巧和注意事项,需要的朋友参考一下 之前做的一些项目中涉及到feature map 可视化的问题,一个层中feature map的数量往往就是当前层out_channels的值,我们可以通过以下代码可视化自己网络中某层的feature map,个人感觉可视化fea

  • keras.utils.vis_utils模块提供了画出Keras模型的函数(利用graphviz) 该函数将画出模型结构图,并保存成图片: from keras.utils import plot_model plot_model(model, to_file='model.png') plot_model接收两个可选参数: show_shapes:指定是否显示输出数据的形状,默认为False

  • keras.utils.visualize_util模块提供了画出Keras模型的函数(利用graphviz) 该函数将画出模型结构图,并保存成图片: from keras.utils.visualize_util import plot plot(model, to_file='model.png') plot接收两个可选参数: show_shapes:指定是否显示输出数据的形状,默认为Fal

  • 网络权值可视化 卷积层权值可视化十分有用,经过良好训练的网络权值通常表现为美观、光滑的滤波器。反之,如果表现为噪声图样,则可能意味着网络还没有经过足够长时间的训练,或者由于正则化强度过小导致网络出现过拟合。 什么样的权值是坏的: 图案类似噪声 图案相关性太高 图案缺乏结构性 特征图可视化 在将 feature map 可视化之后,每个小方块显示了对应特定滤波器的响应图,其中低层响应特征图关注图像中