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.
![](https://www.datocms-assets.com/107148/1700230928-smartive_20210803_30_isoavc.jpg?auto=format&w=1504)
![Drei smartive Mitarbeitende besprechen etwas am Computer.](https://www.datocms-assets.com/107148/1698651796-smartive-buero-2023-high-res-56.jpg?auto=format&w=1504)
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.
Was wir mit React schon umgesetzt haben? So einiges.
![Ein Strassenschild, das für ein Kunstfestival wirbt, das vom 21. bis 23. Juni 2024 stattfindet, mit fettem schwarz-gelbem Text vor dem Hintergrund eines städtischen Gebäudes.](https://www.datocms-assets.com/107148/1721229796-img_6346.jpeg?auto=format&fit=crop&h=240&w=460)
Street Art Festival in Chur
Europas Streetart-Highlight
![Gold bei Best of Swiss Web für smartive und Frontify Eine Gruppe von acht Personen posiert gemeinsam auf einem violetten Teppich und hält eine goldene Trophäe in Raketenform und eine Plakette mit der Aufschrift „Best of Web Technology Gold 2024“.](https://www.datocms-assets.com/107148/1716989210-best-of-swiss-web-2024-3.jpg?auto=format&fit=crop&h=240&w=460)
Frontify Partner
Frontify Partner mit Gold
![Ein Arbeiter in Schutzkleidung schweisst in einer Industriewerkstatt ein Metallstück mit einem Schweissbrenner, wobei Funken umherfliegen.](https://www.datocms-assets.com/107148/1718878644-yb_04040_2.jpg?auto=format&fit=crop&h=240&w=460)
Merkle Metallbau
Webdesign für solides Handwerk aus Metall
![](https://www.datocms-assets.com/107148/1709023838-getonedone-keyvisual.jpg?auto=format&fit=crop&h=240&w=460)
getONEdone
In kleinen Schritten zum grossen Impact
![Ein Mitarbeiter von Spühl in einer Fabrikhalle bei der Bedienung eines Tablets](https://www.datocms-assets.com/107148/1709031011-spuehl-foto-01.jpg?auto=format&crop=focalpoint&fit=crop&fp-x=0.67&fp-y=0.31&h=240&w=460)
Spühl360
In drei Klicks zu deinem Ersatzteil
![](https://www.datocms-assets.com/107148/1696511172-210902_fro2101_3625.jpg?auto=format&fit=crop&h=240&w=460)
Frontify
Ein Zuhause für Brands
![](https://www.datocms-assets.com/107148/1698307553-langer-samstag-chur-2022-05-cuadro22-fabian-florin.jpg?auto=format&fit=crop&h=240&w=460)
Langer Samstag
15 Stunden Kultur in Chur
![Die Angehörigenpflege wird zu einem der wichtigsten Themen in den nächsten 30 Jahren. Eine Frau umarmt eine deutlich ältere Dame. Sie wirken wie Mutter und Tochter.](https://www.datocms-assets.com/107148/1697090047-people.jpeg?auto=format&fit=crop&h=240&w=460)
Domicura
Die Plattform für Angehörigenpflege
![](https://www.datocms-assets.com/107148/1697617070-rgb_02_snack_001.jpg?auto=format&fit=crop&h=240&w=460)
Migipedia
Die Evolution der Community durch Nutzereinfluss und KI
![Ein Kind im gestreiften Hemd springt mit einem Stock in der Hand über einen blauen Hügel auf einem Spielplatz. Im Hintergrund sind eine Rutsche und Schatten spendende Strukturen zu sehen.](https://www.datocms-assets.com/107148/1697099244-bambi-corro-fn3puwb0phy-unsplash.jpg?auto=format&fit=crop&h=240&w=460)
Kanton St. Gallen Spilo
Mit Kindern Spielplätze entdecken
![](https://www.datocms-assets.com/107148/1697100007-ben-wicks-idctsz-inhi-unsplash.jpg?auto=format&fit=crop&h=240&w=460)
Kanton St. Gallen find-help