react ui interactions

UI React的靈感

反應UI相互作用

一組UI概念包裝成一組小型React項目。背後的想法是利用最新的社區實踐為您的現實世界項目提供有用的模式。通過展示特定的UI元素，您將學習基本和高級解決方案涵蓋：動畫和過渡，微接個性，響應能力，導航，數據獲取，狀態操作。

動機

構建Web應用程序需要解決許多UI問題。有大量圖書館有助於解決一個案例，但您常常會提出自己的解決方案。在這種情況下，此存儲庫使您可以在處理用戶界面時發現有用的模式。您可能已經註意到，項目是用React編寫的。我只是很舒服使用它。但是，我認為這裡提供的解決方案可以成功地用於其他基於組件的框架中。

原則

• 直接- 包含易於刪除並從一個地方移至另一個地方的明確和共同確定的代碼。這是對變化的優化，因為變化是最終會發生的事情。該代碼是直接的，具體的，可以輕鬆複製和適應您的需求。
• ？簡單- 實現靈活性的唯一方法是使事物盡可能易於改變。跟隨“惡化更好”的興起

  在實現和接口中，設計必須很簡單。對於界面而言，比實現更重要。

• ？沒有類- 僅功能組件。
• ❣️鉤- 一直使用鉤子（如16.7.0 -alpha的反應可用）。
• ？代碼拆分- 將React.lazy與import()一起使用，然後讓WebPack完成工作。
• ⏱️懸念- 反應懸念代碼分裂。
• ？ CSS-In-JS-它基於樣式的組件，以進行外觀和感覺。
• ？促進默認值- 盡可能少的配置。在任何可能的地方使用默認值。

如何使用

• 只需複制並粘貼您需要的任何內容即可。
• 受到啟發。找到您喜歡的UI解決方案，並將其調整到您的環境中。

依賴性

重要的是要注意，一些低級任務仍然需要庫以允許專注於更重要的方面。考慮到前面提到的原則，該項目中的所有依賴項都非常仔細地選擇。

• Reach Router ，因為它是直截了當的，可組合的，並且直接做應該做的。而已。
• Styled Components僅在JS中具有出色的文檔。為什麼不emotion ？我不知道。如果有我應該知道的原因，請告訴我！
• React Spring是因為現代UI通常是建立在有意義的動畫上的，因此鼓勵使用它們的一切都很棒。庫最近提供了一個不錯的掛鉤API，可以直接與DOM一起播放，以提高性能。

合法的

MIT許可證版權所有©2019-PRESENT，MIKE SKOWRONEK