Webflow 將編碼的力量放入視覺介面,有效地創建了一種以類似於 Photoshop 的自定義 UI,視覺化開發現代網站的方式,利用 HTML、CSS 和 Javascript 的力量。該平台被超過一百萬的設計師/開發者用來設計具有最小到無需編碼的現代網體驗。Webflow 有一個透過 Webflow 大學 精心策劃的教程,以及在 YouTube、博客等地方可以找到的設計師和開發者的支持社區。
什麼是 DevLink?
DevLink (Beta) 是來自 Webflow 的新功能,它提供設計師/開發者能夠使用在 Webflow 中建立和維護的組件,並與 Next.js 和 React 一同使用。DevLink 目前處於開放 Beta 狀態。如果你熟悉在 Webflow 中構建,就像我一樣,能夠在平台中為 React 構建自定義組件是一個令人興奮的發展。
要訪問 DevLink,請在此處註冊一個 Webflow 帳戶電郵地址。
將你的 Webflow DevLink 連接至 React
-
在 Webflow 中構建組件。務必確保哪些元素是被支援的。表單提交通知、CMS、電子商務、會員和邏輯目前都不受 DevLink 的支援。 很快就會有示例!
-
設立一個 Next.js 項目,如果從頭開始。Next.js 是一個 React 框架。
-
在你的終端機運行:
npm install react react-dom next
檢查你的 package.json 檔案,現在看到: next、react 和 react-dom 是依賴項 -
這個指令也會建立一個包含這些依賴檔案的 node_modules 資料夾
-
設置組件屬性。 對於需要巢狀或 javascript 的更複雜的組件,設置插槽或運行時道具。 很快就會有示例!
-
將 Webflow 項目連接到一個 React 項目。從 Webflow Designer 複製 DevLink 配置,並粘貼到你的 React 項目中。 很快就會有示例!