React DnD - Drag and Drop
Komplexe Drag-and-Drop-Interfaces mit React DnD planen, umsetzen, testen und sauber im State verwalten
- React-DnD-Architektur verstehen
- useDrag und useDrop einsetzen
- Komplexe Drop-Regeln umsetzen
- 2 Tage
- Fortgeschritten
- Online
- 5,0 2 Bewertungen
- Zufriedenheitsgarantie Risikofrei für dich
- Online Live per Videokonferenz
- max. 8 Teilnehmerinnen und Teilnehmer pro Gruppe
- Keine Vorkasse Rechnung nach dem Seminar
Das nimmst du mit
- React-DnD-Architektur verstehen
- useDrag und useDrop einsetzen
- Komplexe Drop-Regeln umsetzen
- State-Änderungen sauber verwalten
- Drag-and-Drop-Logik testen
Passt das zu dir?
Damit du den Tag wirklich mitnimmst, lohnt sich ein kurzer Abgleich.
Richtig für dich, wenn
- React-Entwicklerinnen und React-Entwickler mit Bedarf an komplexen Drag-and-Drop-Interfaces
- Frontend-Teams, die Sortier-, Board-, Tree- oder Builder-Oberflächen entwickeln
- Web-Entwicklerinnen und Web-Entwickler, die React DnD in bestehende Anwendungen integrieren
- Software-Architektinnen und Software-Architekten mit Verantwortung für interaktive UI-Komponenten
Das bringst du mit
- Gute Kenntnisse in React, Komponenten, Props, State und Hooks
- Erfahrung mit React Redux oder vergleichbaren State-Management-Konzepten
- Sicherer Umgang mit JavaScript, JSX und Entwicklungswerkzeugen wie npm oder yarn
- Kenntnisstand auf Niveau von React-Grundlagen und fortgeschrittenen React-Themen
- Für einen strukturierten Einstieg in das React-Ökosystem eignet sich die React Komplettausbildung
Dein Lernweg
Tag 1: Grundlagen, Architektur und erste Drag-and-Drop-Komponenten
- Einordnung von Drag-and-Drop im Browser und in React-Anwendungen
- Überblick über React DnD, Backends und Provider-Struktur
- Einrichtung von React DnD mit HTML5-Backend
- Umsetzung erster Drag-Quellen mit useDrag
- Aufbau von Drop-Zonen mit useDrop
- Arbeit mit Item-Types, Drop-Regeln und Collector-Funktionen
Tag 2: Komplexe Interaktionen, State-Handling und Testing
- Verschachtelte Drag-and-Drop-Strukturen und mehrere Typen
- Visuelles Feedback, Monitoring und Drag-Previews
- Speichern von Änderungen im React-State und in Redux
- Behandlung typischer Fehlerbilder und Architekturentscheidungen
- Testing von React-DnD-Komponenten mit Test-Backend
- Abschluss der gemeinsamen Web-Applikation und Besprechung eigener Einsatzszenarien
Klarheit von Anfang an
Format, Ablauf und alles, was schon enthalten ist. Keine Überraschungen, nur Fokus auf dein Ergebnis.
- Live-OnlineInteraktiv per Videokonferenz, von überall
2 Tage
Kompakt aufgebaut, damit du schnell ins Tun kommst.
max. 8
Kleine Gruppe, damit genug Raum für deine Fragen bleibt.
- Hands-on-Workshop mit gemeinsamer Entwicklung einer realen React-Web-Applikation
- Code-Beispiele, Live-Coding und direkte Umsetzung zentraler React-DnD-Konzepte
- Übungen zu Drag-Quellen, Drop-Zonen, verschachtelten Strukturen und State-Handling
- Analyse typischer Fehlerbilder und Lösungswege aus React-Projekten
- Diskussion eigener Anwendungsfälle aus Frontend-, Produkt- und UI-Projekten
Das ist immer dabei
- Ausführliche Schulungsunterlagen und Praxisbeispiele
- Teilnahmezertifikat
- Übungsumgebungen und Beispieldaten
- Nachbetreuung per E-Mail nach dem Seminar
Sichere dir deinen Platz
Wähle den Termin, der zu dir passt. Online live dabei oder vor Ort, ganz wie es für dich passt.
- Erfahrene IT-Trainer aus der Praxis
- Keine Vorkasse, Rechnung nach dem Seminar
- Kostenfreie Umbuchung bis 14 Tage vor Start
Lieber das ganze Team?
Bring dieses Seminar zu euch ins Haus oder lass uns ein Programm bauen, das genau auf euer Unternehmen passt.
Inhouse-Schulung
Wir kommen zu dir und schulen dein Team genau auf eure Praxis.
- Komplett auf eure Use-Cases und Tools zugeschnitten
- Termin und Ort bestimmst du, vor Ort oder Live-Online
- Ein fester Pauschalpreis statt Preis pro Person
Firmen-Seminar
Ein individuelles Programm, das wir auf eure Ziele zuschneiden.
- Frei kombinierbare Module aus unserem Themenkatalog
- Skalierbar von der Kleingruppe bis zur ganzen Belegschaft
- Begleitung über mehrere Termine hinweg möglich
Das sagen Teilnehmerinnen und Teilnehmer
Echte Rückmeldungen aus den Feedbackbögen dieses Seminars.
Mega Trainer, super präsentiert, inhaltlich bis in die Tiefe auf Fragen eingegangen. Klasse!
- Wissen
- 5,0
- Verständlichkeit
- 5,0
- Struktur
- 5,0
- Praxis
- 5,0
- Stimmung
- 5,0
Hervorragend! Kompetent, Sympathisch und auf den Punkt! Klasse!
- Wissen
- 5,0
- Verständlichkeit
- 5,0
- Struktur
- 5,0
- Praxis
- 5,0
- Stimmung
- 5,0
Deine IT-Schulungen München-Expertinnen und -Experten
Du hast Fragen zu Inhalten, Terminen oder einer passenden Lösung für dein Team? Wir beraten dich gern, bevor du buchst. Direkt, ohne Umwege.
Antwort in der Regel am selben Werktag
Dein cmt-Team München
Beratung zu IT-Weiterbildung
Fragen und Antworten zu React DnD - Drag and Drop
Für welche React-Projekte eignet sich React DnD?
React DnD eignet sich besonders für Anwendungen mit anspruchsvoller Drag-and-Drop-Logik, etwa Boards, Sortierlisten, Tree-Strukturen, visuelle Editoren, Konfiguratoren oder Builder-Oberflächen. Der Workshop behandelt nicht nur einzelne UI-Effekte, sondern die strukturierte Umsetzung solcher Interaktionen in einer React-Anwendung.
Welche React-Kenntnisse werden vorausgesetzt?
Vorausgesetzt werden solide React-Kenntnisse, insbesondere Komponenten, Props, State, Hooks und grundlegende Patterns für wiederverwendbare UI-Komponenten. Erfahrung mit Redux oder vergleichbarem State-Management ist hilfreich, weil Drag-and-Drop-Änderungen häufig dauerhaft im Application-State abgelegt werden.
Wird im Seminar mit Hooks gearbeitet?
Ja. Der Workshop arbeitet mit dem aktuellen Hook-basierten Ansatz von React DnD. Im Mittelpunkt stehen DndProvider, useDrag, useDrop, Collector-Funktionen, Monitoring und das Zusammenspiel von UI-Zustand und Application-State.
Geht es nur um Listen oder auch um komplexere Drag-and-Drop-Szenarien?
Behandelt werden auch komplexere Szenarien mit mehreren Item-Types, verschachtelten Drop-Zonen, unterschiedlichen Drop-Regeln, visuellen Vorschauen und Zustandsänderungen über mehrere Ebenen hinweg. Ziel ist eine Architektur, die über einfache Sortierlisten hinausgeht.
Welche Rolle spielt Testing bei React DnD?
Testing ist Teil des Workshops. Behandelt wird, wie Drag-and-Drop-Interaktionen mit dem React-DnD-Test-Backend überprüft werden und welche Teile der Logik sich sinnvoll isoliert testen lassen.
Welche Weiterbildung passt nach dieser React DnD Schulung?
Nach dem Workshop bieten sich Vertiefungen in angrenzenden React-Architekturthemen an. Für serverseitiges Rendering, Routing und skalierbare App-Strukturen ist der Next.js Grundkurs eine passende Fortsetzung.
Passende Schulungen
React DnD - Drag and Drop
Nächster Termin: 17. September 2026 · Online
ab1.090 €netto