你想加速你的 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 代碼的幾個簡單步驟，以及上面提到的其他功能。
歡迎關注陸神，一起學Web前端、一起成長！
