你想加速你的 React.js 應用程序開發嗎?正是通過自動將你的設計轉換為 React 組件!

　　如果是，DhiWise Web 應用程序構建器可以節省一些寶貴的時間，否則你可以用它來開發關鍵的應用程序功能。上面提到的 Web 應用程序構建器可以從你的 Figma 設計中快速生成可用于生產的代碼。重要的是它遵循可視化編程的精神。

　　在本文中，我們將了解 DhiWise 如何幫助你獲得可用于生產的前端應用程序，以及頁面導航和 API 集成等功能。

　　在此之前，我們先簡單介紹一下 Figma 和 React。

　　Figma

　　Figma 是一個流行的基于 Web 的矢量圖形編輯器和原型設計&UI設計工具。它支持 macOS 和 Windows 桌面應用程序，也可以在線進行編輯。

　　它允許移動用戶使用 Figma 鏡像應用程序實時查看 Figma 原型——適用于 Android 和 iOS。此外，它還使設計人員和開發人員能夠為 Web 和移動應用程序創建 UI 和線框圖。

　　React.js

　　React 是一個免費的開源前端 JavaScript 庫，用于構建基于 UI 組件的用戶界面。它由 Meta 和一個由個人開發人員&公司組成的社區維護。

　　React 用于構建單頁應用程序，它允許我們創建可重用的 UI 組件。

　　為了在你的代碼中獲得 80% 以上的設計準確度，請在設計 Figma 時遵循這些設計指南。

　　讓我們更深入地研究它。

　　第 1 步：登錄 DhiWise

　　首先，需要使用你的 Google 或 GitHub 帳戶注冊/進入 DhiWise。

　　第 2 步：創建一個新應用程序

　　完成后，將被定向到儀表板，可以在其中搜索和查看以前創建的應用程序。要開始構建新應用程序，只需單擊新建應用程序，它將創建新應用程序頁面。

　　第 3 步：選擇 React 作為創建應用程序的技術

　　是的，就是這樣。就像選擇冰淇淋口味一樣簡單。

　　第 4 步：連接你的 Figma 帳戶并導入 Figma

　　接下來，將你的設計從 Figma、XD 或 Sketch 導入 DhiWise。如果你沒有任何現成的設計，DhiWise 提供現成的應用程序模板和屏幕庫。

　　要導入應用程序設計，請選擇設計應用程序的平臺。輸入應用程序名稱并選擇 Figma。要將 Figma 文件導入 DhiWise，你需要將 Figma 帳戶與 DhiWise 集成。

　　你始終可以從其他提到的平臺遷移設計，但為此，你可能需要提出請求并在 24-48 小時內讓 DhiWise 為你處理相同的問題。

　　第 5 步：選擇頁面

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

　　原因：DhiWise 自動獲取頁面資源，包括導航。而且你無需再次處理單獨的導航和其他配置。

　　第 6 步：定制

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

　　此外，還可以將來自 REST API 的實時數據綁定到你的頁面。

　　第 7 步：生成源代碼

　　自定義完成后，單擊“構建”以在幾分鐘內獲取包含所有自定義的結構化源代碼。

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

　　構建應用程序后，可以從 DhiWise 下載整個源代碼和/或將其與你的 GitHub 或 GitLab 存儲庫同步。

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

　　其他補充內容

　　DhiWise 有兩個很棒的功能可以讓開發生活更加精彩——同時使用 DhiWise。

　　第一，可以通過單擊將應用程序部署到 Vercel 來查看應用程序的原型!

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

　　簡而言之…

　　這些只是將 Figma 設計轉換為 React 代碼的幾個簡單步驟，以及上面提到的其他功能。