软件简介

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

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

适用于MacOS、Windows、Linux。

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

如何使用

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

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

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

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

导出文件

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