Frontend-UI-Komponenten

Benutzerdefiniertes iHateReading-Repo

Im letzten Monat habe ich viele UI-Komponenten erstellt, die reale Webkomponenten sind, wie Schaltflächen, Eingaben, Formulare, Banner, Galerien

Komponenten, die für verschiedene Zwecke hergestellt wurden

• Lernen Sie Frontend und werden Sie besser in dem, was ich tue
• Verbessern Sie die Fähigkeit, besseren Code in der Frontend-Entwicklung zu schreiben (was das bedeutet, erkläre ich später)

Ich beschäftige mich derzeit mit dem Tech-Stack oder der Technologie ReactJS zusammen mit Next.js als Framework und verwende Tailwind CSS für das Styling und GSAP für die Animation

Ich kann mit jedem Tech-Stack arbeiten, der kein Problem darstellt, also habe ich mit dem neuesten Framework und der Sprache „reactjs“ mit next.js begonnen

Als nächstes muss ich alle Komponenten auswählen, die ich entwickeln soll und die ich auch persönlich in meinen bevorstehenden realen Projekten verwenden kann, wie z. B. Zahlungsformular, Abonnementformular, Bildergalerie, Schaltflächen und viele andere UI-Komponenten. Header-Komponenten und so weiter.

iHateReading ist eine Plattform von einem Entwickler für einen Entwickler und seit zwei Jahren teile ich Blogs und Newsletter auf ihatereading.in.

Dies ist der richtige Zeitpunkt, um einige neue Änderungen oder neue Funktionen einzuführen, z. B. benutzerdefiniertes Repo oder benutzerdefinierten Code oder wie auch immer Sie es nennen möchten, um das zurückzubringen, worum es bei dieser Plattform geht.

Nun kommt, woraus diese Komponenten bestehen. Alle Komponenten werden mithilfe der folgenden Module hergestellt

1. Reactjs
2. Tailwind CSS
3. GSAP für Animation
4. Mantine.dev UI-Bibliothek (falls erforderlich)

Ich versuche, eine Headless-UI-Komponente zu verwenden, was bedeutet, dass nur Funktionalität ohne Stil- oder Framework-Abhängigkeit hinzugefügt wird. Auf diese Weise können viele Entwickler den Code einfach kopieren und einfügen und ihn direkt verwenden, um schnell zu entwickeln.

Wenn Sie bei der Entwicklung dieser Komponenten die erste Komponente sehen, die ich auf https://ihatereading.in/customrepo geteilt habe, und sie mit der neuen oder neuesten Komponente vergleichen, können Sie den Unterschied leicht feststellen.

Weniger Abhängigkeiten, weniger Javascript und mehr optimierte und wiederverwendbare Codekomponenten.

Der ganze Dank geht an die Recherche und den Blog, die ich letztes Jahr gemacht habe: Warum verringert JavaScript die Website-Leistung? weil der Browser im Vergleich zu CSS viel Zeit zum Parsen von JS benötigt. Durch die Reduzierung von JS wird auch die Leistung der Website verbessert.

Außerdem wird CSS heutzutage so stark, dass sehr wenig JS erforderlich ist, um coole Animationen auf die Website zu bringen, und viele Entwickler schenken ihm nicht viel Aufmerksamkeit. Dies ist ein weiteres Motto für die Verwendung von mehr CSS. > weniger JS.

Bisher wurden 40 Komponenten hinzugefügt und ich arbeite an weiteren. Wenn Sie eine Vorstellung davon haben, welche Art von Komponenten, Formen oder Werkzeugen ich herstellen kann, fügen Sie sie im Kommentarbereich hinzu. Ich werde dem Beispiel auf jeden Fall folgen.

Ich teile die Neuigkeiten zur Komponentenentwicklung aktiv auf Twitter und LinkedIn und veröffentliche den Code auf ihatereading.in/customrepo

Schauen Sie sich diese gerne an und lassen Sie mich wissen, was ich noch hinzufügen und erstellen kann.

Prost
Shrey

Das obige ist der detaillierte Inhalt vonFrontend-UI-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!