react ui interactions

UI -Inspirationen für React

Reagieren Sie UI -Wechselwirkungen

Eine Sammlung von UI -Konzepten, die in kleine Reaktionsprojekte gepackt sind. Die Idee dahinter ist, die neuesten Community-Praktiken zu nutzen, um nützliche Muster für Ihr reales Projekt zu liefern. Indem Sie bestimmte UI -Elemente präsentieren, lernen Sie grundlegende und erweiterte Lösungen ab, die abdecken: Animationen und Übergänge, Mikrointeraktionen, Reaktionsfähigkeit, Navigation, Datenabfertigung, Zustandsmanipulation .

Motivation

Das Erstellen von Webanwendungen erfordert die Lösung vieler UI -Probleme. Es gibt eine Menge Bibliotheken, die dazu beitragen, einen prtikulären Fall zu lösen, aber sehr oft haben Sie Ihre eigene Lösung entwickelt. In diesem Fall können Sie mit diesem Repository nützliche Muster für typische Herausforderungen ermitteln, während Sie an Benutzeroberflächen arbeiten. Wie Sie wahrscheinlich bemerkt haben, ist das Projekt in React geschrieben. Ich fühle mich einfach wohl. Ich denke jedoch, dass die hier vorgestellten Lösungen erfolgreich in anderen komponentenbasierten Frameworks verwendet werden können.

Prinzipien

• Direkt - umfasst explizite und co -located Code, der leicht zu löschen und von einem Ort zum anderen zu bewegen ist. Dies ist eine Optimierung für Veränderungen, da die Veränderung die Sache ist, die irgendwann passieren wird. Der Code ist direkt und spezifisch, was es einfach macht, Ihre Anforderungen zu kopieren und anzupassen.
• ? Einfach - die einzige Möglichkeit, Flexibilität zu erreichen, besteht darin, die Dinge so einfach und einfach zu ändern, wie Sie können. Nach dem Aufstieg von "schlechter ist besser"

  Das Design muss sowohl in der Implementierung als auch in der Schnittstelle einfach sein. Es ist wichtiger, dass die Schnittstelle einfach als die Implementierung ist.

• ? Keine Klassen - nur funktionale Komponenten.
• ❣️ Haken - Verwendet Hooks den ganzen Weg (verfügbar als React 16.7.0 -Alpha).
• ? CODE -Spliting - verwendet React.lazy zusammen mit import() und lassen Sie den Webpack den Job machen.
• ⏱️ Spannung - Spannung für die Codespaltung reagieren.
• ? CSS-in-JS -Es basiert auf gestalteten Komponenten für das Erscheinungsbild.
• ? Fördern Sie Standardeinstellungen - so wenig Konfiguration wie möglich. Verwendet Standards, wo immer es kann.

Wie man benutzt

• Kopieren Sie einfach und fügen Sie alles ein, was Sie brauchen.
• Sich inspirieren lassen. Finden Sie UI -Lösung, die Sie mögen, und passen Sie sie an Ihre Umgebung an.

Abhängigkeiten

Es ist wichtig zu beachten, dass einige Aufgaben auf niedriger Ebene noch Bibliotheken benötigen, um sich auf wichtigere Aspekte zu konzentrieren. Alle Abhängigkeiten in diesem Projekt wurden unter Berücksichtigung der zuvor genannten Prinzipien sehr sorgfältig ausgewählt.

• Reach Router , weil es Straighforward, komponierbar ist und direkt das tut, was es sollte. Nichts mehr.
• Styled Components einfach CSS in JS mit großer Dokumentation. Warum nicht emotion ? Ich weiß nicht. Wenn es einen Grund gibt, warum ich Bescheid wissen sollte, lassen Sie es mich wissen!
• React Spring als moderne Benutzeroberfläche basiert oft auf bedeutungsvollen Animationen, alles, was sie fördert, ist großartig. Die Bibliothek bietet in letzter Zeit eine schöne Hooks -API, die direkt mit dem DOM für eine bessere Leistung spielt.

Legal

MIT Lizenz Copyright © 2019-Present, Mike Skowronek