又有一個(gè)開源工具發(fā)布了，這次是一個(gè)使用 React 生成設(shè)計(jì)稿的工具。

基本的

它利用開放的API接口，按照接口邏輯輸入用React編寫的組件，這樣就可以通過代碼來管理設(shè)計(jì)稿了。

曾經(jīng)嘗試玩玩API接口，結(jié)果發(fā)現(xiàn)連官方文檔里的例子都跑不起來……目前的API接口還不夠穩(wěn)定，還在調(diào)整中，相關(guān)參考資料也很少，還要看一些著名插件的源碼，所以開發(fā)一套自動(dòng)生成設(shè)計(jì)規(guī)范的想法就半途而廢了。

我的微信公眾號(hào)里有一篇關(guān)于插件開發(fā)的文章，等我把開放接口研究透徹了之后會(huì)更新的。

回到react-.appsketch軟件，這是一次使用代碼作為設(shè)計(jì)語(yǔ)言進(jìn)行設(shè)計(jì)稿版本管理的嘗試。

閑暇之余看了一下官方文檔，有了一些看法，下面就來談?wù)剅eact-.app能做什么吧。

1.官方示例

可以建立組件庫(kù)，設(shè)計(jì)人員日后需要時(shí)可以直接調(diào)用，也方便迭代，修改一個(gè)部分，其他應(yīng)用的組件也會(huì)同時(shí)修改，大大減少了工作量。

使用代碼進(jìn)行版本控制，用代碼來描述設(shè)計(jì)，可以避免基于鏡像設(shè)計(jì)的版本管理困難的問題sketch軟件，設(shè)計(jì)師可以使用git等工具來組織設(shè)計(jì)體系。

順便介紹一下版本控制（）

版本控制用于跟蹤文件的變化。

為什么需要版本控制？簡(jiǎn)單來說，當(dāng)你犯了錯(cuò)誤的時(shí)候，你可以輕松地回到犯錯(cuò)之前的狀態(tài)。

你可能已經(jīng)在不知不覺中設(shè)置了自己的版本控制系統(tǒng)。例如，你可能創(chuàng)建了如下文件名：

*06.doc

*07.doc

*-logo3.png

*-logo4.png

*徽標(biāo)-舊.png

什么是版本控制系統(tǒng)？

通過文件名識(shí)別版本對(duì)于小型項(xiàng)目或單個(gè)文件來說可能可行，但不適合軟件開發(fā)。

你能想象如果操作系統(tǒng)的源文件是在一個(gè)名為“--!!”的共享目錄中開發(fā)的，并且每個(gè)程序員都可以編輯它，并擁有自己的子目錄，會(huì)發(fā)生什么嗎？那么就不可能制造了。

大型、頻繁修改且由多名作者編寫的軟件項(xiàng)目需要版本控制系統(tǒng) (VCS，行話中的“文件數(shù)據(jù)庫(kù)”) 來跟蹤文件更改并避免混淆。良好的 VCS 應(yīng)做到以下幾點(diǎn)：

備份還原（）

對(duì)文件的每個(gè)編輯都會(huì)被保存并可以恢復(fù)到任何日期。

同步()

允許不同的用戶隨時(shí)獲取文件的最新版本。

短期撤銷

如果文件弄亂了怎么辦？撤消編輯并返回上一個(gè)無錯(cuò)誤的版本。

跟蹤變化

每次編輯文件時(shí)，您都可以寫一條注釋來解釋編輯的原因。

測(cè)試函數(shù)()

當(dāng)你對(duì)文件進(jìn)行較大的修改時(shí)，可以將編輯的內(nèi)容暫時(shí)保存在單獨(dú)的區(qū)域，繼續(xù)測(cè)試調(diào)試，確認(rèn)無誤后再添加到主版本中。

() 和 merge()

分支函數(shù)可以看作是一個(gè)更大的測(cè)試版本。你可以復(fù)制整個(gè)代碼，給它一個(gè)單獨(dú)的名字，跟蹤它的更改，并將其與原始版本斷開連接。這稱為分支。稍后，你可以將分支版本合并到原始版本中，這稱為合并。

以上摘自阮一峰博客，略有刪減。

2.官方示例

可直接生成設(shè)計(jì)規(guī)范，

官方的版本只有簡(jiǎn)單的顏色和字體設(shè)計(jì)規(guī)范，其他暫時(shí)沒有。有時(shí)間再開發(fā)一套完整的可以自動(dòng)標(biāo)注頁(yè)面元素和組件并生成文檔的。

并進(jìn)行響應(yīng)式設(shè)計(jì)；

React 提供了功能齊全的布局系統(tǒng)，可以在設(shè)計(jì)端實(shí)現(xiàn)精準(zhǔn)完整的響應(yīng)式設(shè)計(jì)。采用的是 flex 布局，F(xiàn)lex 是 Box 的縮寫，意思就是“靈活布局”。

通過賦予div比例，設(shè)置排列、對(duì)齊方式，可以達(dá)到響應(yīng)式設(shè)計(jì)的目的。

更多詳情請(qǐng)?jiān)L問阮一峰博客

（響應(yīng)式設(shè)計(jì)）：

制作網(wǎng)頁(yè)，利用-Based(基于內(nèi)容的斷點(diǎn))等技術(shù)來改變網(wǎng)頁(yè)的大小，以適應(yīng)不同分辨率的屏幕。

（自適應(yīng)設(shè)計(jì)）：

針對(duì)不同類型的設(shè)備創(chuàng)建不同的網(wǎng)頁(yè)，檢測(cè)設(shè)備分辨率后調(diào)用相應(yīng)網(wǎng)頁(yè)，目前AWD網(wǎng)頁(yè)主要針對(duì)以下分辨率（320、480、760、960、1200、1600）

響應(yīng)式設(shè)計(jì)只需要一套代碼，減少了針對(duì)自適應(yīng)設(shè)計(jì)不同分辨率編寫不同代碼的工作量。

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

調(diào)用API，根據(jù)真實(shí)數(shù)據(jù)進(jìn)行設(shè)計(jì)；

就像任何前端開發(fā)一樣，您可以引入真實(shí)數(shù)據(jù)和 API 來實(shí)現(xiàn)有趣的功能，例如實(shí)時(shí)地圖和自動(dòng)多語(yǔ)言。

我們?cè)谠O(shè)計(jì)的時(shí)候就考慮真實(shí)數(shù)據(jù)的展示效果，讓設(shè)計(jì)更加接地氣，避免設(shè)計(jì)稿很漂亮，但實(shí)際產(chǎn)品開發(fā)出來之后效果卻大打折扣。

以上就是根據(jù)官方的幾個(gè)例子對(duì)react.app的優(yōu)點(diǎn)的總結(jié)。

還有一點(diǎn)需要單獨(dú)注意：

實(shí)時(shí)預(yù)覽

這對(duì)于程序員來說意義更大，因?yàn)橛胷eact編寫的前端代碼可以實(shí)時(shí)預(yù)覽，非常直觀。

事實(shí)上，實(shí)時(shí)預(yù)覽并不是什么新鮮事。

網(wǎng)頁(yè)版有：

在線JS代碼調(diào)試工具產(chǎn)品支持CSS和HTML代碼可視化在線調(diào)試工具。

我給大家介紹3個(gè)網(wǎng)站，有興趣的話可以去看看。

它對(duì)于練習(xí)和學(xué)習(xí)以及調(diào)試一些小代碼非常有用。

反應(yīng)

移動(dòng)版本包括：

React 開發(fā)即時(shí)預(yù)覽和分享工具。推薦一個(gè)：

博覽會(huì)

React 入門和快速開發(fā)必備！

另一類是IDE編輯器。

官方推薦Atom+

我用過 Text，但因?yàn)椴缓每矗头艞壛?，換成了 Atom。最近突然發(fā)現(xiàn)還有一個(gè)

IDE裝飾

Deco 是一款專為

功能：實(shí)時(shí)預(yù)覽、屬性值可視化調(diào)整、代碼庫(kù)模板

目前只有Mac版本，如果你正好在學(xué)習(xí)React，可以嘗試一下。

對(duì)了，deco IDE是開源的，可以研究一下它的實(shí)現(xiàn)代碼，利用調(diào)用的系統(tǒng)級(jí)API然后和react結(jié)合起來實(shí)現(xiàn)編輯器。

最關(guān)鍵的是，它是開源的！如果不滿意，可以自行修改~

設(shè)計(jì)+技術(shù)=

自在園O 混合技術(shù)實(shí)驗(yàn)室。

如有侵權(quán)請(qǐng)聯(lián)系刪除！