Für die moderne Webentwicklung stehen unglaublich viele Tools und Ressourcen zur Auswahl. Das Framework React wurde von Facebook entwickelt und unter anderem für die Facebook-App verwendet. Es wird seit Jahren immer populärer. Frameworks wie React vereinfachen die Entwicklung drastisch, ähnliche Frameworks sind beispielsweise Angular von Google und Vue. Erfahren Sie jetzt mehr über React und die React Developer Tools.
Was ist React?
Die JavaScript-Bibliothek React hilft bei der Entwicklung performanter User-Interfaces.
React ist eine JavaScript-Bibliothek für die Frontend-Entwicklung von Webanwendungen. Unter Frontend versteht man die für Seitenbesucher sichtbaren Teile einer Website. Facebook hatte die Bibliothek ursprünglich als interne Lösung entwickelt und erstmals 2011 verwendet. Seit 2013 ist React als Open-Source-Projekt verfügbar. Das Ziel ist die Gestaltung möglichst performanter Oberflächen.
Hinweis: Wenn Sie React beherrschen, können Sie auch mit React Native arbeiten und damit native Apps für Android und iOS programmieren.
Das klassische Code-Beispiel „HelloWorld” sieht in React so aus:
ReactDOM.render(
Hello, world!
,
document.getElementById('root')
);
Der Online-Editor Codepen
Tipp: Den Code können Sie auf der Website Codepen bearbeiten und die Auswirkungen direkt nachvollziehen.
Was sind die Stärken von React?
Die React-Bibliothek eignet sich hervorragend für interaktive Apps und Applikationen mit nur einer Seite (Single Page Applications, SPA). Der Istzustand einer Anwendung lässt sich damit komfortabel verwalten. Mit React verwenden und bauen Sie Komponenten, die zusammen die App oder Website ergeben. Andere JavaScript-Bibliotheken und -Frameworks sind ebenfalls komponentenbasiert. Ein Button ist eine Komponente, ebenso wie eine Liste oder ein Formular. React lässt sich flexibel einsetzen.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Was sind React Developer Tools?
React Developer Tools ist als Erweiterung für Chrome und Firefox erhältlich.
React Developer Tools steht aktuell in der Version 4.7.0 zum Herunterladen bereit. Sie können sie als Add-on für Chrome und Firefox installieren.
Mit den Tools inspizieren Sie Hierarchien der React-Komponenten. Den Developer-Tools im Browser werden die Reiter „Components“ und „Profiler“ hinzugefügt. Der Components-Reiter zeigt die gerenderten Komponenten und Subkomponenten an. Durch Klick auf eine Komponente sehen Sie den aktuellen Status und können direkt Änderungen vornehmen. Der Profiler-Reiter ermöglicht die Aufzeichnung zur Performance.
Tipp: Mit dem React-Devtools-Tutorial lernen Sie in einem Fake-Web-Browser die ersten Schritte.
Neuerungen ab Version 4
Die seit August 2019 erhältliche Version 4 hat zahlreiche Neuerungen mitgebracht.
- Warnungen und Fehlermeldungen haben jetzt sogenannte Component Stack Traces angehängt. So sehen Sie, wo der Fehler genau passiert ist.
- Die Darstellung der Komponentenstruktur ist überarbeitet und lässt sich besser filtern.
- Die „Rendered by“-Liste zeigt an, woher die Eigenschaften eines Elements kommen. Der „Owners Tree“ stellt Elemente in einer Liste dar, die von einer höheren Komponente (Higher Order Components, HOC) gerendert werden. Die Render-Methode eines Elements lässt sich so leicht ermitteln.
- Neu ist außerdem die Unterstützung von React Hooks. Arrays und Objekte können aufgeklappt und die Werte bearbeitet werden.
Was sind Redux Devtools?
Mit den Redux Devtools debuggen Sie Statusänderungen in Applikationen.
Mit Redux verwalten Sie den Status einer Anwendung. Zum „State“ gehören Information wie der Name und ein Profilbild eines angemeldeten Anwenders. Der „State“ ist auch dafür zuständig, ob zum Beispiel ein modularer Dialog geöffnet oder geschlossen wird.
Zustand und die Zustandsänderungen machen Anwendungen kompliziert. Mit Redux behalten Sie besser die Übersicht. Zum Lernen gibt es eine Reihe React-Redux-Tutorials und Anleitungen zum Erstellen eigener React-Redux-Komponenten.
Mit der Redux-Devtools-Erweiterung für Chrome und Firefox können Sie in der Zeit vor- und zurückspringen. Die Devtools speichern alle Aktionen und Zustandsänderungen und können diese rückgängig machen. Dafür scrollen Sie im Slider-Mode durch die Zeit.
Ein weiterer Vorteil: Es besteht die Möglichkeit, den Status jederzeit in JSON zu exportieren und als Datei abzuspeichern. Genauso einfach lässt sich ein Status importieren. Export und Import von Statuszuständen vereinfachen die Zusammenarbeit mit anderen Entwicklern und helfen besonders bei der Suche nach Fehlern. Anwendungen haben schnell Hunderte von Status-Zuständen – mit Redux behalten Sie die Übersicht.
Über React Developer Tools – Zusammenfassung
React zählt zu den populärsten JavaScript-Bibliotheken und eignet sich besonders gut für die Entwicklung performanter Oberflächen. Die React Developer Tools als Browsererweiterung für Chrome und Firefox helfen bei der Analyse und beim Debuggen. Sie sind Pflicht für React-Entwickler. Redux Devtools dienen der Statusverwaltung einer Webanwendung, sodass Sie bei den vielen Zustandsänderungen den Überblick behalten.
Titelmotiv: Unsplash
- Ihr Werbevideo als Kundenmagnet: Aufmerksamkeit und Markentreue durch zielgruppenorientierten Content anziehen - 18. März 2025
- Parallax-Scrolling: dynamische Effekte für beeindruckendes Webdesign - 11. März 2025
- Durch Erklärvideos Kunden gewinnen: Wie Sie Ihrer Zielgruppe erfolgreich Lösungswege vermitteln - 6. März 2025