Seminarinformationen

Seminar - Ziel

In diesem 2-tägigen Seminar "React – Design-Systeme mit TailwindCSS und shadcn/ui" erfahren Sie, wie Sie mit Hilfe von TailwindCSS und shadcn/ui ein flexibles und individuell anpassbares Design-System für React-Anwendungen entwickeln. Sie erfahren, wie shadcn/ui im Vergleich zu klassischen Komponentenbibliotheken arbeitet und welche Vorteile es für moderne Frameworks wie Next.js, Remix, Astro oder Gatsby bietet. TailwindCSS wird Ihnen als effizientes Utility-First-CSS-Framework vorgestellt, das die Gestaltung moderner Benutzeroberflächen erleichtert. Dabei setzen Sie sich intensiv mit den Grundlagen von TailwindCSS auseinander und lernen, wie es sich zusammen mit shadcn/ui für ein vollständig anpassbares UI-System einsetzen lässt.

Am Ende des Seminars besitzen Sie das nötige Wissen, um ein eigenes Design-System auf Basis von TailwindCSS und shadcn/ui zu entwickeln. Sie können shadcn/ui in verschiedene React-Frameworks integrieren, TailwindCSS gezielt nutzen und eigene Komponenten erstellen. Außerdem sind Sie in der Lage, Ihr System mit Funktionen wie Responsive Design, Dark Mode und Theming flexibel zu erweitern.

Teilnehmer - Zielgruppe

  • Webentwickler

Kurs - Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

  • Teilnahme am Seminar Einführung in React oder vergleichbare Kenntnisse
  • Erfahrung mit TailwindCSS ist empfehlenswert aber nicht unbedingt notwendig

Seminardauer

  • 2 Tage
  • 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / Agenda

Einführung in shadcn/ui

  • Unterschied zu Komponenten Libraries
  • Unterstütze React Frameworks (Next.js, Remix, Astro, Gatsby)
  • Basis Technologien
  • radix UI

TailwindCSS Grundlagen

  • Utility-First Grundlagen
  • Modifiers: hover, focus
  • Responsive Design
  • Dark Mode
  • Theme Anpassung
  • Funktionen und Directives
  • Installieren

Wichtige TailwindCSS Klassen

  • Flexbox & Grid
  • Spacing
  • Sizing
  • Typographie
  • Hintergründe
  • Ränder

Installation von shadcn/ui

  • Installieren und Konfigurieren
  • Theming
  • Dark Mode

Grundlegende Konzepte von shadcn/ui

  • Hinzufügen von neuen Komponenten zum Design System
  • Verfügbare Komponenten
  • Anlegen von Komponenten Varianten
  • Anpassungen per Sprache mit v0 (LLM)

Weitere Schulungen zu Thema React

Jakarta EE - Moderne Full Stack Entwicklung mit React und MongoDB

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "Jakarta EE – Moderne Full Stack Entwicklung mit React und MongoDB" erhalten Sie einen umfassenden Überblick über aktuelle Webtechnologien und sind danach in der Lage, ein komplettes Webprojekt mit modernen Tools umzusetzen. Der Schwerpunkt ...

ASP.NET Core-Entwicklung mit React und Redux

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "ASP.NET Core-Entwicklung mit React und Redux" erlernen Sie die notwendigen Fähigkeiten, um eine moderne Webanwendung zu entwickeln, die JavaScript auf der Client-Seite und ASP.NET Core im Backend nutzt. Sie erhalten grundlegende Kenntnisse in der ...

Einführung in React

- u.a. in Dresden, Heidelberg, Darmstadt, Freiburg, Nordhausen

In diesem 3-tägigen Seminar "Einführung in React" erfahren Sie, wie Sie die React.js-Bibliothek sowie JSX einsetzen, um einfache, datenbasierte Benutzeroberflächen (UIs) zu entwickeln. Dabei erhalten Sie einen Überblick über die wesentlichen JavaScript-Konzepte, die für ...

Erstellen von Webseiten mit Gatsby

- u.a. in Hannover, Köln, Paderborn, Wien, Marburg

In diesem 2-tägigen Seminar "Erstellen von Webseiten mit Gatsby" erhalten Sie einen modernen Einblick in die Entwicklung von Weblösungen, die den Wandel von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastruktur für Websites ...