Share
In der heutigen Welt der Javascript-Anwendungsframeworks ist die Designphilosophie der entscheidende Differenzierungsfaktor. Wenn Sie die gängigen JS-Frameworks wie EmberJS, AngularJS, Backbone, Knockout usw. vergleichen, werden Sie mit Sicherheit Unterschiede in ihren Abstraktionen, Denkmodellen und natürlich in der Terminologie feststellen. Dies ist eine direkte Folge der zugrunde liegenden Designphilosophie. Im Prinzip tun sie jedoch alle eine Sache: Sie extrahieren das DOM so, dass Sie nicht direkt mit HTML-Elementen arbeiten.
Ich persönlich denke, dass ein Rahmen interessant wird, wenn er eine Reihe von Abstraktionen bietet, die eine andere Denkweise ermöglichen. Reagieren Sie in diesem Aspekt: Das neue JS-Framework der Leute von Facebook zwingt Sie (bis zu einem gewissen Grad) dazu, wie Sie die Benutzeroberfläche und die Interaktionen Ihrer Anwendung zerlegen. Mit Version 0.4.1 (zum Zeitpunkt der Veröffentlichung) ist React ein überraschend einfaches und dennoch effektives Modell für die Erstellung von JS-Apps, das einen reizvollen Cocktail der anderen Art kombiniert.
In diesem Artikel werden wir die Bausteine von React untersuchen und einen Denkstil annehmen, der auf den ersten Blick kontrapunktisch erscheint. Aber wie die React-Docs sagen: "Gib es fünf Minuten" und dann wirst du sehen, wie dieser Ansatz natürlicher wird.
Die Geschichte von React begann innerhalb der Grenzen von Facebook, wo es für eine Weile gebraut wurde. Nachdem sie einen stabilen Zustand erreicht hatten, entschieden sich die Entwickler vor ein paar Monaten für Open-Source. Interessanterweise wird die Instagram-Website auch vom React Framework unterstützt.
React nähert sich dem DOM-Abstraktionsproblem mit einer etwas anderen Einstellung. Um zu verstehen, wie das anders ist, können wir die Techniken, die von den zuvor erwähnten Frameworks übernommen wurden, schnell überblicken.
Das MVC (Model-View-Controller) -Designmuster ist von grundlegender Bedeutung für die UI-Entwicklung, nicht nur in Web-Apps, sondern auch in Front-End-Anwendungen auf jeder Plattform. Bei Web-Apps ist das DOM die physische Darstellung einer Ansicht. Das DOM selbst wird aus einer textuellen HTML-Vorlage generiert, die aus einer anderen Datei, einem anderen Skriptblock oder einer vorkompilierten Vorlagenfunktion abgerufen wird. Das Aussicht ist eine Entität, die die Textvorlage als DOM-Fragment zum Leben erweckt. Außerdem werden Event-Handler eingerichtet und die DOM-Baumstruktur im Rahmen des Lebenszyklus bearbeitet.
Für die Aussicht Um nützlich zu sein, muss es einige Daten anzeigen und möglicherweise eine Benutzerinteraktion ermöglichen. Die Daten sind die Modell, die aus einer Datenquelle stammt (Datenbank, Webservice, lokaler Speicher usw.). Frameworks bieten die Möglichkeit, die Daten an die Ansicht zu "binden", sodass Änderungen in den Daten automatisch in den Änderungen der Ansicht übernommen werden. Dieser automatische Vorgang wird aufgerufen Datenbindung und es gibt APIs / Techniken, um dies so nahtlos wie möglich zu gestalten.
Die MVC - Triade wird durch die Regler, das greift die Aussicht und das Modell und orchestriert den Datenfluss (Modell) in die Aussicht und Benutzerereignisse aus dem Aussicht, möglicherweise zu Änderungen in der Modell.
Frameworks, die automatisch den Datenfluss zwischen Ansicht und Modell verarbeiten, verwalten eine interne Ereignisschleife. Diese Ereignisschleife wird benötigt, um bestimmte Benutzerereignisse, Datenänderungsereignisse, externe Auslöser usw. zu überwachen und dann festzustellen, ob sich Änderungen gegenüber dem vorherigen Lauf der Schleife ergeben. Bei Änderungen an beiden Enden (Ansicht oder Modell) stellt das Framework sicher, dass beide wieder synchronisiert werden.
Mit React gewinnt der View-Teil der MVC-Triade an Bedeutung und wird in eine Einheit namens the gerollt Komponente. Die Komponente verwaltet einen unveränderlichen Eigenschaftsbeutel Requisiten, und ein Zustand Dies stellt den benutzergesteuerten Status der Benutzeroberfläche dar. Der View-Generierungsteil des Komponente ist ziemlich interessant und möglicherweise der Grund, warum React sich von anderen Frameworks abhebt. Anstatt ein physisches DOM direkt aus einer Vorlagendatei / einem Skript / einer Funktion zu erstellen, können Sie das Komponente generiert ein Zwischen-DOM, das für das echte HTML-DOM ein Ersatzteil ist. In einem weiteren Schritt wird dieses Zwischen-DOM in das echte HTML-DOM übersetzt.
Als Teil der DOM-Zwischengenerierung wird der Komponente fügt auch Ereignisbehandlungsroutinen hinzu und bindet die darin enthaltenen Daten Requisiten und Zustand.
Wenn die Idee eines Intermediate-DOM ein wenig fremd klingt, seien Sie nicht zu beunruhigt. Diese Strategie wurde bereits von Sprachlaufzeiten (auch als virtuelle Maschinen bezeichnet) für interpretierte Sprachen angenommen. Unsere eigene JavaScript-Laufzeit erzeugt zunächst eine Zwischendarstellung, bevor der native Code ausgespuckt wird. Dies gilt auch für andere VM-basierte Sprachen wie Java, C #, Ruby, Python usw..
Reagiert diese Strategie geschickt, um ein Zwischen-DOM zu erstellen, bevor das endgültige HTML-DOM erstellt wird. Das Intermediate-DOM ist nur ein JavaScript-Objektdiagramm und wird nicht direkt gerendert. Es gibt einen Übersetzungsschritt, der das echte DOM erstellt. Dies ist die zugrunde liegende Technik, mit der React schnelle DOM-Manipulationen durchführt.
Um ein besseres Bild davon zu bekommen, wie React alles funktionieren lässt, tauchen wir ein wenig tiefer. beginnend mit dem Komponente. Die Komponente ist der Hauptbaustein in React. Sie können die Benutzeroberfläche Ihrer Anwendung erstellen, indem Sie eine Baumstruktur aus Komponenten zusammenstellen. Jede Komponente bietet eine Implementierung für die machen() Methode, bei der das Zwischen-DOM erstellt wird. Berufung React.renderComponent () auf der Wurzelkomponente führt rekursiv zum Komponentenbaum und zum Aufbau des Intermediate-DOM. Das Zwischen-DOM wird dann in das echte HTML-DOM konvertiert.
Da die Erstellung von Intermediate-DOMs ein integraler Bestandteil der Komponente ist, bietet React eine praktische XML-basierte Erweiterung für JavaScript (JSX), um den Komponentenbaum als eine Gruppe von XML-Knoten zu erstellen. Dies macht es einfacher, das DOM zu visualisieren und zu verstehen. JSX vereinfacht auch die Zuordnung von Ereignishandlern und Eigenschaften als XML-Attribute. Da JSX eine Erweiterungssprache ist, gibt es ein Tool (Befehlszeile und In-Browser), mit dem das endgültige JavaScript generiert wird. Ein JSX-XML-Knoten wird direkt einer Komponente zugeordnet. Es sei darauf hingewiesen, dass React unabhängig von JSX funktioniert und die Sprache JSX nur die Erstellung des Zwischen-DOMs erleichtert.
Das Core-React-Framework kann von der Website heruntergeladen werden. Darüber hinaus können Sie für die JSX → JS-Umwandlung entweder den In-Browser-JSXTransformer oder das Befehlszeilentool verwenden, das als reag-tools (über NPM installiert) bezeichnet wird. Zum Herunterladen benötigen Sie eine Installation von Node.js. Mit dem Befehlszeilentool können Sie die JSX-Dateien vorkompilieren und die Übersetzung im Browser vermeiden. Dies ist auf jeden Fall zu empfehlen, wenn Ihre JSX-Dateien groß sind oder viele.
In Ordnung, wir haben bisher viel Theorie gesehen und ich bin mir sicher, dass Sie es kaum erwarten können, echten Code zu sehen. Lassen Sie uns in unser erstes Beispiel eintauchen:
Accentsconagua
/ ** @jsx React.DOM * / var Simple = React.createClass (getInitialState: function () return count: 0;, handleMouseDown: function () alert ('Mir wurde gesagt:' + this.) props.message); this.setState (count: this.state.count + 1);, render: function () return Gib mir die Nachricht! Nachricht übermittelt this.state.count mal) ; ); React.renderComponent ( Der obige Code deckt zwar einen einfachen Teil der Reakt-Oberfläche ab:
React.createClass und Übergabe eines Objekts, das einige Kernfunktionen implementiert. Der wichtigste ist der machen(), was das intermediäre DOM erzeugt.onMouseDown = this.handleClick) und Kindknoten (this.state.count). Mit der -Syntax verknüpfte Ereignishandler werden automatisch an die Instanz der Komponente gebunden. Somit diese In der Event-Handler-Funktion wird auf die Komponenteninstanz verwiesen. Der Kommentar in der ersten Zeile / ** @jsx React.DOM * / ist ein Stichwort für den JSX-Transformer, um die Übersetzung in JS durchzuführen. Ohne diese Kommentarzeile findet keine Übersetzung statt. Wir können das Befehlszeilentool ausführen (jsx) im Überwachungsmodus und automatische Kompilierung von JSX → JS. Die Quelldateien sind in / src Ordner und die Ausgabe wird in generiert /bauen.
jsx --watch src / build /
Hier ist die generierte JS-Datei:
/ ** @jsx React.DOM * / var Simple = React.createClass (displayName: 'Simple', getInitialState: function () return count: 0;, handleMouseDown: function () alert ('ich war sagte: '+ this.props.message); this.setState (count: this.state.count + 1);, render: function () return React.DOM.div (null, React.DOM.div (className: "clicker", onMouseDown: this.handleMouseDown, "Geben Sie mir die Nachricht!"), React.DOM.div (className: "message", "Nachricht übermittelt", React.DOM.span ( className: "count", this.state.count), "time (s)"));); React.renderComponent (Simple (message: "Keep it Simple"), document.body); Beachten Sie, wie die und Tags zuordnen zu Instanzen von React.DOM.div und React.DOM.span.
handleMouseDown, wir machen davon Gebrauch this.props um das zu lesen Botschaft Eigenschaft, die übergeben wurde. Wir setzen die Botschaft in der letzten Zeile des Snippets, im Aufruf von React.renderComponent () wo wir das schaffen this.props ist das Speichern der Daten, die an die Komponente übergeben wurden. Es wird als unveränderlich betrachtet, und nur eine übergeordnete Komponente darf Änderungen vornehmen und diese in der Komponentenstruktur weitergeben.handleMouseDown Wir setzen auch einige Benutzerstatus mit this.setState () um zu sehen, wie oft die Nachricht angezeigt wurde. Sie werden feststellen, dass wir verwenden Dieser Staat in dem machen() Methode. Immer wenn du anrufst setState (), React löst auch das aus machen() Methode, um das DOM synchron zu halten. Außerdem React.renderComponent (), setState () ist eine andere Möglichkeit, eine visuelle Aktualisierung zu erzwingen.Die Ereignisse, die im Zwischen-DOM angezeigt werden, wie z onMouseDown, fungieren auch als Indirektionsebene, bevor sie auf das Real-DOM eingestellt werden. Diese Ereignisse werden daher als bezeichnet Synthetische Ereignisse. React übernimmt die Event-Delegation, eine bekannte Technik, und fügt Ereignisse nur auf der Stammebene des Real-DOMs hinzu. Daher gibt es nur einen echten Event-Handler auf dem Real-DOM. Zusätzlich bieten diese synthetischen Ereignisse eine gewisse Konsistenz, indem Browser- und Elementunterschiede ausgeblendet werden.
Durch die Kombination von DOM-Zwischenereignissen und synthetischen Ereignissen können Sie UIs einheitlich und konsistent für verschiedene Browser und sogar Geräte definieren.
Komponenten im React-Framework haben einen bestimmten Lebenszyklus und verkörpern eine Zustandsmaschine mit drei verschiedenen Zuständen.
Die Komponente erwacht zum Leben Montiert. Beim Mounten wird ein Render-Pass durchlaufen, der den Komponentenbaum (Intermediate-DOM) generiert. Dieser Baum wird konvertiert und in einen Containerknoten des realen DOMs platziert. Dies ist ein direktes Ergebnis der Aufforderung an React.renderComponent ().
Einmal montiert, bleibt die Komponente im Aktualisieren Zustand. Eine Komponente wird aktualisiert, wenn Sie den Status mit ändern setState () oder Requisiten wechseln mit setProps (). Dies führt wiederum zu Anrufen machen(), was das DOM mit den Daten synchronisiert (Requisiten + Zustand). Zwischen nachfolgenden Aktualisierungen berechnet React das Delta zwischen dem vorherigen Komponentenbaum und dem neu generierten Baum. Dies ist ein stark optimierter Schritt (und ein Flaggschiff-Feature), der die Manipulation des realen DOM minimiert.
Der Endzustand ist Unmontiert. Dies geschieht, wenn Sie explizit anrufen React.unmountAndReleaseReactRootNode () oder automatisch, wenn eine Komponente ein untergeordnetes Element war, das nicht mehr in a generiert wurde machen() Anruf. Meistens müssen Sie sich nicht damit auseinandersetzen und lassen React einfach das Richtige tun.
Jetzt wäre es eine große Neuigkeit gewesen, wenn React Ihnen nicht gesagt hätte, wann es zwischen den beiden wechselte Mounted-Update-Unmounted Zustände. Zum Glück ist dies nicht der Fall und es gibt Haken, die Sie außer Kraft setzen können, um sich über Änderungen des Lebenszyklus zu informieren. Die Namen sprechen für sich:
getInitialState (): bereiten Sie den Anfangszustand der Komponente vorcomponentWillMount ()componentDidMount ()componentWillReceiveProps ()shouldComponentUpdate (): nützlich, wenn Sie steuern möchten, wann ein Rendering übersprungen werden soll. componentWillUpdate ()machen()componentDidUpdate ()componentWillUnmount ()Das KomponenteWill * Methoden werden vor dem Zustandswechsel und dem Aufruf aufgerufen componentDid * Methoden werden danach aufgerufen.
Innerhalb eines Komponentenbaums sollten Daten immer nach unten fließen. Eine übergeordnete Komponente sollte das festlegen Requisiten einer untergeordneten Komponente, um alle Daten vom übergeordneten zum untergeordneten Element zu übergeben. Dies wird als bezeichnet Inhaberin Paar. Auf der anderen Seite werden Benutzerereignisse (Maus, Tastatur, Berührungen) immer vom untergeordneten Element bis zur Wurzelkomponente angezeigt, es sei denn, sie werden dazwischen behandelt.
Wenn Sie das Zwischen-DOM in erstellen machen(), Sie können auch eine zuweisen ref Eigenschaft an eine untergeordnete Komponente. Sie können dann vom übergeordneten Element aus auf das Element zugreifen refs Eigentum. Dies ist im folgenden Ausschnitt dargestellt.
render: function () // Setzt einen Ref-Returnthis.state.count; handleMouseDown: function () // Verwenden Sie den ref console.log (this.refs.counter.innerHTML); ,
Als Teil der Komponentenmetadaten können Sie den Anfangsstatus festlegen (getInitialState ()), was wir zuvor in den Lebenszyklusmethoden gesehen haben. Sie können auch die Standardwerte der Requisiten mit festlegen getDefaultProps () und auch einige Validierungsregeln für diese Requisiten festlegen eigenschaften. Die Dokumente geben einen schönen Überblick über die verschiedenen Arten von Validierungen (Typprüfungen, erforderliche Prüfungen usw.), die Sie durchführen können.
React unterstützt auch das Konzept von a Mixin um wiederverwendbare Teile des Verhaltens zu extrahieren, die in unterschiedliche Komponenten injiziert werden können. Sie können die Mixins mit der Mixins Eigenschaft einer Komponente.
Lassen Sie uns nun real werden und eine umfassendere Komponente erstellen, die diese Funktionen verwendet.
In diesem Beispiel erstellen wir einen Editor, der eine einfache DSL (Domain Specific Language) zum Erstellen von Formen akzeptiert. Während der Eingabe sehen Sie den entsprechenden Ausgang auf der Seite und geben Ihnen Live-Feedback.
Mit dem DSL können Sie drei Arten von Formen erstellen: Ellipse, Rechteck und Text. Jede Form wird in einer separaten Zeile zusammen mit einer Reihe von Styling-Eigenschaften angegeben. Die Syntax ist unkompliziert und lehnt sich etwas an CSS an. Um eine Zeile zu analysieren, verwenden wir eine Regex, die wie folgt aussieht:
var shapeRegex = / (rect | ellipse | text) (\ s [a-z] +: \ s [a-z0-9] +;) * / i;
Als Beispiel beschreiben die folgenden Zeilen zwei Rechtecke und eine Textbezeichnung.
// Text des Reaktorkennzeichens: Reagieren; Farbe: # 00D8FF; Schriftgröße: 48px; Text-Schatten: 1px 1px 3px # 555; Polsterung: 10px; links: 100px; oben: 100px; // linkes Logo rect Hintergrund: url (react.png) no-repeat; Grenze: keine; Breite: 38; Höhe: 38; links: 60px; oben: 120px; // rechtes logo rect background: url (react.png) no-repeat; Grenze: keine; Breite: 38; Höhe: 38; links: 250px; oben: 120px;
… Die folgende Ausgabe erzeugen:
Okay, lasst uns diesen Editor bauen. Wir beginnen mit der HTML-Datei (index.html), wo wir das Markup der obersten Ebene einfügen und die Bibliotheken und Anwendungsskripts einschließen. Ich zeige hier nur die relevanten Teile:
Im obigen Ausschnitt wird der Container div hält unser von React generiertes DOM. Unsere Applikationsskripte sind aus der /bauen Verzeichnis. Wir verwenden JSX in unseren Komponenten und in der Befehlszeilenüberwachung (jsx), setzt die konvertierten JS-Dateien in /bauen. Beachten Sie, dass dieser Watcher-Befehl Teil von ist reaktionswerkzeuge NPM-Modul.
jsx --watch src / build /
Der Editor ist in eine Reihe von Komponenten unterteilt, die nachfolgend aufgeführt sind:
Mixins Eigentum.Die Beziehung dieser Entitäten wird im kommentierten Komponentenbaum angezeigt:
Schauen wir uns die Implementierung einiger dieser Komponenten an, beginnend mit dem ShapeEditor.
/ ** @jsx React.DOM * / var ShapeEditor = React.createClass (componentWillMount: function () this._parser = neuer ShapeParser ();, getInitialState: function () return text: ";, render: function () var shape = this._parser.parse (this.state.text); var tree = (); Baum zurückkehren; , handleTextChange: function (event) this.setState (text: event.target.value);
Wie der Name vermuten lässt, bietet der ShapeEditor die Bearbeitungserfahrung durch Generieren des und das Live-Feedback zur bei Änderung Ereignis (Ereignisse in React werden immer mit dem Kamelfall bezeichnet) auf der und bei jeder Änderung setzt das Text Eigenschaft der Komponente Zustand. Wie bereits erwähnt, wann immer Sie den Status mit festlegen setState (), Render wird automatisch aufgerufen. In diesem Fall ist die machen() Der ShapeEditor wird aufgerufen, wo wir den Text aus dem Status analysieren und die Shapes neu erstellen. Beachten Sie, dass wir mit einem Anfangszustand von leerem Text beginnen, der in der gesetzt ist getInitialState () Haken.
Um den Text in eine Reihe von Formen zu parsen, verwenden wir eine Instanz von ShapeParser. Ich habe die Details des Parsers ausgelassen, um die Diskussion auf React zu konzentrieren. Die Parser-Instanz wird in erstellt componentWillMount () Haken. Dies wird kurz vor dem Mounten der Komponente aufgerufen und ist ein guter Ort für Initialisierungen, bevor das erste Rendern ausgeführt wird.
Es wird generell empfohlen, dass Sie alle Ihre komplexen Abläufe durch die machen() Methode. Event-Handler setzen nur den Zustand während machen() ist die Drehscheibe für all Ihre Kernlogik.
Das ShapeEditor nutzt diese Idee, um das Parsing innerhalb von machen() und leitet die erkannten Formen durch das Setzen von weiter Formen Eigentum der ShapeCanvas. So fließen die Daten vom Eigentümer in den Komponentenbaum (ShapeEditor) an den Eigentümer (ShapeCanvas).
Eine letzte Bemerkung hier ist, dass wir den Kommentar der ersten Zeile haben, um die Übersetzung von JSX → JS anzuzeigen.
Als Nächstes fahren wir mit den Komponenten ShapeCanvas und Ellipse, Rechteck und Text fort.
p> Die ShapeCanvas ist ziemlich einfach mit seiner Kernverantwortung, das jeweilige zu erzeugen this.props.shapes). Für jede Form übergeben wir die geparsten Eigenschaften mit dem Attributausdruck: properties = shape.properties.
/ ** @jsx React.DOM * / var ShapeCanvas = React.createClass (getDefaultProps: function () return shape: [];), render: function () var self = this; var shapeTree =this.props.shapes.map (Funktion (en) return self._createShape (s);); var noTree =Keine Formen gefunden; this.props.shapes.length> 0 zurückgeben? shapeTree: noTree; , _createShape: function (shape) return this._shapeMap [shape.type] (shape); , _shapeMap: ellipse: function (shape) return; , rect: Funktion (Form) Zurückkehren ; , Text: Funktion (Form) Zurückkehren ; );
Eine Besonderheit besteht darin, dass unser Komponentenbaum nicht statisch ist, wie wir es in ShapeEditor haben. Stattdessen wird es dynamisch generiert, indem die übergebenen Formen überlaufen werden. Wir zeigen auch die "Keine Formen gefunden" Nachricht, wenn nichts angezeigt wird.
Alle Formen haben eine ähnliche Struktur und unterscheiden sich nur in der Gestaltung. Sie nutzen auch die ShapePropertyMixin um die Stilgeneration zu handhaben.
Hier ist Ellipse:
/ ** @jsx React.DOM * / var Ellipse = React.createClass (mixins: [ShapePropertyMixin]], render: function () var style = this.extractStyle (true); style ['border-radius'] = ' 50% 50% "Rendite ; );
Die Implementierung für extractStyle () wird vom bereitgestellt ShapePropertyMixin.
Die Rechteckkomponente folgt natürlich auch ohne Grenzradius Stil. Die Textkomponente hat eine zusätzliche Eigenschaft, die aufgerufen wird Wert was den inneren Text für die .
Hier ist Text, um dies klar zu machen:
/ ** @jsx React.DOM * / var Text = React.createClass (mixins: [ShapePropertyMixin]], render: function () var style = this.extractStyle (false); returnthis.props.properties.value; );
app.js Hier bringen wir alles zusammen. Hier rendern wir die Wurzelkomponente, die ShapeEditor und bieten auch Unterstützung zum Wechseln zwischen einigen Beispielformen. Wenn Sie ein anderes Beispiel aus der Dropdown-Liste auswählen, wird ein vordefinierter Text in das Textfeld geladen ShapeEditor und verursachen die ShapeCanvas aktualisieren. Das passiert im readShapes () Methode.
/ ** @jsx React.DOM * / var shapeEditor =; React.renderComponent (shapeEditor, document.getElementsByClassName ('container') [0]); Funktion readShapes () var file = $ ('. shapes-picker'). val (), text = SHAPES [file] || "; $ ('. editor'). val (text); shapeEditor.setState ( text: text); // erzwinge ein Rendering $ ('. shapes picker'). change (readShapes); readShapes (); // Ladezeit
Um die kreative Seite zu trainieren, hier ein Roboter, der mit dem Form-Editor erstellt wurde:
Puh! Dies ist ein ziemlich langer Artikel, und wenn Sie diesen Punkt erreicht haben, sollten Sie ein Erfolgserlebnis haben!
Wir haben hier viele Konzepte ausprobiert: die integrale Rolle von Komponenten im Framework, die Verwendung von JSX zur einfachen Beschreibung eines Komponentenbaums (aka Intermediate-DOM), verschiedene Haken zum Einfügen in den Komponentenlebenszyklus, die Verwendung von Zustand und Requisiten Um den Rendervorgang voranzutreiben, verwenden Sie Mixins, um wiederverwendbares Verhalten herauszufiltern, und schließlich all dies zusammen mit dem Shape-Editor-Beispiel zusammenfassen.
Ich hoffe, dieser Artikel gibt Ihnen genug Schub, um ein paar React-Apps für sich selbst zu erstellen. Um Ihre Erkundung fortzusetzen, finden Sie hier einige nützliche Links:
