再一次发布了一款开源工具，此次是一个借助于 react 去生成设计稿的工具。

基本原理

在利用开放的api接口时，将按照接口逻辑输入由react所写的组件，如此一来，借助代码便能够对设计稿予以管理了。

我曾试着弄过玩耍的api接口，然而却发觉就连官方文档里的示例都没法运行起来。当下的api接口还不够稳定，仍是处于调整之中。与之相关的参考资料特别少，得特意去瞅一些著名插件的源码，于是原本打算基于此开发一套自动生成设计规范的想法就中途放弃咯。

存在一篇关于给开发插件的文章，它躺在我的微信公众号里，等把开放接口研究透彻之后，再去进行更新哈。

来到 react-.app，这是一回以代码当作设计语言，用来进行设计稿版本管理的试验。

趁我空闲之时，我将官方文档浏览了一回，拥有了一些看法。接下来要谈论的是，react-.app能够达成什么样的事情呢?

1、官方示例

能够构建出组件库，如此往后当设计师有使用需求时，能够直接进行调用，而且迭代环节也变得便利起来，一旦修改其中一处，那些其他被套用的组件也会一同被修改，极大程度地削减了工作量。

依靠代码来实施版本控制，借助代码去描述设计，从而避开了基于图片设计时版本管理所存在的难点，在此情形下，设计师能够运用git等工具去组织设计系统。

顺便介绍下版本控制（ ）

版本控制，作用是追踪文件的变化。

为什要进行版本控制呢？简而言之，就是在你出现错误的状况下，能够轻松便捷易如反掌地回归到尚未出现错误之时的状态。

或许你有可能在毫无知觉的状况之下，布置了自家的版本控制系统，譬喻创建了像下面这般模样的文件名：

*06.doc

*07.doc

*-logo3.png

*-logo4.png

* logo-old.png

什么是版本控制系统？

凭借文件名去识别版本，就小型项目而言，或者针对单个文件来讲，也许是可行的。然而，对于软件开发这个范畴来说，却是不适用的。

你能够想象吗，倘若操作系统的源文件，是于一个名为“--!!”的共享目录里进行开发的，而且每个程序员均可编辑，都拥有一个属于自己的子目录，那将会出现什么状况呢？如此一来，那就根本无法被制造出来。

针对大型的软件项目，且是频繁修改的那种，还是多人编写的情况，其需要一个版本控制系统，简称为VCS，行话称作“文件数据库”，它能够追踪文件的变化，以此避免出现混乱。一个好的VCS应当做到以下几点：

备份（）和恢复（）

文件的每一次编辑都得到保存，可以恢复到任意一个日期。

同步（）

让不同用户随时都能得到文件的最新版本。

撤销（Short-term undo）

你把文件弄乱了，这可如何是好呢？那就去撤销编辑，返回到距离当前最近的那一回没有差错的版本。

追踪修改（Track ）

文件的每一次编辑，你都可以写下注解，解释编辑的原因。

试验功能（）

当你针对文件实施重大变更之际，你能够将编辑内容暂且保存在一个单独的区域，持续开展测试以及除错工作。待确认无误之后，再添加入主版本。

分支（）和合并（）

视为一个更大测试版本是分支功能，另起独立名字，追踪其变化，与原版本脱离关系，这是分支，你要对整个代码做一份拷贝，之后，将分支版本再并入源版本，这是合并。

以上引自阮一峰的博客，做了点精简。

2、官方示例

可以直接生成设计规范，

官方有的仅仅是一个经由简单处理的颜色以及字体方面的设计规范，除此之外暂时不存在别的，探究一番我是否具备相应时间去研发出一整套完整的内容，在此套完整内容里要将页面的元素、组件也进行自动标注，而且要生成相关文档。

和进行响应式设计；

React给出了功能齐全且完善的布局体系，能够于设计端开展精确又完整的响应式设计，其所运用的乃是flex布局，Flex是Box的简略写法，意思是“弹性布局”。

能够借助赋予div比例，去设置排列方式，实行安排排列之事，再设置对齐模式，开展对齐动作，于是达成响应式设计的目的。

详情可以查看阮一峰的博客

http://www..com/blog/2015/07/flex-.html?=

(响应式设计)：

打造一个网页，借助CSS Media ，基于内容的断点这类技术，去把网页的大小予以改变，从而适配不同分辨率的屏幕。

(自适应设计)：

建立针对不同类别的设备的不同网页，在检测到设备分辨率大小这事之后，去调用相应的网页。当下，AWD网页主要是针对这几种分辨率：320sketch软件，480，760，960，1200，1600 ，这是目前的情况。

响应式设计，是一种只需一套代码的设计模式，它减少了自适应设计那种，针对不同分辨率去编写不同代码的庞大工作量。

3、在网络上针对带有反应特性的官方示例，以及地图功能，且具备减号样式的相关内容。

调取api,以真实数据来做设计；

可以如同任何前端开发那般，引入真实的数据，以及 API 来实现诸如实时地图、自动多语言等有意思的功能。

进行设计之际，所考量的便是真实数据的呈现效果，要使得设计更具备接近于实际的特质，防止出现设计稿呈现出美观的状态，而在实际产品开发完成之后，效果却大幅降低的情形。

以上是结合几个官方示例，总结的react .app的优点。

还有一点要单独说明的就是：

实时预览

这对程序员所能产生的意义更为重大，缘由是当使用react编写完成前端代码后，能够在其中立即进行实时预览，呈现出的效果极为直观，是这样一种状况，没错吧。

其实，实时预览不是个新鲜事。

web端有:

在线的 JS 代码调试工具所对应的产品，具备支持 css 代码可视化在线调试的能力，同时也支持 html 代码可视化在线调试。

介绍3个网站，有兴趣可以玩玩去。

作为练习跟学习，还有调试一些小代码，还是很好用的。

http://.io/

https://.net/

React

https://.io

移动端有：

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

Expo

https://.expo.io/

入门跟快速开发react 必备啊！

还有一类是IDE编辑器。

官方推荐的 Atom＋

我曾使用过Text，鉴于其颜值欠佳，所以便弃用了它，转而选用atom，然而最近却突然发觉竟然还有个。

IDE Deco

https://www..com/

专门为 打造的开源 IDE Deco

特点：实时预览,可视化调节属性值，代码库模版

当前仅存有Mac版本，要是你刚好处于学习react的阶段，那么能够尝试一下。

话说回来，deco IDE具备开源特性，能够着手探究其实现代码sketch软件，其所采用的方式是，调用系统级别的api，之后再与react相结合，进而得以实现的编辑器。

最关键是开源！用的不爽可以自己改～

设计+科技=

自在园O设计Mix科技实验室。

如有侵权请联系删除！