Webanwendungen mit React – Fortgeschrittene Konzepte und KI-Agenten

Webanwendungen müssen heute hohe Ansprüche erfüllen. Sie sollen sofort reagieren und auch in komplexen Ansichten konsistente Daten zeigen. Immer häufiger kommt ein KI-Assistent hinzu, der Aufgaben selbst erledigt, den Benutzern aber trotzdem die volle Kontrolle lässt. Im Seminar entwickelst du Schritt für Schritt eine Anwendung, die genau das leistet, und lernst dabei die passenden Werkzeuge und Pattern kennen. Am Ende kann der Assistent die Anwendung bedienen, die du selbst gebaut hast.

Sofort reagieren

Mit TanStack Query lädst, cachst und änderst du serverseitige Daten. Optimistische Updates zeigen Änderungen an, bevor der Server sie bestätigt hat. Du lernst, wie du mit Suspense festlegst, wo deine Anwendung auf Daten wartet, ohne dabei in Request-Wasserfälle zu laufen. Transitions sorgen dafür, dass sichtbare Inhalte stehen bleiben, bis die neuen bereit sind. Mit Activity bleiben ausgeblendete Bereiche wie Tabs samt Zustand erhalten und sind beim Zurückwechseln sofort wieder da.

Konsistent bleiben

Ändern sich Daten an einer Stelle, soll die Oberfläche auch in komplexen Ansichten konsistent bleiben. Du lernst, Caches gezielt zu invalidieren und für jede Art von Zustand den richtigen Platz zu finden: lokal in der Komponente, in der URL, im React Context oder in einem Store. Dabei klären wir, wann Context ausreicht und wann sich ein Store lohnt. Am Beispiel des TanStack Router siehst du außerdem, wie du Zustand typsicher in der URL ablegst, damit Links, Reload und Zurück-Button zuverlässig funktionieren.

Aufgaben erledigen lassen

Ein KI-Assistent wird erst richtig nützlich, wenn er nicht nur antwortet, sondern selbst handelt. Dabei verhält er sich anders als ein klassisches API: Er liefert seine Antwort stückweise, besorgt sich zwischendurch selbst Daten und fragt bei Bedarf nach. Klassische Data-Fetching-Ansätze stoßen hier an ihre Grenzen. Du lernst, wie das offene Protokoll AG-UI damit umgeht, und setzt mit TanStack AI einen Chat mit Streaming um. Mit Tools auf Client- und Serverseite bedient der Agent deine Oberfläche selbst, etwa indem er ein Formular für dich ausfüllt. Bei kritischen Aktionen bittet er den Benutzer vorher um Freigabe.

Du möchtest darüber hinaus Themen wie Fullstack-Entwicklung mit Next.js oder React Server Components vertiefen? Dann sprich uns gerne auf ein individuelles Inhouse-Seminar an.