React Studio 1.2:版本控制、插件编辑器和商店、3D 预览——而且免费!
我们刚刚发布了 React Studio 的更新。这个作品有一段时间了,但我们认为值得等待。有一个大新闻并不是真正的功能,但改变了很多事情:截至今天,React Studio 是免费的。
在 reactstudio.com 下载 React Studio →
是的,我们正在放弃订阅定价模式。您的反馈非常明确 — 很多 Mac 用户只是不喜欢订阅单个软件。现在 React Studio 可以免费使用,它也不是试用版或限量版:对导出功能或您可以对项目执行的操作没有任何限制。
现在,我们不再订阅订阅,而是全力以赴为插件和组件构建生态系统。我们想让 React Studio 成为构建现代 Web 应用程序的团队工作流的独特强大工具,而此版本中的新功能是该目标的一部分。我们已经通过电子邮件通知了当前的订阅者,我们要感谢所有早期采用者对我们的支持(我们会根据您订阅的时间提供特别礼物)。
1.2 中的#### 功能亮点:
-
使用 Git 的版本控制集成
-
集成插件编辑器
-
Create Plugin 命令(在插件菜单中)
-
_“改变组件状态”_交互
-
编辑画布中的 3D 预览
我们还修复了许多错误和 UI 不便。非常感谢所有报告问题的人!
如何更新
如果您已经拥有 React Studio,只需打开该应用程序,它就会向您显示更新。如果您还没有,可以在 reactstudio.com下载该应用程序,当然!
3D预览
这种新的“爆炸式”预览模式让您更清楚地了解设计中的图层组。
单击设计画布左下角的_“3D”_按钮:
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*pxkf-AfYUZkcu10dPW_38A.png&wu003d828&qu003d75 1x, /_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*pxkf-AfYUZkcu10dPW_38A.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?url u003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*pxkf-AfYUZkcu10dPW_38A.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute ;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min -width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
编辑画布中的 3D 预览
在上面的截图中,您可以看到 Foreground、Scroll Flow 和 Background 图层组清晰地分开。更容易理解哪些内容是可滚动的!
项目地图更新
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*LZfHkEqhe-bAMtDjsoplVA.gif&wu003d640&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*LZfHkEqhe-bAMtDjsoplVA.gif&wu003d1080&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*LZfHkEqhe-bAMtDjsoplVA.gif&wu003d1080&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">
一键“清理”凌乱的项目图
-
_“清洁”_功能。通过单击按钮重新排列凌乱的项目图。 (如果你不喜欢自动清理的状态,Undo 会带你回去。)
-
悬停预览。当您用鼠标悬停项目地图节点时显示预览。
-
更新了连接线的视觉样式。
使用 Git 进行版本控制
React Studio 现在自动支持 Git,这是一个流行的系统,用于对源代码](https://en.wikipedia.org/wiki/Version_control?ref=hackernoon.com)进行[版本控制。
版本控制实际上是关于两件事:1)管理您的更改历史记录,以便您可以返回到以前的版本并且不会意外覆盖新的更改,2)与其他人合作,以便您可以轻松地组合您的工作。 React Studio 的 Git 集成两者兼而有之。
当您第一次在 React Studio 项目中执行代码导出时(使用工具栏中的“在浏览器中打开”或“导出 React 代码”命令),将创建一个 Git 存储库。从那时起,您对同一项目所做的任何导出都将存储在同一存储库下的版本控制(Git 术语中的“已提交”)中。
如果您在导出的代码中进行手动修改,React Studio 会在您下次导出时检测到这一点。您将看到一个对话框,询问您如何继续:
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*Lu5Wsk_oAu7LiicmjU8UMQ.png&wu003d828&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*Lu5Wsk_oAu7LiicmjU8UMQ.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*Lu5Wsk_oAu7LiicmjU8UMQ.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">
这样,您的手动更改永远不会被意外覆盖。
还有更多。多亏了一个名为 branches 的 Git 功能,您可以使用此集成轻松地处理带有 React Studio 和手动更改的代码。就是这样...
将 React Studio 导出与手动代码更改相结合的工作流程
React Studio 将其所有提交放在一个名为 “react-studio” 的 Git 分支中。这使得手动处理代码变得容易,然后在分支之间合并。
假设您在从 React Studio 导出一些内容后要手动更改代码。工作流程将是这样的:
-
将 git repo 切换到不同的分支。 (命名分支没有严格的规则。可以根据开发人员,例如 “john-doe-changes”,或根据您正在开发的功能,例如 “accounting-database-connection”。)
-
在文本编辑器中处理导出的代码。
-
返回 React Studio 进行一些设计更改。
-
从 React Studio 导出。此时您会收到有关本地修改的警告,因此选择_“Stash, export & commit”。_
现在您的手动代码更改仍保留在分支 “john-doe-changes” 中,而来自 React Studio 的最新更改位于分支 “reactstudio” 中。要继续手动编辑,请切换回 “john-doe-changes” 分支,执行“git stash pop”以恢复您的修改,然后使用“git merge”从 “reactstudio” 分支中提取更改.
这样,版本控制更改历史就很清楚了:来自 React Studio 的所有内容始终位于 “reactstudio” 分支中,并且任何手动更改都已合并到它们自己的分支中。合并点在 git 历史记录中清晰可见,因此很明显哪一行代码来自 React Studio,哪一行来自程序员。
这就像在您的团队中增加了一个开发人员 — 负责设置 UI 的所有无聊样板工作!
插件编辑器
新的集成插件编辑器窗口本质上是一个最小的 JavaScript IDE,它向您显示插件中包含的文件。更容易修改和测试你的插件!
在插件菜单中找到它:
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*fQ89KoNUGvPBNBRuDQvgEg.png&wu003d828&qu003d75 1x, /_next/ image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*fQ89KoNUGvPBNBRuDQvgEg.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn .hackernoon.com%2Fhn-images%2F1*fQ89KoNUGvPBNBRuDQvgEg.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left:0;bottom:0 ;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100% ;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
点击插件 -> 显示插件管理器
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*jFO0cRrSdU-vS-RSzuPc6g.png&wu003d828&qu003d75 1x, /_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*jFO0cRrSdU-vS-RSzuPc6g.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?url u003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*jFO0cRrSdU-vS-RSzuPc6g.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute ;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min -width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
选择插件并点击“编辑”
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*JMbuYfjOYu24PYjtYQrc9A.png&wu003d828&qu003d75 1x, /_next/ image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*JMbuYfjOYu24PYjtYQrc9A.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn .hackernoon.com%2Fhn-images%2F1*JMbuYfjOYu24PYjtYQrc9A.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left:0;bottom:0 ;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100% ;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
直接在编辑器视图中修改插件并重新加载代码
创建插件
为了让您更快地开始使用插件,我们添加了这个命令,让您可以选择一个合适的模板,其中已经包含了很多功能。
在插件菜单中,选择_“创建新插件”_,您将可以选择名称和类型:
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*JyDSfPMGie9lAAFoajOAUg.png&wu003d828&qu003d75 1x, /_next/ image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*JyDSfPMGie9lAAFoajOAUg.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn .hackernoon.com%2Fhn-images%2F1*JyDSfPMGie9lAAFoajOAUg.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left:0;bottom:0 ;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100% ;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
插件模板包含一个带有所有可用控件(复选框、输入字段等)的起点 UI,因此您只需复制粘贴提供的示例即可轻松制作插件的控件 UI。
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*IQGkyZriCCiFEtVGblTpFA.png&wu003d828&qu003d75 1x, /_next/ image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*IQGkyZriCCiFEtVGblTpFA.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn .hackernoon.com%2Fhn-images%2F1*IQGkyZriCCiFEtVGblTpFA.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left:0;bottom:0 ;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100% ;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
_“改变组件状态”_交互
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*wRiHreal_zHuTw2mppH7rQ.png&wu003d750&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*wRiHreal_zHuTw2mppH7rQ.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*wRiHreal_zHuTw2mppH7rQ.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">
可视化创建的组件状态是 React Studio 的一个强大功能。为了使它们更有用,我们添加了一种交互类型,允许您通过单击按钮来修改组件的状态。
在即将发布的版本中,我们将扩展它以让您对组件状态进行更多操作,例如从组件本身内部使用它们,并将状态交互连接到状态管理插件(想想 Redux、Mobx 等)
新示例项目“星座”
该项目演示了如何使用组件状态(包括上面讨论的“更改组件状态”交互)。
它看起来像这样:每日星座运势演示
您可以在“文件”菜单 > “从模板新建” 中找到该项目
<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*hTA9mPTb-dyQx1B-dyzSmQ.png&wu003d828&qu003d75 1x, /_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*hTA9mPTb-dyQx1B-dyzSmQ.png&wu003d1920&qu003d75 2x" srcu003d"/_next/image?url u003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*hTA9mPTb-dyQx1B-dyzSmQ.png&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute ;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min -width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">
更新了按钮样式
按钮的默认样式现在与 Material Design 外观相匹配:较小的文本以大写形式显示。我们使用MUI作为导出项目的 UI 框架,因此按钮的样式来自那里。 (请注意,您很快就可以切换到另一个 UI 框架 — 我们一直希望 React Studio 的这部分导出和渲染能够被插件轻松修改。)
您始终可以将按钮样式覆盖为其他样式。如果您不希望按钮具有大写文本,可以在 App 样式下使用新设置 “按钮的大写文本”(单击项目地图中的 App 块。
插件商店
我们为插件商店制定了宏伟的计划 — 如此之大,足以保证有自己的博客文章!但老实说,它是从小事开始的。您可以在工具栏和插件菜单中找到它。
插件具有一键式安装系统。它们在 React Studio 中立即可用。它们还可以包括一个 PDF 手册和示例项目,展示如何使用该插件。还有一个自动更新系统:当你拥有的插件被作者更新时,你会在 React Studio 中收到通知。
您也可以向商店提交自己的插件和组件 并获得报酬。要提交编码插件,请在 React Studio 中打开插件编辑器,然后单击“提交到商店”。
您不必成为程序员也可以制作插件,因为 React Studio 的组件预设也可以在 Store 上分发。要提交组件预设,请在“Your Presets”列表中右键单击它并选择“Submit To Store”。
新的插件商店是更大的一部分。作为免费使用 React Studio 的一部分,我们加入了软件包交换 (SPX)。您可以在他们的网站 (https://spx.exchange) 上阅读有关 SPX 的更多信息。简而言之,它是一个基于加密令牌的市场,使用 React Studio 等低代码和无代码工具的用户可以共享和发现打包的插件。该令牌称为 PackageCoin (PKC)。在 React Studio 插件商店进行的任何购买都在 PKC 中执行。
这样,您为 React Studio 制作的插件会变得更有价值。当您在 React Studio 插件商店上发布插件或组件预设时,它也可以与任何其他加入 SPX 生态系统的商店共享。作为一名 SPX 包开发人员,您将在 PKC 令牌中方便且自动地获得报酬:首先,一旦您的插件被审查和接受,作为固定金额的赏金,然后从插件商店下载多次(您以 PKC 设定价格)。
SPX 公司正准备在今年年底前进行重大发布。目前,React Studio 是 PackageCoin 的试验场。目前,PKC 代币只能通过 React Studio 插件商店获得......但在 SPX 推出后,您将能够将 PKC 代币从您的 React Studio 帐户转移到全球区块链中。感兴趣的?查看SPX 网站。
下一步是什么?
我们希望很快实现的路线图中的一些项目:
-
UI 框架插件。让你用 Bootstrap、Zurb Foundation 或任何你喜欢的东西替换 mui.css。
-
状态管理插件。将您的交互连接到 Redux、Mobx 或任何您喜欢的东西。
-
本地化。对于现实世界的 Web 应用程序来说,这是一个很大的实际问题,我们通过 React Studio 中的数据表制定了核心解决方案。
...但也许你有其他想法?您认为还有其他优先事项吗?联系[电子邮件保护],我们正在倾听!
React社区为您提供最前沿的新闻资讯和知识内容
更多推荐
0
0- 0
已为社区贡献29247条内容
所有评论(0)