你想加速你的 React.js 應(yīng)用程序開(kāi)發(fā)嗎?正是通過(guò)自動(dòng)將你的設(shè)計(jì)轉(zhuǎn)換為 React 組件!

　　如果是，DhiWise Web 應(yīng)用程序構(gòu)建器可以節(jié)省一些寶貴的時(shí)間，否則你可以用它來(lái)開(kāi)發(fā)關(guān)鍵的應(yīng)用程序功能。上面提到的 Web 應(yīng)用程序構(gòu)建器可以從你的 Figma 設(shè)計(jì)中快速生成可用于生產(chǎn)的代碼。重要的是它遵循可視化編程的精神。

　　在本文中，我們將了解 DhiWise 如何幫助你獲得可用于生產(chǎn)的前端應(yīng)用程序，以及頁(yè)面導(dǎo)航和 API 集成等功能。

　　在此之前，我們先簡(jiǎn)單介紹一下 Figma 和 React。

　　Figma

　　Figma 是一個(gè)流行的基于 Web 的矢量圖形編輯器和原型設(shè)計(jì)&UI設(shè)計(jì)工具。它支持 macOS 和 Windows 桌面應(yīng)用程序，也可以在線(xiàn)進(jìn)行編輯。

　　它允許移動(dòng)用戶(hù)使用 Figma 鏡像應(yīng)用程序?qū)崟r(shí)查看 Figma 原型——適用于 Android 和 iOS。此外，它還使設(shè)計(jì)人員和開(kāi)發(fā)人員能夠?yàn)?Web 和移動(dòng)應(yīng)用程序創(chuàng)建 UI 和線(xiàn)框圖。

　　React.js

　　React 是一個(gè)免費(fèi)的開(kāi)源前端 JavaScript 庫(kù)，用于構(gòu)建基于 UI 組件的用戶(hù)界面。它由 Meta 和一個(gè)由個(gè)人開(kāi)發(fā)人員&公司組成的社區(qū)維護(hù)。

　　React 用于構(gòu)建單頁(yè)應(yīng)用程序，它允許我們創(chuàng)建可重用的 UI 組件。

　　為了在你的代碼中獲得 80% 以上的設(shè)計(jì)準(zhǔn)確度，請(qǐng)?jiān)谠O(shè)計(jì) Figma 時(shí)遵循這些設(shè)計(jì)指南。

　　讓我們更深入地研究它。

　　第 1 步：登錄 DhiWise

　　首先，需要使用你的 Google 或 GitHub 帳戶(hù)注冊(cè)/進(jìn)入 DhiWise。

　　第 2 步：創(chuàng)建一個(gè)新應(yīng)用程序

　　完成后，將被定向到儀表板，可以在其中搜索和查看以前創(chuàng)建的應(yīng)用程序。要開(kāi)始構(gòu)建新應(yīng)用程序，只需單擊新建應(yīng)用程序，它將創(chuàng)建新應(yīng)用程序頁(yè)面。

　　第 3 步：選擇 React 作為創(chuàng)建應(yīng)用程序的技術(shù)

　　是的，就是這樣。就像選擇冰淇淋口味一樣簡(jiǎn)單。

　　第 4 步：連接你的 Figma 帳戶(hù)并導(dǎo)入 Figma

　　接下來(lái)，將你的設(shè)計(jì)從 Figma、XD 或 Sketch 導(dǎo)入 DhiWise。如果你沒(méi)有任何現(xiàn)成的設(shè)計(jì)，DhiWise 提供現(xiàn)成的應(yīng)用程序模板和屏幕庫(kù)。

　　要導(dǎo)入應(yīng)用程序設(shè)計(jì)，請(qǐng)選擇設(shè)計(jì)應(yīng)用程序的平臺(tái)。輸入應(yīng)用程序名稱(chēng)并選擇 Figma。要將 Figma 文件導(dǎo)入 DhiWise，你需要將 Figma 帳戶(hù)與 DhiWise 集成。

　　你始終可以從其他提到的平臺(tái)遷移設(shè)計(jì)，但為此，你可能需要提出請(qǐng)求并在 24-48 小時(shí)內(nèi)讓 DhiWise 為你處理相同的問(wèn)題。

　　第 5 步：選擇頁(yè)面

　　接下來(lái)，你可以從 Figma 文件中選擇多個(gè)頁(yè)面并在應(yīng)用程序中使用它們，如圖所示。請(qǐng)記住，如果你已經(jīng)為你的頁(yè)面設(shè)置了原型，那么，你的工作就差不多完成了一半。

　　原因：DhiWise 自動(dòng)獲取頁(yè)面資源，包括導(dǎo)航。而且你無(wú)需再次處理單獨(dú)的導(dǎo)航和其他配置。

　　第 6 步：定制

　　頁(yè)面導(dǎo)入后，你可以直接從此處更改視圖。如果有任何錯(cuò)誤識(shí)別的 Figma 元素，此功能將覆蓋(這種情況的可能性很小)。

　　此外，還可以將來(lái)自 REST API 的實(shí)時(shí)數(shù)據(jù)綁定到你的頁(yè)面。

　　第 7 步：生成源代碼

　　自定義完成后，單擊“構(gòu)建”以在幾分鐘內(nèi)獲取包含所有自定義的結(jié)構(gòu)化源代碼。

　　第 8 步：下載/同步您的代碼到 GitHub/GitLab

　　構(gòu)建應(yīng)用程序后，可以從 DhiWise 下載整個(gè)源代碼和/或?qū)⑵渑c你的 GitHub 或 GitLab 存儲(chǔ)庫(kù)同步。

　　如果你在 DhiWise 應(yīng)用程序中進(jìn)行了更多更改并且希望在應(yīng)用程序中更新代碼，你可以使用 VSCode Extension 將最新代碼直接獲取到你的 Vscode 中。

　　其他補(bǔ)充內(nèi)容

　　DhiWise 有兩個(gè)很棒的功能可以讓開(kāi)發(fā)生活更加精彩——同時(shí)使用 DhiWise。

　　第一，可以通過(guò)單擊將應(yīng)用程序部署到 Vercel 來(lái)查看應(yīng)用程序的原型!

　　其次，可以使用 Figma 中的 Figma to Code 插件在幾分鐘內(nèi)獲得代碼。

　　簡(jiǎn)而言之…

　　這些只是將 Figma 設(shè)計(jì)轉(zhuǎn)換為 React 代碼的幾個(gè)簡(jiǎn)單步驟，以及上面提到的其他功能。