Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ReactJS lernen

React Developer Tools

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Debugging ist eine wiederkehrende Aufgabe während der Entwicklung. Die React Developer Tools helfen Ihnen dabei mit speziellen Ansichten und Funktionen!
04:59

Transkript

Im alltäglichen Umgang mit React, insbesondere beim Debuggen größerer Anwendungen, wird man öfters einen Blick in das DOM werfen müssen. Gerade hierbei wäre es aber von großem Vorteil, erkennen zu können, an welcher Stelle sich bestimmte React-Komponenten befinden, oder welche Props beziehungsweise welchen State sie zur Laufzeit haben. Genau für diese Fälle hat Facebook die React Developer Tools entwickelt. Diese sind sowohl für Chrome als auch für Firefox erhältlich. Für das Beispiel Chrome müssen wir einfach nur kurz in den Chrome Web Store gehen. Schon haben wir die React Developer Tools gefunden. Einmal hinzufügen, das habe ich bei mir schon gemacht. Und spätestens nach einem Neustart des Browsers sind die Developer Tools auch für Sie auf allen Ihren Seiten verfügbar. Wir können den Store wieder schließen. Und wir sind zurück in unserem Projekt. Einmal mit F12 die Chrome Developer Tools öffnen. Und schon sehen wir, dass wir hier einen neuen Reiter bekommen haben, nämlich React. Und wir haben genau das bekommen, was wir haben wollten. Wir sehen hier eine Ansicht unseres DOM, und zwar gemischt, einerseits aus unseren React-Komponenten zusammengesetzt, wie zum Beispiel der App oder den drei Products, andererseits aber auch mit den normalen DOM-Elementen. Das heißt, wir können einerseits wie gewohnt das DOM inspizieren, alle Elemente durchschauen. Oder aber wir klicken auf eine spezielle Komponente, wie hier zum Beispiel unser erstes Product. Und wir sehen die Props, description, nr, title und auch den aktuellen State. Wir können diese Eigenschaften sogar verändern und sehen was passiert. Wenn wir jetzt beispielsweise watched auf true setzen, würden wir erwarten, dass der Button-Text sich ändert. Der Button hat sich hier geändert. Gleichzeitig ist auch dieser Text erschienen. Das heißt, die Änderung dieses Zustands hat ganz normal ein setState ausgelöst und den kompletten Rendervorgang neu gestartet. Wir können in dieser Ansicht sogar die Props verändern. Löschen wir mal ein Wort heraus. Und auch hier sehen wir die Änderung. Wir können in diesem DOM sogar nach Ausdrücken suchen. Lassen Sie uns mal alle Zeilen anzeigen, in denen das Wort "product" vorkommt. Und wir sehen sowohl unsere React-Komponenten werden angezeigt, als auch die normalen DOM-Elemente, die "product" im Namen haben, oder in denen "product" in irgendeiner Form vorkommt. Wenn wir gerade eine Komponente nicht finden oder nicht sehen, ist das kein Problem. Wir können einfach zu dieser Komponente herunterscrollen. Scroll to Node. Und schon sehen wir diese Komponente komplett. Vielleicht ist uns aber auch gerade eine komische Implementierung aufgefallen, ein Fehlverhalten, wir wollen das genauer überprüfen. Dann können wir einfach direkt von hier aus in den Code der Komponente springen, Show Source. Und schon sind wir direkt im Constructor unseres Products gelandet. Das Ganze sieht vielleicht ein bisschen ungewohnt aus, weil wir hier nicht direkt unseren selbst geschriebenen ES6-Code vor uns sehen, sondern den durch Babel übersetzten beziehungsweise transpilierten Code in normalem JavaScript. Aber bei genauem Hinsehen kann man doch gewisse Punkte ausfindig machen. Beispielsweise sehen wir hier, dass die Methode _handleWatchClick beginnt. Im Code hier beispielsweise zu sehen. Dieser enthält ein setState. Wobei der Status watched negiert wird. Und genau das sehen wir hier auch eins zu eins. this.setState, watched, auf Negation von this.state.watched. Jetzt könnten wir beispielsweise in dieser Zeile einen Breakpoint setzen. Und sobald wir hier Watch durchführen würden, hält der Code hier an und wir können wie gewohnt debuggen. Wir können sogar, sobald wir hier in der React-Ansicht eine Komponente ausgewählt haben, in diesem Fall wäre das das untere Product, wie man hier sieht über $r, das ist eine Variable, die dieses Addon setzt, in der Konsole auf diese Komponente zugreifen und Operationen darauf ausführen. Beispielsweise möchten wir vielleicht manuell den Status ändern. Dann können wir einfach mit $r auf diese Komponente zugreifen. setState wird mir bereits von Chrome selber angeboten. Und jetzt kann ich beispielsweise hier den Zustand watched auf true setzen. Und wir sehen, der Zustand hat sich in der Komponente wirklich verändert. In diesem Video haben Sie gesehen, wie Sie die React Developer Tools einsetzen können, um sich den alltäglichen Umgang mit React zu vereinfachen. Sie wissen, dass Sie mit den Tools eine komponentenorientierte Ansicht des DOM anzeigen lassen können, und dass Sie insbesondere Props und State auslesen und verändern 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!