又有一个开源工具发布了，这次是一个使用 React 生成设计稿的工具。

基本的

它利用开放的API接口，按照接口逻辑输入用React编写的组件，这样就可以通过代码来管理设计稿了。

曾经尝试玩玩API接口，结果发现连官方文档里的例子都跑不起来……目前的API接口还不够稳定，还在调整中，相关参考资料也很少，还要看一些著名插件的源码，所以开发一套自动生成设计规范的想法就半途而废了。

我的微信公众号里有一篇关于插件开发的文章，等我把开放接口研究透彻了之后会更新的。

回到react-.appsketch软件，这是一次使用代码作为设计语言进行设计稿版本管理的尝试。

闲暇之余看了一下官方文档，有了一些看法，下面就来谈谈react-.app能做什么吧。

1.官方示例

可以建立组件库，设计人员日后需要时可以直接调用，也方便迭代，修改一个部分，其他应用的组件也会同时修改，大大减少了工作量。

使用代码进行版本控制，用代码来描述设计，可以避免基于镜像设计的版本管理困难的问题sketch软件，设计师可以使用git等工具来组织设计体系。

顺便介绍一下版本控制（）

版本控制用于跟踪文件的变化。

为什么需要版本控制？简单来说，当你犯了错误的时候，你可以轻松地回到犯错之前的状态。

你可能已经在不知不觉中设置了自己的版本控制系统。例如，你可能创建了如下文件名：

*06.doc

*07.doc

*-logo3.png

*-logo4.png

*徽标-旧.png

什么是版本控制系统？

通过文件名识别版本对于小型项目或单个文件来说可能可行，但不适合软件开发。

你能想象如果操作系统的源文件是在一个名为“--!!”的共享目录中开发的，并且每个程序员都可以编辑它，并拥有自己的子目录，会发生什么吗？那么就不可能制造了。

大型、频繁修改且由多名作者编写的软件项目需要版本控制系统 (VCS，行话中的“文件数据库”) 来跟踪文件更改并避免混淆。良好的 VCS 应做到以下几点：

备份还原（）

对文件的每个编辑都会被保存并可以恢复到任何日期。

同步()

允许不同的用户随时获取文件的最新版本。

短期撤销

如果文件弄乱了怎么办？撤消编辑并返回上一个无错误的版本。

跟踪变化

每次编辑文件时，您都可以写一条注释来解释编辑的原因。

测试函数()

当你对文件进行较大的修改时，可以将编辑的内容暂时保存在单独的区域，继续测试调试，确认无误后再添加到主版本中。

() 和 merge()

分支函数可以看作是一个更大的测试版本。你可以复制整个代码，给它一个单独的名字，跟踪它的更改，并将其与原始版本断开连接。这称为分支。稍后，你可以将分支版本合并到原始版本中，这称为合并。

以上摘自阮一峰博客，略有删减。

2.官方示例

可直接生成设计规范，

官方的版本只有简单的颜色和字体设计规范，其他暂时没有。有时间再开发一套完整的可以自动标注页面元素和组件并生成文档的。

并进行响应式设计；

React 提供了功能齐全的布局系统，可以在设计端实现精准完整的响应式设计。采用的是 flex 布局，Flex 是 Box 的缩写，意思就是“灵活布局”。

通过赋予div比例，设置排列、对齐方式，可以达到响应式设计的目的。

更多详情请访问阮一峰博客

（响应式设计）：

制作网页，利用-Based(基于内容的断点)等技术来改变网页的大小，以适应不同分辨率的屏幕。

（自适应设计）：

针对不同类型的设备创建不同的网页，检测设备分辨率后调用相应网页，目前AWD网页主要针对以下分辨率（320、480、760、960、1200、1600）

响应式设计只需要一套代码，减少了针对自适应设计不同分辨率编写不同代码的工作量。

3. Web + w/ react- 和 Maps 上的官方示例

调用API，根据真实数据进行设计；

就像任何前端开发一样，您可以引入真实数据和 API 来实现有趣的功能，例如实时地图和自动多语言。

我们在设计的时候就考虑真实数据的展示效果，让设计更加接地气，避免设计稿很漂亮，但实际产品开发出来之后效果却大打折扣。

以上就是根据官方的几个例子对react.app的优点的总结。

还有一点需要单独注意：

实时预览

这对于程序员来说意义更大，因为用react编写的前端代码可以实时预览，非常直观。

事实上，实时预览并不是什么新鲜事。

网页版有：

在线JS代码调试工具产品支持CSS和HTML代码可视化在线调试工具。

我给大家介绍3个网站，有兴趣的话可以去看看。

它对于练习和学习以及调试一些小代码非常有用。

反应

移动版本包括：

React 开发即时预览和分享工具。推荐一个：

博览会

React 入门和快速开发必备！

另一类是IDE编辑器。

官方推荐Atom+

我用过 Text，但因为不好看，就放弃了，换成了 Atom。最近突然发现还有一个

IDE装饰

Deco 是一款专为

功能：实时预览、属性值可视化调整、代码库模板

目前只有Mac版本，如果你正好在学习React，可以尝试一下。

对了，deco IDE是开源的，可以研究一下它的实现代码，利用调用的系统级API然后和react结合起来实现编辑器。

最关键的是，它是开源的！如果不满意，可以自行修改~

设计+技术=

自在园O 混合技术实验室。

如有侵权请联系删除！