React bringt die Inhalte auf den Bildschirm.

React kümmert sich um die Darstellung interaktiver Web-Inhalte – sei es eine Website, eine App oder ein Videostreamingportal. Benutzerinteraktionen im Browser können zwar in reinem Javascript programmiert werden, doch bei komplexeren Fällen bietet sich eine Library oder ein Framework wie React an. So behalten wir die Kontrolle über jedes Detail in der Darstellung – ohne uns ständig um Details kümmern zu müssen.

Ein Mann steht und präsentiert drei sitzenden Kollegen in einem modernen Büro mit Glaswänden und Grünpflanzen Informationen auf einem Bildschirm. An der Wand hinter ihnen ist das Wort „smartive“ zu sehen.

Drei smartive-Mitarbeitende besprechen etwas am Computer.

React plus X

React legt das Fundament für eine effiziente Entwicklung. Und es öffnet die Tür zu einem Dschungel von weiteren Libraries (wir nennen es Ökosystem), die darauf aufbauen oder sich sehr gut kombinieren lassen:

Ein Widget? React.
Eine ganze Website mit Server-side Rendering? React und Next.js.
Eine App mit vielen möglichen Zuständen? React und XState.

TypeScript

TypeScript ist der neue beste Freund von Javascript. In Javascript ist alles möglich – auch Saltos mit blutiger Nase und Knochenbrüchen. TypeScript beendet den Wildwuchs, indem es die Entwickler*innen zwingt, Implizites explizit zu machen (Typisierung).Eine definierte Datenstruktur ist wie ein zahmes Känguru: Keine Boxhiebe, aber alles im Beutel. Das gibt Sicherheit. Das Resultat sind weniger Bugs und eine stabile Basis, die auch grosse Projekte langfristig wartbar macht.

Next.js

Mit React generieren wir Komponenten, also Teile einer Seite. Für einen ganzen Webauftritt mit vielen Seiten gibt es Next.js.Next.js ergänzt React um Cleverness auf der Server-Seite – Vorgenerierte Seiten, ad hoc generierte und nur bei Änderung neu generierte sind damit ein Leichtes. Auf dieser Basis lässt sich wunderbar eine Plattform wie Migipedia mit einer Mischung aus statischen, dynamischen und personalisierten Inhalten bauen. Wo Next.js überall drinsteckt

XState

Viele mögliche Interaktionen bedeutet auch viele mögliche Zustände – etwa bei einem Verkaufsvorgang: Hat die Benutzerin schon ein Konto? Mit Adresse? Was ist im Warenkorb? In welchem Schritt ist der Bezahlvorgang?Hinter XState steckt ein Konzept aus der theoretischen Informatik: State Machines sind eine elegante Lösung, um Zustände und Abhängigkeiten zu modellieren und zugehörige Daten zu verwalten. So landen Benutzer*innen nicht in einer Sackgasse, sondern bewegen sich auf definierten Pfaden durch eine digitale Landschaft. Das schafft die Basis die für kritische Anwendungen wie z.B. ein Kassensystem.Robert hat auf unserem Blog ausführlich erklärt, was es mit State Machines und XState genau auf sich hat.

Tailwind

An CSS kommt im Web niemand vorbei. Layout, Farben, Schriften, Spacing – kurz: Das Erscheinungsbild jeder Website ist in Stylesheets festgelegt.CSS ist mittlerweile sehr umfangreich und bietet ausufernde Möglichkeiten. Das führt natürlich zu einer gewissen Komplexität, was wiederum eine Suche nach dem besten Ansatz zur Folge hat, um CSS zu bändigen.Der beste Anwärter auf den heiligen Gral ist unseres Erachtens Tailwind. Die Umsetzung von Designs beschleunigt es jedenfalls erheblich.