react ui interactions Download - react ui interactions Code source Télécharger

react ui interactions

Composants tiers

1.0.0

Télécharger

Inspirations d'interface utilisateur pour réagir

Interactions de réaction d'interface utilisateur

Une collection de concepts d'interface utilisateur emballés dans un ensemble de petits projets de réaction. L'idée derrière est de tirer parti des dernières pratiques communautaires pour fournir des modèles utiles pour votre projet du monde réel. En présentant des éléments d'interface utilisateur spécifiques, vous apprendrez des solutions de base et avancées couvrant: animations et transitions, micro-interactions, réactivité, navigation, récupération des données, manipulation de l'État .

Motivation

La création d'application Web nécessite de résoudre de nombreux problèmes d'interface utilisateur. Il y a une tonne de bibliothèques qui aident à résoudre un cas prticulaire, mais très souvent, vous trouvez votre propre solution. Dans ce cas, ce référentiel vous permet de découvrir des modèles utiles pour les défis typiques tout en travaillant sur les interfaces utilisateur. Comme vous l'avez probablement remarqué, le projet est écrit en réact. Je me sens juste à l'aise de l'utiliser. Cependant, je pense que les solutions présentées ici peuvent être utilisées avec succès dans d'autres cadres basés sur des composants.

Principes

Direct - embrasse le code explicite et colocalisé qui est facile à supprimer et à passer d'un endroit à un autre. Il s'agit d'une optimisation pour le changement car le changement est la chose qui finira par se produire. Le code est direct et spécifique, ce qui facilite la copie et l'adaptation de vos besoins.
? Simple - la seule façon de réaliser la flexibilité est de rendre les choses aussi simples et faciles à changer que possible. Suivre la montée de "Pire est mieux"
La conception doit être simple, à la fois dans l'implémentation et l'interface. Il est plus important que l'interface soit simple que l'implémentation.
? Pas de classes - seulement des composants fonctionnels.
❣️ Crochets - utilise des crochets tout le long (disponible à partir de React 16.7.0-alpha).
? Splipting de code - utilise React.lazy avec import() et laissez le webpack faire le travail.
⏱️ Suspense - réagir le suspense pour le fractionnement du code.
? CSS-in-JS - Il est basé sur des composants stylisés pour l'apparence et la sensation.
? Promouvoir les valeurs par défaut - le moins de configuration possible. Utilise des valeurs par défaut où qu'elle le puisse.

Comment utiliser

Copiez et collez tout ce dont vous avez besoin.
Être inspiré. Trouvez une solution d'interface utilisateur que vous aimez et adaptez-la à votre environnement.

Dépendances

Il est important de noter que certaines tâches de bas niveau ont encore besoin d'une bibliothèque pour permettre de se concentrer sur des aspects plus importants. Toutes les dépendances de ce projet ont été choisies très attentivement en considérant les principes mentionnés précédemment.

Reach Router car il est à la main, composable et fait directement ce qu'il devrait. Rien de plus.
Styled Components simplement CSS en JS avec une excellente documentation. Pourquoi pas emotion ? Je ne sais pas. S'il y a une raison pour laquelle je devrais savoir, faites-le moi savoir!
React Spring car l'interface utilisateur moderne est souvent construite sur des animations significatives, tout ce qui encourage les utiliser est génial. La bibliothèque propose récemment une belle API Hooks qui joue directement avec le DOM pour de meilleures performances.