免费开源的React.js可视化设计环境:Utopia


这是一个用于在浏览器中运行的 React 项目和组件的设计和编码环境。它将 VSCode 与设计和预览工具相结合,以及完全的双向同步:设计和代码相互实时更新。与现有的任何设计工具不同,它使用 React 代码作为事实来源。类似以前的FrontPage 和 Flash编辑工具。
为了编辑代码,Utopia包含了 VSCode,Microsoft 的开源代码编辑器 - 带有 ESLint、Prettier 和主题支持;有一个用于调试的控制台,一个用于与世界分享您的作品的外部预览,以及运行时错误消息;还有一个画布可以让你渲染一个或多个组件,并在你输入时更新。
Utopia 是一个开源的、麻省理工学院许可的软件项目,托管在 Github 上。
一旦您将画布切换到编辑模式,Utopia的超能力就会真正脱颖而出。画布上的每个元素和组件都变得可选、可配置和可编辑。我们在这里有雄心勃勃的目标,特别是想要创建一个熟悉、强大且适应编辑真实生产级代码的独特挑战的工具。以下是其中的一些工作方式:

  • 保持同步:Utopia 默认为“跟随我”模式,点击设计中的元素会自动打开文件,滚动到正确的位置,然后放置光标。这也适用于其他方式!
  • 组件是一流的概念。Utopia 是从头开始构建的,可以使用可以通过 props 配置的嵌套组件。例如,您可以在查看实例和编辑组件本身之间快速切换,无需上下文切换。


安装:
  • 如果使用 Windows,您首先需要为 Linux (wsl)设置Windows 子系统。以下所有步骤和命令都假定您使用的是 wsl。
  • 在macOS 上,您需要brew并且必须先运行brew install gmp。在新的 M1 Macbook 上,请按照以下步骤安装 brew 并首次运行服务器。

点击标题