Fullstack React
Montag, 10.Dez 2018
Es gehört offensichtlich zum guten Ton, dass nahezu alle Javascript Frameworks mit den Schlagworten schnell, schlank, einfach zu lernen werben, blickt man aber hinter die Kulissen, steckt natürlich mehr dahinter, Frust inklusive.
React zeichnet sich durch den funktionalen Ansatz aus und bringt nur die notwendigsten Funktionen mit, einer der Hauptunterschiede zu z.B. angular ist, dass es kein 2way Binding der Elemente gibt, bei React dreht sich alles um States und Properties.
Der Einstieg in React ist einfach, mit Hilfe der Create React App Scripts hat man das Ökosystem schnell am laufen, wobei hier die Empfehlung abgegeben werden kann, sich nicht mit webpack, babel und dergleichen zu belasten. React ohne ES6 und JSX zu verwenden funktioniert zwar, ist aber mühsam und für größere Projekte nicht praktikabel. Für die Komponentenentwicklung steht mit nwb ein ähnliches Werkzeug zur Verfügung.
Als Vorgabe für unser Ökosystem wird eine Admin-GUI angenommen, d.h. wir benötigen eine REST-API (Backend), einen HTTP-Client, ein UI Framework, usw. Schrittweise betrachten wir die einzelnen Puzzleteile unseres Systems, das aus folgenden Komponenten besteht:
- react, react-dom: Die Basis
- redux, react-redux, redux-saga: Der State Container
- immutable, redux-immutable: Wir mögen keine Veränderungen
- axios: Kontakt mit dem Backend
- semantic-ui-react: Hübsche Widgets
- react-router-dom: Lenkung muss sein
