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