Svelte - Grundlagen

Ziele

In dieser 2-tägigen Schulung "Svelte - Grundlagen" lernen Sie die Grundlagen von Svelte, einem modernen JavaScript-Framework, kennen. Sie werden lernen, wie Sie ein neues Svelte-Projekt einrichten und die Projektstruktur verstehen. Das Seminar deckt die Erstellung von Svelte-Komponenten ab, einschließlich der Template-Syntax und Svelte-spezifischer Anweisungen. Sie werden die Verwendung reaktiver Variablen zur effizienten Zustandsverwaltung kennenlernen und Benutzerinteraktionen in Svelte-Komponenten erfassen und darauf reagieren können. Die Kommunikation zwischen Komponenten mittels Props und benutzerdefinierter Events wird behandelt, und Sie werden ein einfaches Routing-System in Svelte implementieren können. Styling-Techniken wie Inline-Styling und die Verwendung von CSS-Klassen werden ebenfalls behandelt. Am Ende des Seminars lernen Sie, wie Sie Ihre Svelte-Anwendung für die Produktion optimieren und bereitstellen können. Durch praktische Übungen werden Sie Ihre Fähigkeiten in der Entwicklung von Svelte-Anwendungen festigen. Das Seminar legt den Grundstein für Ihre Weiterentwicklung in der Svelte-Entwicklung und gibt Ihnen das Vertrauen, moderne und reaktive Webanwendungen mit Svelte zu erstellen.

Zielgruppe

• Webentwickler

Voraussetzungen

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

• Kenntnisse in HTML, CSS und JavaScript
• Erfahrung in der clientseitigen Webentwicklung

Agenda

Einführung in Svelte

• Was ist Svelte und wie unterscheidet es sich von anderen Frameworks?
• Einblick in die Svelte-Ökosystem

Installation und Projektsetup

• Installation von Node.js und npm (Node Package Manager)
• Einrichtung eines neuen Svelte-Projekts mit dem Svelte-CLI
• Überblick über die Projektstruktur und die Hauptdateien einer Svelte-Anwendung

Grundlagen von Svelte-Komponenten

• Erstellung und Verwendung von einfachen Svelte-Komponenten
• Verwendung von Mustache-Tags
• Verwendung von Svelte-Anweisungen wie if, each und await

Reaktive Variablen und Zustandsverwaltung

• Einführung in reaktive Variablen und ihre Bedeutung
• Verwendung des $-Syntax für reaktive Zuweisungen und Abfragen
• Zustandsverwaltung mit dem let-Syntax

Event-Handling und Benutzerinteraktionen

• Benutzerinteraktionen in Svelte-Komponenten
• Verwendung von Event-Handlern
• Umsetzung von interaktiven Funktionen in Svelte-Anwendungen

SvelteKit

• Einführung in SvelteKit
• Installation und Projekteinrichtung
• Erstellung von SvelteKit-Anwendungen
• Verwendung von SvelteKit-Routen
• Verwendung von SvelteKit-State-Management
• Verwendung von SvelteKit-Internationalisierung
• Debugging von SvelteKit-Anwendungen

Kommunikation zwischen Komponenten

• Verwendung von Props (Eigenschaften)
• Auslösen und Abfangen von benutzerdefinierten Events
• Datenfluss in der Komponentenhierarchie

Routing und Navigation in Svelte

• Implementierung eines einfachen Routers mit der svelte-routing-Bibliothek
• Erstellung von Routen und Verknüpfung von URLs mit Svelte-Komponenten
• Navigation zwischen verschiedenen Seiten in einer Svelte-Anwendung

Styling in Svelte

• Verwendung von Inline-Styling mit Svelte-Komponenten
• Kombination von Styles mit globalen und lokal definierten CSS-Klassen
• Svelte-spezifische Styling-Funktionen wie :global und :local

Deployment und Veröffentlichung

• Optimierung von Svelte-Anwendungen
• Verwendung des npm run build-Befehls
• Bereitstellung einer Svelte-Anwendung

Open Badge - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erlangen Sie nicht nur Fachkenntnisse und Fähigkeiten, sondern bekommen zusätzlich zu Ihrem Teilnahmezertifikat ein Open Badge als digitalen Nachweis Ihrer Kompetenz.

Sie können diesen in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com Konto abrufen. Ihre verdienten Badges lassen sich problemlos in sozialen Netzwerken integrieren und weitergeben.

Mehr zu den Vorteilen von Badges

Kurz vor Durchführung