Quer durch die Webwelt

Das React-Ökosystem im Überblick
Keine Kommentare

React ist für sich allein genommen ausreichend für einfache Webanwendungen. Wer mehr aus einem React-Projekt machen möchte, dem steht ein reiches Ökosystem zur Verfügung. Ob für das Styling von Komponenten oder das Routing: Für alles gibt es eine Bibliothek. Dieser Artikel gibt einen Überblick über die vielfältigen Optionen zur Erweiterung von React.

React fokussiert sich auf den View-Layer in Webapplikationen und wird als Basis zur Erstellung von User Interfaces mit Komponenten genutzt. Oft wird React nachgesagt, dass es alleine ausreichend sei, um Webanwendungen zu erstellen. Wie ich in meinem eigenen Buch „The Road to Learn React“ zeige, kann dies wirklich so umgesetzt werden. Vor allem um React zu erlernen, ist es von Vorteil, sich nur auf React zu konzentrieren, aber auch in kleineren Anwendungen kann es vollkommen ausreichend sein, nur React zu benutzen. Wenn es aber um die Implementierung einer größeren und komplexeren Anwendung geht, braucht man doch noch ein paar weitere Bibliotheken rund um React.

Entwickler, die zuvor mit Frameworks wie Angular oder Ember gearbeitet haben, tun sich oft schwer damit, die nötigen Bibliotheken zu identifizieren, die für eine technisch ausgefeilte Webanwendung auf Basis von React notwendig sind. Wer vorher mit einem Framework gearbeitet hat, ist daran gewöhnt, dass alle Funktionen unmittelbar verfügbar sind. Daran zeigt sich, dass React einfach nur eine Bibliothek für den View-Layer ist. Demnach muss man sich selbst um alle anderen Bibliotheken kümmern. Das ist aber auch einer der zentralen Vorteile von React. Es ermöglicht eine flexible Auswahl der weiteren Bibliotheken, die man seiner Anwendung hinzufügt. Man selbst bleibt aber unabhängig von einem Framework.

React mit seinem Ökosystem ist eine Art flexibles Framework. Man selbst sucht Bibliotheken aus, die zum Kern der Anwendung hinzugefügt werden können. Der folgende Artikel stellt eine subjektive Auswahl dieser Bibliotheken in verschiedenen Themenbereichen vor, die nützlich für kleinere, aber auch komplexe React-Anwendungen sind. Natürlich muss am Ende jeder selbst seine Wahl treffen und das passende Set an Bibliotheken für seine Zwecke zusammenstellen. Die hier vorgestellte Auswahl soll vor allem Einsteigern ins React-Ökosystem einen Überblick über die verschiedenen Optionen geben.

Die Wahl des richtigen Starter-Projekts

Die Entscheidung für das richtige Starter-Projekt, auch Boilerplate-Projekt genannt, für eine React-Anwendung fällt vielen Entwicklern schwer. In der modernen Webentwicklung hört man schnell von Tools wie Babel und webpack. Etliche Boilerplate-Projekte für React stehen online zur Auswahl, und jedes davon ist auf einen bestimmten Anwendungsfall zugeschnitten und benutzt verschiedenste Konfigurationen beispielsweise für Babel und webpack. Die Auswahl reicht von minimalistischen Ansätzen bis hin zu beinahe schon überladenen Projekten. Letztere machen leider die Mehrheit der online auffindbaren Projekte aus, zu Ungunsten von Neuankömmlingen im React-Ökosystem.

Im Folgenden möchte ich auf das Boilerplate-Projekt Create React App eingehen, das ein weithin akzeptierter Communitystandard ist. Es handelt sich um ein konfigurationsfreies Starter-Projekt, mit dem eine minimalistische lauffähige React-Anwendung out of the box erstellt werden kann. Dabei bleibt der Nutzer erst einmal verschont von Tools wie Babel und webpack. Auch im Nachhinein kann das zugrunde liegende Toolset über eine sogenannte eject-Funktionalität angepasst werden. Demzufolge ist Create React App das Go-To-Projekt für React-Neuankömmlinge, weil es möglich ist, sich hierbei ausschließlich auf React zu konzentrieren.

Eine ähnliche Lösung wie Create React App stellt Next.js dar. Auch dabei handelt es sich um ein konfigurationsfreies Boilerplate-Projekt für React, allerdings für serverseitig gerenderte Anwendungen. Gatsby ist eine weitere Alternative und eine großartige Wahl für statische Websites (z. B. Blogs) mit React.

Wer ein individuelles Boilerplate-Projekt für den eigenen Zweck einsetzen will, sollte zuerst die eigenen Anforderungen an die Anwendung eingrenzen. Ein Boilerplate-Projekt sollte so minimalistisch wie möglich sein und nicht zu viele Aufgaben auf einmal erfüllen. Die Wahl eines Projekts, das es schon online gibt, oder das Erstellen eines eigenen Projekts sollte auf die spezifischen Anforderungen zugeschnitten sein.

Empfehlungen für Projekt-Boilerplates

  • Create React App
  • Gatsby für statische Websites in React
  • js für serverseitig gerendertes React
  • Bei guten React-Kenntnissen: eigene minimalistische Boilerplate erstellen
  • Ansonsten: Anforderungen definieren, minimalistische Lösung finden

Utility-Bibliotheken für React

JavaScript bringt ab ES6 unzählige eingebaute Funktionen für die Arbeit mit Arrays, Objekten, Integern und Strings mit. In React ist die Methode map() für Arrays eine der am häufigsten genutzten Standardfunktionen von JavaScript. Warum? Weil in Komponenten oft eine Liste von Dingen gerendert werden muss. Und da JSX eine Mischung aus HTML und JavaScript ist, kann man JavaScript nutzen, um über diese Liste mit map() zu iterieren, um jeden einzelnen Wert als Element in JSX zurückzugeben.

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

Falls die JavaScript-Funktionen komplexer werden sollten, bietet sich eine Utility-Bibliothek an. Persönlich würde ich dafür zwei Bibliotheken empfehlen, die exklusiv verwendet werden sollten.
Meine erste Empfehlung ist Lodash, der Nachfolger von Underscore und die am weitesten verbreitete Utility-Bibliothek für JavaScript. Lodash ermöglicht es, Arrays zu sortieren, zu filtern oder zu gruppieren, aber auch mehrere Funktionen miteinander zu verketten oder zusammenzustellen. Der Funktionsumfang geht weit über die angebotenen Funktionen von nativem JavaScript für Arrays und Objekte hinaus.

Mein zweiter Tipp ist Ramda. Wer in die Richtung der funktionalen Programmierung (FP) in JavaScript gehen möchte, kommt nicht an dieser Utility-Bibliothek vorbei. Obwohl Lodash ein eigenes Derivat für die funktionale Programmierung besitzt (Lodash FP), würde ich bei funktionaler Programmierung eher zu Ramda tendieren. In dieser Bibliothek steht das FP einfach im Vordergrund.
Wenn man eine Utility Libary zu seiner React-Applikation hinzufügen will, kann man also Lodash oder Ramda nehmen. Lodash ist dabei eine eher bodenständige Bibliothek für jeden JavaScript-Entwickler, während Ramda mit einem starken Fokus auf die funktionale Programmierung daher kommt.

Empfehlungen für Utility Libraries

  • JavaScript ES6 und höher
  • Lodash
  • Ramda für funktionale Programmierung

Styles in React

Im Themenbereich Styling existieren viele Meinungen im React-Ökosystem. Das Thema ist nicht nur dann umstritten, wenn es um die spezifischen Lösungen geht, die momentan verfügbar sind, sondern auch auf einer philosophischen Ebene und für Designer und Entwickler gleichermaßen. Sollte es beispielsweise erlaubt sein, das style-Attribut eines HTML-Elements in JSX unterzubringen (Inlinestyle)? Oder sollten Styles neben Komponenten in JavaScript definiert werden (CSS in JS)? Oftmals reicht reines CSS für den Anfang in React völlig aus. Wer sein erstes Projekt mit Create React App selbst aufsetzt, arbeitet erst einmal nur mit herkömmlichen CSS und eventuell Inlinestyle.

const Headline = ({ children }) =>
  <h1 className="headline" style={{ color: 'lightblue' }}>
    {children}
  </h1>

Für kleinere Projekte kann das bereits ausreichend sein. Wenn die Anwendung aber wächst, ist es empfehlenswert, einen Blick auf CSS Modules zu werfen. Damit hat jede CSS-Datei ihren eigenen Namespace, kann direkt neben einer JavaScript-Datei mit einer Komponente definiert werden und vermeidet somit durch den Namespace, dass die Styles in andere Teile der Anwendung verbreitet werden. Der Style aus der CSS-Datei wird meist nur auf die danebenliegende Komponente in der JavaScript-Datei beschränkt. CSS Modules lassen sich außerdem gut skalieren, wenn eine Anwendung größer werden sollte.
Einen anderen Ansatz für das Styling einer React-Komponente bieten die sogenannten Styled Components an. Dieser Ansatz wird durch die Bibliothek styled-components ermöglicht. Dabei werden React-Komponenten mit CSS-Styles definiert und können so einfach in Reacts JSX-Syntax verwendet werden. Dadurch erfolgt das Styling der Anwendung in den Komponenten selbst und nicht mehr separat in CSS-Dateien.
Abschließend gibt es noch eine weitere Bibliothek für das Styling in React zu nennen: Classnames. Damit können CSS-Klassen in JavaScript bedingt hinzugefügt werden. Das ist mit reinem JavaScript auch möglich, ist mit der Classnames-Bibliothek aber deutlich leichter. Ein Vergleich der beiden Ansätze ist Listing 1 und Listing 2 zu sehen. Listing 3 zeigt, dass die Classnames-Bibliothek auch perfekt in Kombination mit CSS-Klassen aus den CSS Modules funktioniert. In Kombination mit Styled Components wird diese Bibliothek eher weniger benutzt. Trotzdem ist die Classnames-Bibliothek für viele React-Einsteiger fast schon obligatorisch, wenn es um bedingtes Styling in React geht.

const Box = ({ status, children }) => {
  let classNames = ['box'];

  if (status === 'INFO') {
    classNames.push('box-info');
  }

  if (status === 'WARNING') {
    classNames.push('box-warning');
  }

  if (status === 'ERROR') {
    classNames.push('box-error');
  }

  return (
    <div className={classNames.join(' ')}>
      {children}
    </div>
  );
}
import cs from 'classnames';

const Box = ({ status, children }) => {
  let classNames = cs('box', {
    'box-info': status === 'INFO',
    'box-warning': status === 'WARNING',
    'box-error': status === 'ERROR',
  });

  return (
    <div className={classNames}>
      {children}
    </div>
  );
}

import cs from 'classnames';
import styles from './style.css';

const Box = ({ status, children }) => {
  let classNames = cs('box', {
    [styles.box_info]: status === 'INFO',
    [styles.box_warning]: status === 'WARNING',
    [styles.box_error]: status === 'ERROR',
  });

  return (
    <div className={classNames}>
      {children}
    </div>
  );
}

Empfehlungen für Styles

  • Reines CSS und inline Styles
  • Die fast schon obligatorische Classnames Library
  • CSS Modules
  • Styled Components

Aynchrone Requests in React

Wenn man eine komplexere React-Anwendung implementiert, wird man oftmals nicht um Requests zu Drittanbieter-APIs zur Abfrage von Daten herumkommen. Früher wurde dafür jQuery genutzt. In React sollte es allerdings möglichst vermieden werden, eine Bibliothek wie jQuery einzubinden. Heutzutage verfügen modernere Browser über das native Fetch-API, das es ermöglicht, asynchrone Requests im Browser auszuführen. Unter der Haube arbeitet das Fetch-API mit Promises. Ein Fetch sieht grundsätzlich wie folgt aus, beispielsweise in einer React-Lifecycle-Methode, wenn eine Komponente in ihrem Lebenszyklus gemountet wird:

componentDidMount() {
  fetch(my/api/domain)
    .then(response => response.json())
    .then(result => {
      // do success handling
      // e.g. store in local state
    });
}

Im Grunde wird für so ein Request zu einem Drittanbieter-API also keine zusätzliche Bibliothek notwendig. Trotzdem ist das native Fetch-API nur bedingt in (modernen) Browsern verfügbar. Auch wenn man dem mit Polyfills und isomorphic-fetch begegnen kann, gibt es alternativ auch JavaScript-Bibliotheken, deren einziger Zweck die Ausführung solcher asynchronen Requests ist. Eine solche Bibliothek, die ich für empfehlenswert halte, nennt sich axios, die statt des nativen Fetch-API verwendet werden kann.

Empfehlungen für asynchrone Requests

  • Das native Fetch-API
  • axios

Higher Order Components

Irgendwann kommt man an den Punkt, an dem man Funktionalitäten aus einer Komponente gerne in anderen Komponenten wiederverwenden möchte. Um diese Funktionalitäten zu extrahieren, bieten sich Higher Order Components (HOC) an. Eine HOC wird genutzt, um eine React-Komponente mit solchen extrahierten Funktionalitaeten zu erweitern. Die eigentliche React-Komponente kann somit sehr leichtgewichtig ausfallen, da sie den Großteil der Funktionalitäten in eine Higher Order Component auslagert. Für diese Art von Komponenten benötigt man keine zusätzliche Bibliothek in React.

// HOC declaration

function withLoadingSpinner(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (!isLoading) {
      return <Component { ...props } />;
    }

    return <LoadingSpinner />;
  };
}

// Usage

const ListItemsWithLoadingIndicator = withLoadingSpinner(ListItems);

<ListItemsWithLoadingIndicator
  isLoading={props.isLoading}
  list={props.list}
/>

Die Bibliothek Recompose bringt einige Higher Order Components für typische Anwendungsfälle von HOCs in React mit. Bevor also eigene Higher Order Components implementiert werden, sollte man einen Blick auf die Bibliothek werfen, ob der Anwendungszweck, für den man eine Higher Order Component nutzen möchte, nicht bereits durch die Recompose-Bibliothek abgedeckt wird.

Empfehlungen für Higher Order Components

  • Recompose für Komponenten höherer Ordnung für Utilities
  • Recompose oder eine Utility Library (Lodash, Ramda) für Compose

Type Checking

React verfügt selbst über ein eigenes Type Checking. Mit PropTypes kann man selbst Properties für React Components definieren (Listing 5).

import PropTypes from 'prop-types';

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

List.propTypes = {
  list: PropTypes.array.isRequired,
};

Wenn ein falscher Typ an eine Komponente übergeben wird, wird bei Ausführung der Anwendung eine Fehlermeldung ausgegeben. Diese Art des Type Checkings sollte aber nur in kleineren Anwendungen genutzt werden.

In größeren React-Anwendungen kann es sinnvoll sein, mit komplexerem Type Checking zu arbeiten, beispielsweise mit Flow oder TypeScript. Damit können Fehler bereits während der Entwicklung ausgegeben werden, ohne dass die Anwendung gestartet werden muss. Somit können vermeidbare Bugs frühzeitig gefunden werden. Auf diese Weise trägt das Type Checking dazu bei, die Entwicklungserfahrung angenehmer zu gestalten und Bugs zu vermeiden. Flow wurde von Facebook entwickelt und fühlt sich im React-Ökosystem natürlicher an als TypeScript. Darum empfehle ich, eher Flow als TypeScript in React zu benutzen.

Empfehlungen für Type Checking

  • PropTypes
  • Flow (oder TypeScript)

Codeformatierung in React

Es stehen grundsätzlich drei Optionen für die Codeformatierung in React zur Auswahl, die in etwa dem entsprechen, was auch in anderen Frameworks wie Angular und Vue.js möglich ist.
Die erste Option ist die Verwendung eines populären Styleguides. Dieser kann verwendet werden, um Richtlinien für Codeformatierungen, z. B. bei der stilistischen Formatierung von React-Komponenten, auf den eigenen Sourcecode zu übertragen. Ein beliebter Styleguide für React wurde beispielsweise von Airbnb veröffentlicht. Auch wenn man einen Styleguide nicht zu 100 Prozent befolgt, ist es sinnvoll, sich mit ein paar Styleguides zu beschäftigen, um die Grundlagen der Codeformatierung in React nachvollziehen zu können.

Ein Styleguide ohne den Zwang, ihn auch wirklich zu befolgen, bringt bei der Arbeit in Teams recht wenig. Der zweite Ansatz besteht in der Nutzung eines Linters, beispielsweise ESLint in JavaScript. Ein Linter kann für das eigene Projekt konfiguriert werden, um beispielweise Styleguides zu folgen. Wird eine Richtlinie des Styleguides im Projekt nicht beachtet, wird auf der Konsole eine Warnung ausgegeben. Somit muss das gesamte Team eines Projekts denselben Richtlinien folgen, um die Formatierung des Sourcecodes zu vereinheitlichen.

Die dritte und beliebteste Option ist die Verwendung eines automatischen Formatters. Prettier ist ein solcher Formatter, der den Code nach internen Regeln formatiert. Diese Regeln können teilweise konfiguriert werden, folgen aber dennoch einem eigenen Standard. Prettier kann in einen Editor oder eine IDE integriert werden und formatiert den Code immer dann, wenn man beispielweise eine Datei speichert oder Dateien in eine Versionsverwaltung wie Git eincheckt. Anfangs entspricht die Formatierung nicht immer dem eigenen Geschmack, dafür muss man sich aber immerhin nicht mehr um die Codeformatierung in der eigenen Codebasis oder der des Teams kümmern.

Empfehlungen für die Formatierung

  • Einen beliebten Styleguide lesen
  • Prettier

Bibliotheken für UI-Komponenten

In der Webentwicklung möchte man viele Komponenten nicht immer wieder von Grund auf neu implementieren, wenn man gerade an einer neuen Anwendung arbeitet. Komponenten wie Datepicker, Drop-down-Menüs, Tabellen oder Navigationselemente sollten irgendwo vorgefertigt vorliegen. Dafür gibt es UI-Bibliotheken, die gut mit React kombinierbar sind. Persönlich empfinde ich Semantic UI und Material-UI als gute Optionen, die ich mehrfach in eigenen Projekten eingesetzt habe. Wenn man sich an eine Bibliothek gewöhnt hat, will man nicht ständig auf ein neues Pferd setzen.

Empfehlungen für UI-Komponenten

  • Semantic UI

State Management

React bringt zum Glück sein eigenes lokales State Management in Komponenten mit, sodass es für den Anfang ausreicht, den Umgang mit React zu erlernen. Die Grundlagen lernt man schnell, indem man this.state und this.setState() für das lokale State Management nutzt. Viele Anfänger machen aber den Fehler, React direkt mit einer Bibliothek wie Redux zu verwenden. Das sollte man für den Einstieg eher sein lassen.

Was aber tun, wenn die ersten Probleme mit Reacts State Management auftreten, weil die Anwendung größer wird? Dafür gibt es zwei mögliche Lösungen: Redux und MobX. Beide haben ihre Vor- und Nachteile. Hier gibt es mehr Informationen zu beiden Tools, mit denen man zu einer fundierteren Entscheidung gelangen kann.

Redux ist sehr beliebt und verfolgt gleichzeitig einen recht innovativen Ansatz mit funktionaler Programmierung. Die Bibliothek ist so populär geworden, dass sie schon ihr eigenes Ökosystem an Bibliotheken mitbringt. Wenn man Redux mit React verwendet, stößt man so gut wie zwangsläufig auf die Bibliothek React Redux . Dabei handelt es sich um die offizielle Bibliothek, um den View-Layer (React) mit dem State-Layer (Redux) zu verbinden. Auch für die alternative State-Management-Bibliothek MobX gibt es eine solche Bibliothek, um beide Welten miteinander zu verbinden. Allen, die den Umgang mit Redux lernen wollen, empfehle ich das Buch „Taming the State in React“.

Empfehlungen für State Management

  • Das lokale State Management von React
  • Redux oder MobX
    • Nur, wenn man bereits mit dem lokalen State vertraut ist
    • Nur, wenn es wirklich notwendig ist

Routing in React

Routing wird häufig schon zu einem frühen Zeitpunkt in der Entwicklung von React-Anwendungen eingeführt. Schlussendlich wird der von React realisierte View-Layer zumeist in Single Page Applications verwendet. Routing ist darum ein zentraler Bestandteil der Anwendungen, um mittels URLs durch die Applikation zu navigieren.

Bevor man aber einen komplexen Router in die Anwendung aufnimmt, während man eigentlich gerade erst lernt, mit React zu arbeiten, sollte man sich zuerst das bedingte Rendering von React ansehen und es damit probieren. Dabei handelt es sich nicht um einen vollständigen Ersatz für ein richtiges Routing; für kleine Anwendungen reicht es aber doch oft, Komponenten darüber konditional auszutauschen. Damit können zumindest verschiedene States auf den View-Layer gerendert werden, der URL wird aber nicht ausgetauscht.

Für die Implementierung eines richtigen Routings stehen wieder verschiedene Lösungen für React zur Wahl. Die beliebteste Option stellt der React Router dar, der gut in Kombination mit externen State-Management-Bibliotheken funktioniert, beispielsweise Redux oder MobX.

Empfehlungen für State Management

  • Bedingtes Rendering in React
  • React Router

Authentifizierung in React

In komplexer werdenden Anwendungen kann die Anforderung aufkommen, Authentifizierung und Authentisierung zu ermöglichen. Dazu gehören beispielsweise Funktionalitäten für die Registrierung, das Log-in und das Log-out von Nutzern. Authentifizierungsmechanismen gehen aber oft noch weit darüber hinaus – man muss ja auch Passwörter zurücksetzen oder aktualisieren können und die Nutzerdaten in einer Datenbank verwalten. Deswegen habe ich mich mit diesem Thema intensiv befasst und ein umfassendes Tutorial dafür geschrieben, das hier zu finden ist. Im Tutorial wird Firebase für die Authentifizierung und die Speicherung von Nutzerdaten in einer Echtzeitdatenbank verwendet. Weitere Alternativen für die Authentifizierung sind Auth0 und Passport.

Empfehlungen für die Authentifizierung

  • Firebase

Fazit

Am Ende kann man das React-Ökosystem als eine Art Framework für React ansehen. Allerdings ist es ein sehr flexibles Ökosystem: Man entscheidet selbst, welche Bibliotheken man nutzen möchte und kann klein anfangen, indem man nur React nutzt. Nach und nach können weitere Bibliotheken hinzugefügt werden, die man zur Lösung von spezifischen Problemen benötigt. Die einzelnen Bausteine, die einer React-Applikation hinzugefügt werden, können somit flexibel und eigenhändig skaliert werden. Oder aber man belässt die Applikation leichtgewichtig, weil sie auch nicht allzu komplex ist, und bleibt einfach bei einem einfachen React. Darum hier nochmal eine zusammenfassende und abschließende Liste von Bibliotheken, die man zur Ergänzung in React-Anwendungen hinzunehmen kann (Kasten: „Empfehlungen nach Projektgröße“). Die Liste ist zum weiteren Verständnis in Projektgrößen unterteilt. Natürlich handelt es sich hierbei um eine persönliche Auswahl, deswegen bin ich gespannt, eure Meinung dazu zu hören. Das „ideale“ Set-up für React ist natürlich eine Frage des eigenen Geschmacks und der eigenen Notwendigkeiten und jedem Entwickler selbst überlassen. Ein objektiv perfektes Set-up gibt es nicht.

Empfehlungen nach Projektgröße

Kleine Anwendungen

  • Boilerplate: Create React App
  • Utility-Bibliothek: JavaScript ES6 und höher
  • Styling: pures CSS und Inlinestyle
  • Asynchrone Requests: Fetch
  • Higher Order Components: optional
  • Formatierung: keine
  • Type Checking: keins oder PropTypes
  • State Management: lokale States
  • Routing: keins oder bedingtes Rendering
  • Authentifizierung: Firebase
  • Datenbank: Firebase
  • UI-Komponenten: keine

Mittlere Anwendungen

  • Boilerplate: Create React App mit Eject
  • Utility-Bibliothek: JavaScript ES6 plus Lodash oder Ramda
  • Styling: CSS Modules oder Styled Components
  • Asynchrone Requests: Fetch oder Axios
  • Higher Order Components: möglich plus optional Recompose
  • Formatierung: Prettier
  • Type Checking: keins oder Flow
  • State Management: lokale States und in Ausnahmefällen Redux
  • Routing: React Router
  • Authentifizierung: Firebase
  • Datenbank: Firebase
  • UI-Komponenten: keine oder Semantic UI

Große Anwendungen

  • Boilerplate: Create React App mit Eject oder eigenes Boilerplate-Projekt
  • Utility-Bibliothek: JavaScript ES6 plus Lodash oder Ramda
  • Styling: CSS Modules oder Styled Components
  • Asynchrone Requests: Axios
  • Higher Order Components: möglich plus optional Recompose
  • Formatierung: Prettier
  • Type Checking: Flow
  • State Management: lokaler State und Redux oder MobX
  • Routing: React Router
  • Authentifizierung: Lösung mit eigenem Express-/hapi-/Koa-Node.js-Server mit Passport
  • Datenbank: Lösung mit eigenem Express-/hapi/Koa-Node.js-Server mit einer SQL- oder NoSQL-Datenbank
  • UI-Komponente: Semantic UI oder eigene Implementierung von UI-Komponenten

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -