twitter ui practise

Twitter UI Übungsklon

Das Ziel dieses Projekts ist es, die nächsten JS zu erfahren. Mein Hintergrund ist ein Webdesigner mit Erfahrung in HTML- und Tailwind -CSS mit einigen grundlegenden JavaScript -Kenntnissen. Am Ende versuchte ich, die Homepage -Benutzeroberfläche der Twitter -App neu zu erstellen. Es ist weit vom Original entfernt und ich bin sicher, dass es viele Mängel gibt. Bitte lassen Sie mich alle Vorschläge oder Verbesserungen wissen. Die Hauptsache ist, Spaß zu haben und etwas Neues zu lernen, hoffentlich können Sie es auch.

Twitter-Demo.mp4.mp4

Erste Schritte

Wenn Sie das Repository klonen, klonen Sie

npm install
npm run dev

Checkout Storybook, um Komponenten isoliert anzuzeigen

npm run storybook

Probleme

Das rechte Seitenfeld folgt nicht dem gleichen Verhalten wie Twitter. Während Sie scrollen, klingelt es, aber Sie sollten in der Lage sein, die Fußzeile -Links zu sehen.

Stapel

• Weiter.js
• Rückenwind -CSS
• Radix
• Storybook
• Vercel

Ressourcen

Leute, die ich folgten und ihre Repositorys und Videos ausgecheckt haben, um den Klon zu bauen.

• Tru Narla
• Colby Fayock
• Steven Tey
• Lee Rob
• Florentin

Was ist das?

Wenn Sie das paket.json überprüfen, lassen Sie mich versuchen, einige zu erklären

• Klasse-Varianz-Autorität: Ermöglicht es Ihnen, Varianten für Dinge wie Schaltflächen zu erstellen. Wenn Sie Designer sind, ist es wie die Komponentenvarianten von Figma.
• Klassennamen: Wenn Sie eine Komponente wie Radix UI -Komponenten stylen, können Sie eine lange Reihe von CSS -Dienstprogrammklassen haben, wenn Sie Tailwind -CSS verwenden. Möglicherweise haben Sie Schwebe-, Animations-, Reaktions-, Layout- und andere Klassen. Jetzt können Sie sie auf separaten Zeilen gruppieren.

Textkomponente

Textkomponente YouTube Video - Derzeit testen

Storybook

Storybook Addon als nächstes

Miser

• Wiederverwendbare Tastekomponente
• Absolute Importe

Autor

Roy Quilor

Verbinden

• ? Folgen Sie mir auf Twitter
• Auf YouTube abonnieren