ReactJS lernen

Auf externe Bibliotheken zugreifen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es kann vorkommen, dass Sie einmal auf Frontend-Bibliotheken zurückgreifen müssen, die nicht für React geschrieben wurden. Andreas Gerö erklärt Ihnen, wie Sie dieses Problem mit einer Hilfsklasse umschiffen.
06:52

Transkript

Wenn Sie an einem Projekt arbeiten, bei dem Sie auf bestimmte externe Bibliotheken angewiesen sind, kann es vorkommen, dass diese Bibliotheken keine direkte Unterstützung für React implementieren. In diesem Fall bietet es sich an, eine Wrapper-Komponente zu entwickeln, die von außen wie eine normale React-Komponente zu benutzen ist und gleichzeitig die API der externen Bibliothek implementiert. In diesem Video werden Sie anhand einer Bibliothek zur grafischen Darstellung von JSON-Objekten lernen, wie eine solche Wrapper-Klasse aufgebaut ist. Für dieses Beispiel verwenden wir die Bibliothek json formatter-js, also "json minus formatter minus js". Wir müssen das einmal initial per Kommandozeile mit dem Befehl npm install --save json-formatter-js installieren und anschließend in unsere HTML-Seite einbinden so wie es hier steht. "include bundle.js from dist folder in your page." Das heißt also, wenn wir in den Ordner node_modules blicken, in dem alle unsere Abhängigkeiten aus npm installiert wurden, finden wir json-formatter-js. Hier gibt es einen dist-Ordner mit bundle.js. Genau diese Datei brauchen wir. Dazu brauchen wir nur eine kleine Anpassung in unserem Gruntfile, nämlich diese Zeile. Und zwar befinden wir uns gerade im copy-Task. Hier benutzen wir als current working directory, cwd, den Ordner ./node_modules/json-formatter-js/dist. Als Source-Datei die bundle.js. Und das Ganze möchten wir in den #{OUTPUT-FOLDER}/js, also out/js kopieren. Wenn das Ganze dann erstmal im richtigen Ordner gelandet ist, das wäre also hier, out/js, müssen wir das noch in unsere HTML-Seite einbinden. Das heißt, relativ zur HTML-Seite liegt dieses Skript dann in js/bundle.js. Dazu können wir einfach ein neues script-Tag einführen. Verweisen auf js/bundle.js. Und schon haben wir alle Vorbereitungen getroffen. Das heißt, wir können direkt damit beginnen, unsere Wrapper-Klasse zusammenzubauen. Diese hat eine sehr einfache Struktur. Wir können es bei einem leeren constructor belassen. Im Endeffekt benötigen wir nur eine Prop, nämlich data, die Daten, die wir später im JSON Formatter anzeigen möchten. Und die render-Methode ist auch extrem übersichtlich. Wir haben hier erstmal ein div mit ein bisschen Styling. Das ist aber in dem Fall gar nicht relevant. Das eigentlich Wichtige ist dieses hier. Das ist nämlich das div, in das später der JSON Formatter hineingerendert wird. Wenn wir uns kurz ansehen, wie der JSON Formatter benutzt wird, dann sehen wir auch, das ist ganz einfach. Hier wird einfach ein formatter definiert mit new JSONFormatter. In Klammern im Constructor geben wir die Daten mit, die wir später anzeigen möchten. Und danach muss auf diesem Formatter die render-Methode aufgerufen werden. Das, was hierbei rauskommt, wird in einen DOM-Node appended, in dem Fall mit appendChild. Das heißt, genau das können wir in unserer componentDidMount durchführen. Sie erinnern sich, in componentDidMount wurde das DOM bereits initial gerendert. Das heißt, wir können bereits darauf zugreifen. Und genau das tun wir hier über das spezielle ref-Attribut, ref="viewer". Das ref-Attribut ist in React ein spezielles Attribut. Mit ref können wir uns nämlich eine Referenz geben lassen, entweder auf die gerenderte Komponente, oder in diesem Fall auf das resultierende DOM-Node. Das heißt, wenn wir wieder zurück in die componentDidMount-Methode gehen, sehen wir die erste Zeile, tun wir genau das, was auch schon in der API-Beschreibung auf der Website steht. Wir nehmen unsere Daten, die wir aus this.props.data kriegen, Wir erstellen einen neuen JSONFormatter. Danach rufen wir formatter.render auf und erstellen uns das DOM-Element. Jetzt können wir über this.refs .viewer, das ist der Name, den wir hier unten vergeben haben, auf dieses div-Element zugreifen, und genau wie im Beispiel auf der Seite appendChild aufrufen und unser child hinzufügen. Das war es auch schon mit dem Grundgerüst dieser Wrapper-Klasse. Jetzt müssen wir das Ganze nur noch in unsere App.js einbinden. Das heißt, hier ist kein Product Listing mehr, sondern hier wird unser JSONViewer eingebunden, alles wie gewohnt. Wir importieren den JSONViewer aus dem gleichen Ordner. Und können hier wie gewohnt mit JSX-Schreibweise und Übergabe von Props, nämlich data={this.state.products} unsere Wrapper-Klasse initialisieren. Lassen Sie uns das Ganze mal ausprobieren. Wir lassen uns das Frontend von Babel zusammenstellen. Und wir aktualisieren mal. Und wir sehen tatsächlich, die Products werden jetzt in einer JSON-Ansicht angezeigt. Wir haben Metal Chair, Wooden Chair, und Oak Chair. Da wir mit unserer Wrapper-Komponente die Macht über diesen Teil des DOM aus der Hand gegeben haben und die Bibliothek json-formatter diesen Teil des DOM verwaltet, würde diese JSON-Formatter-Ansicht nicht auf Änderungen in unseren Daten reagieren. Das ist aber auch absolut kein Problem, denn wir müssen unseren JSONViewer nur um eine kleine Funktionalität erweitern. Ganz analog zu componentDidMount benutzen wir componentDidUpdate. Das heißt, wir sehen hier einfach nach, falls die aktuellen, also die neuen Daten, also dieses Array, was wir in dem Fall bekommen, sich von dem unterscheidet, was wir davor hatten, also prevProps.data, dann führen wir einfach den Prozess aus componentDidMount nochmal fast eins zu eins genauso aus. Das heißt, wir erstellen uns hier wieder einen neuen JSONFormatter mit den neuen Daten. Wir erstellen uns daraus mit formatter.render wieder ein neues DOM-Element. Und wir greifen wieder mit this.refs.viewer, diesmal aber mit .replaceChild auf unser div hier unten zu und fügen den neuen Formatter ein. Das heißt, wenn wir hier probieren, das erste Element zu entfernen: Passt auch, wunderbar, wurde aktualisiert. Mit diesem Video haben Sie gelernt, wie Sie mit externen Bibliotheken umgehen können, die nicht für React geschrieben wurden. Sie wissen nun, dass Sie mit dem ref-Attribut eine Referenz auf ein DOM-Element bekommen können, in das Sie andere Elemente hineinrendern können.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!