Buy now

Ultimativer Leitfaden zur React.js Einführung

React.js Einführung
Heiko von CodeFellows GmbH
2. Juli 2024

Dieser umfassende Leitfaden hilft Ihnen, React.js von Anfang an zu verstehen. Sie lernen, wie man moderne Webanwendungen mit React.js baut. React.js macht Ihre Benutzeroberflächen schnell, skalierbar und einfach zu verwenden.

React.js ist eine Front-End-Bibliothek, geschaffen von Jordan Walke bei Facebook im Jahr 2011. Es ist seit 2013 öffentlich zugänglich. Durch das In-Memory-Darstellen des DOMs macht React.js das Ändern von Daten schnell. So können Entwickler starke Anwendungen ermöglich1en.

In diesem Tutorial behandeln wir die React.js-Grundlagen wie JSX, Komponenten, State und Props. Die Entwicklung von dynamischen Webanwendungen wird mit diesem Wissen viel einfacher. Mit diesem Tutorial können Sie Ihre Fähigkeiten verbessern.

Wichtige Erkenntnisse

  • React.js erleichtert die Code-Wiederverwendung durch seine komponentenbasierte Architektur.
  • Es existiert eine aktive Community, die stetig neue Hilfsmittel anbietet1.
  • Durch die Nutzung des virtuellen DOMs wird die Leistung gesteigert.
  • JSX ermöglicht die einfache Integration von HTML in JavaScript.
  • Viele Tutorials und Dokumentationen machen das Erlernen von React.js leichter2.

Was ist React.js?

React.js, oder einfach React, ist eine JavaScript-Bibliothek. Sie wird von Meta (ehemals Facebook) betreut. React macht Benutzeroberflächen für Websites, besonders für Single-Page-Anwendungen3.

Jordan Walke hat React geschaffen. Jetzt wird es von einer großen Community und Firmen wie Facebook genutzt4.

Mit einem virtuellen DOM macht React.js alles schneller. Entwickler mögen React, weil es einfach ist und gut funktioniert4. React passt sich gut an, was viele Entwickler schätzen4.

Viele Jobs suchen nach Leuten, die React.js können. Das zeigt, wie wichtig React-Kenntnisse sind4.

React hat verschiedene Modelle für Webseiten. Zum Beispiel servergenerierte Seiten.

Create React App hilft, schnell mit React zu beginnen3. Es gibt eine einfache Verzeichnisstruktur für Projekte3.

Die Grundlagen von React.js

React.js hilft, mobile und Web-Anwendungen zu entwickeln. Es ist wichtig, JSX, Komponenten, State und Props zu kennen. Diese sind grundlegend für React-Projekte und machen sie beliebt5.

Was ist JSX?

JSX bedeutet JavaScript XML. Es macht das Beschreiben von Benutzeroberflächen in JavaScript leicht. Mit JSX bleibt der Code klar und einfach5.

Es macht das Rendern in React einfach. JSX hilft auch, die Sicherheit in React-Apps zu verbessern5.

Komponenten und ihre Verwendung

Komponenten sind wichtig für React-Anwendungen. Sie erlauben das Unterteilen der Benutzeroberfläche in wiederverwendbare Teile5. So spart man Entwicklungszeit bei großen Webanwendungen5.

React nutzt einen speziellen Algorithmus, um Komponenten schnell anzuzeigen. Das macht Web-Apps schneller6.

State und Props erklärt

State und Props sind wichtig für dynamische Benutzeroberflächen. Der State verwaltet Daten innerhalb von Komponenten. Mit Props teilt man Daten zwischen Komponenten. Das unterstützt die Modularität6.

Diese Funktionen geben React Flexibilität und Leichtigkeit. So wird das Entwickeln einfacher und Spaß6.

Einrichtung der Entwicklungsumgebung

Um mit React.js zu starten, müssen wir unsere Umgebung vorbereiten. Das heißt, wir brauchen Node.js und npm. Diese sind wichtig, um Create React App zu nutzen.

Installation von Node.js und npm

Node.js und npm sind essenziell für React.js. Node.js lässt uns JavaScript außerhalb des Browsers nutzen. Es ist die Basis für viele moderne Websites. Mit npm verwalten wir Bibliotheken für unsere Projekte7.

Man installiert sie meist durch den Node.js-Installer. Anleitungen gibt es oft in der Konsole8.

Einführung in Create React App

Create React App wird von Facebook empfohlen, um React-Projekte zu starten7. Es gibt uns alles, was wir brauchen, um schnell anzufangen9. Es ist einfach zu nutzen, was super für Anfänger und mittelgroße Projekte ist.

Um eine React-Webapp zu machen, braucht man Visual Studio 2022 oder neuer8. Man nutzt den Befehl “create-react-app” und installiert npm8. Dieses Tool hilft dabei, ohne viel Konfiguration sofort loszulegen.

Es gibt auch andere Tools wie VITE, die schnell starten. VITE war zum Beispiel in nur 780 ms bereit8. React.js nutzt solche Tools, um es Anfängern leicht und Profis produktiv zu machen7.

Erstellen und Verwalten von Komponenten

In React.js gibt es Funktions- und Klassenkomponenten. Beide Typen helfen uns, schöne Benutzeroberflächen zu gestalten. Sie haben verschiedene Funktionen.

Funktionskomponenten vs. Klassenkomponenten

Funktionskomponenten sind wie einfache JavaScript-Funktionen. Sie nehmen Props auf und geben JSX zurück10. Mit React Hooks, eingeführt in React 16.8.0, können sie auch Zustände handhaben11.

Funktionskomponenten in React.js

Klassenkomponenten hingegen bauen auf ES2015-Klassen. Sie können Zustände und Lebenszyklusmethoden nutzen11. Diese Methoden erlauben den Umgang mit Anwendungsänderungen. Große Firmen wie Apple und Netflix setzen React vielfältig ein12.

Lebenszyklusmethoden in Klassenkomponenten

Der Lebenszyklus einer Klassenkomponente in React.js beinhaltet spezielle Methoden. Zum Beispiel componentDidMount, shouldComponentUpdate, und componentWillUnmount reagieren auf Updates10.

Die render()-Methode zeigt den JSX-Code im Browser10. Die Leistung von Klassenkomponenten verbessert sich durch PureComponent. Es reagiert auf Änderungen bei Props oder State11. React.memo() optimiert Funktionskomponenten seit React 16.6.011.

Für wirkungsvolle React-Anwendungen ist das Wissen über diese Komponenten und den Lebenszyklus wertvoll.

Siehe auch  Schnelle Websites durch Page Speed Optimierung
Kriterium Funktionskomponenten Klassenkomponenten
Form Einfache JavaScript-Funktionen ES2015 Klasse
Zustandsverwaltung React Hooks (seit React 16.8.0) Integrierter State
Lebenszyklusmethoden Mit Hooks Integriert
Performance Optimierungen React.memo() PureComponent

Styling in React.js

In React.js kann man das Aussehen von Komponenten auf verschiedene Arten ändern. Es gibt Methoden wie Inline-Styling, traditionelle CSS-Dateien, CSS-in-JS und Styled-Components. Jede Methode hat ihre eigenen Vor- und Nachteile. Sie werden je nach den Anforderungen des Projekts gewählt.

Inline-Styling vs. CSS

React.js hat keine eingebaute Lösung für CSS-Styling13. Beim Inline-Styling benutzt man das style-Attribut. Dieses wartet auf ein Objekt mit JavaScript-Syntax für CSS-Eigenschaften13. Allerdings wird Inline-Styling oft vermieden, weil es den Code unübersichtlich machen kann.

Aber man wählt häufiger CSS-Klassen in JSX13. Zum Beispiel hilft das classnames-Paket, Klassen dynamisch zu verwalten. Es funktioniert wie folgt: Klassen werden basierend auf bestimmten Bedingungen verwaltet13. CSS-Module vermeiden Konflikte durch eindeutige Klassennamen für Komponenten13. Diese nutzen normales CSS in getrennten Dateien, integriert mit JavaScript13.

Styled-Components und CSS-Module

CSS-in-JS hat Diskussionen in der React.js-Gemeinde ausgelöst13. Eine beliebte Bibel darin ist Styled-Components mit über 23.000 Sternen auf GitHub13. Entwickler können damit CSS direkt mit der Komponente verkoppeln. Das verstärkt die Verbindung von Stil und Funktion.

Mit Styled-Components erstellt man dynamische Stile, basierend auf Komponenteneigenschaften13. CSS-Module helfen, Konflikte zu vermeiden, dank CSS in eigenen Modulen, zusammengefasst mit JavaScript14. Diese zwei Wege bieten Lösungen für CSS in React.js. Durch seine Beliebtheit ragt besonders Styled-Components heraus.

In der folgenden Tabelle werden die hauptsächlichen Unterschiede dargestellt:

Methode Beschreibung Vorteile Nachteile
Inline-Styling CSS-Eigenschaften in einem style-Attribut Einfache Nutzung Unübersichtlicher Code13
CSS-Klassen Verwendung von CSS-Klassen in JSX Übersichtlicher und wartbarer Code13 Potentielle Klassennamen-Konflikte
CSS Module Verwendung von CSS in separaten Modulen Konfliktvermeidung13 Erhöhter Einrichtungsaufwand
Styled-Components CSS direkt in der Komponentendatei Dynamisches Styling14 Potentielle Performance-Einbußen bei großen Projekten13

State-Management in React.js

React.js hilft, den Zustand von Webanwendungen zentral zu steuern. Es nutzt Mechanismen wie den React-Context und Bibliotheken wie Redux. Diese Methoden sind entscheidend dafür, Applikationen effizient zu verwalten.

Einführung in den React-Context

Der React-Context erleichtert den Datentransfer in der Komponentenhierarchie. So ist kein “prop drilling” notwendig15. Wir verwenden ihn, um wichtige Daten überall in der App verfügbar zu machen. Beispiele sind User-Infos oder Theme-Einstellungen15.

Er ist vor allem für große React-Apps nützlich. Denn er bietet eine flexible API fürs Zustands-Management innerhalb von Komponenten15.

Redux und seine Vorteile

Redux ist eine führende Lösung für JavaScript-Apps zur Zustandsverwaltung. Es ist beliebter als MobX, mit Millionen von Downloads jede Woche16. Die Downloadzahlen von Redux steigen immer noch, trotz neuer React-Features wie Context API und Hooks16. Zusätze und Werkzeuge machen Redux weiterhin attraktiv16.

Redux fördert einen einseitigen Datenfluss und verbessert dadurch die Vorhersehbarkeit16. Es nutzt Flux Standard Actions (FSA) und reine Funktionen in Reducern, was das Testen vereinfacht16. Entwickler erstellen mit createStore ein zentrales Store-Objekt. Es ermöglicht effiziente Zustandsverwaltung durch Funktionen wie dispatch, getState und subscribe16. combineReducers() hilft, Reducer sinnvoll zu organisieren16.

setState in React bündelt Änderungen, um unnötige Rendern zu vermeiden17. Bei komplexeren Projekten nutzen Entwickler oft Redux oder MobX für besseres Management17. Diese Funktionen stärken Redux als Tool für effiziente Zustandsverwaltung in React16.

React Router für Navigation

React Router ist sehr wichtig, wenn es um Navigation in React.js-Anwendungen geht. Es hat über 35.000 Sterne auf GitHub und mehr als 500 Leute tragen dazu bei. Es ist eine beliebte Wahl für React.js Navigation18. Es ist leicht zu benutzen, weil es oft deklarativ verwendet wird18.

Einrichtung von React Router

Um React Router zu nutzen, benutze den Befehl npm install react-router-dom19. Die Hauptkomponenten sind BrowserRouter und HashShouter19. React Router Dom V6 verbessert alles mit besseren Algorithmen und einfacherer API19. Neue Hooks wie useNavigate und useSearchParams vereinfachen das Routen19.

Nested Routes und dynamische Routen

Nested Routes machen komplexe Navigation einfacher und benutzerfreundlicher. Komponenten wie BrowserRouter, Route und Switch sind wichtig18. Sie sorgen dafür, dass nur die korrekte Route aktiv wird18. Mit useParams kann man benutzerdefinierte Pfade erstellen, ideal für User-IDs18. Das ist super für Single-Page-Anwendungen (SPAs), um Links zu speichern und den Code zu ordnen20. React Router verbessert die Erfahrung der Benutzer erheblich1820.

React Router kommt Entwicklern und Nutzern gleichermaßen zugute. Es bietet Flexibilität und viele Einsatzmöglichkeiten. Und es bleibt ein wichtiger Teil der React.js Navigation.

React.js Einführung: Ein umfassendes Tutorial

React.js ist heute sehr wichtig, wenn man Webseiten entwickeln will. Es wurde von Facebook gemacht und wird für das Gestalten von Webseiten benutzt21. In diesem Tutorial zeigen wir Ihnen, wie man tolle Webanwendungen damit erstellt.

Siehe auch  UX Design Prinzipe: Erfolgreich Nutzererlebnisse schaffen

Zuerst installieren wir NodeJS und NPM21. Das brauchen wir, um ReactJS zu nutzen. Mit npx create-react-app my-app legt man ein neues Projekt an21.

Dann beginnt die Entwicklung mit npm start21. ReactJS ist cool, weil es mit Komponenten arbeitet. Die sind wie Bausteine jeder mit eigener Aufgabe21. JSX hilft, HTML in JavaScript einzufügen21.

Es ist wichtig, Komponenten in React.js zu kennen. Die App beginnt in App.js und andere Komponenten kommen darunter21. Man kann Komponenten leicht im Code wieder verwenden21.

Starten Sie mit kleinen Projekten, wie einer Todo-Liste, empfehlen wir21. Online-Kurse helfen, React durch Projekte zu lernen21. Es ist nützlich, über .js, .tsx, .jsx Dateien Bescheid zu wissen21.

Zum Schluss ein paar Tipps. WebStorm und Visual Studio Code sind großartige Werkzeuge für React21. Mit Grundkenntnissen in HTML, CSS und JavaScript wird das Lernen leichter22.

Best Practices für die Entwicklung mit React.js

Das Befolgen von Best Practices in React.js führt zu sauberem Code. Es hilft auch, die Effizienz und Skalierbarkeit der Anwendungen zu steigern. React ist bei Firmen beliebt und hat eine aktive Gemeinde23. Es ist wichtig, die Konzepte von React zu verstehen, um gute Projekte zu entwickeln23.

Code-Struktur und Organisation

Eine klare Code-Struktur macht React-Apps übersichtlich und wartbar. Eine logische Ordnerstruktur erleichtert die Navigation. Das logische Ordnen von Imports macht den Code besser23. Tools wie Redux helfen beim effizienten Verwalten des States23.

React kam 2013 raus und wurde von Facebook entwickelt. Es benutzt Komponenten, die man wieder verwenden kann. Das macht den Front-End-Code klar und einfach24.

Verwendung von Hooks

React Hooks machen die Nutzung von State in Funktionen einfach. useState hilft beim Verwalten des States. useEffect wird für Nebenwirkungen genutzt23. React Hooks machen dynamische Webanwendungen viel einfacher25.

Hooks verbessern das State-Management. So bleibt der Code besser verständlich. Diese Technik hat Webanwendungen stark verändert23.

Es ist gut, State von Props zu unterscheiden. Das erklärt das Verhalten von Komponenten. Es hilft auch, Fehler zu vermeiden24. Diese Methode zeigt ihren Wert in Anwendungen wie dem Facebook-Werbeanzeigen-Manager25.

Abschließend ist der Einsatz von React.js sehr wichtig für moderne Webentwicklungen. Das Erstellen gekapselter Komponenten spart Kosten25.

Best Practice Vorteil
Klar strukturierte Ordner Einfachere Navigation und Wartbarkeit
Logisch strukturierte Imports Verbesserte Codeorganisation
Nutzung von Redux, Recoil, Zustand Effizientes State-Management
Verwendung von Hooks wie useState, useEffect Verbesserte Handhabung von State und Nebenwirkungen
Differenzierung von State und Props Nachvollziehbares Komponentenverhalten

Testing und Debugging in React.js

Das Testen von React.js-Anwendungen ist wichtig, um Fehler zu finden. Mit React.js Testing prüfen wir, ob alles richtig läuft26. Das Jest Testing Framework ist ideal für Unit-Tests geeignet. Es wird als Entwicklungswerkzeug hinzugefügt27. Die React Testing Library ist eine tolle Ergänzung. Sie bietet Werkzeuge, um den DOM-Zustand zu prüfen27.

Einführung in Jest und React Testing Library

Die React Testing Library bietet Dienstprogramme fürs Testen. Sie wird mit Jest oder Mocha benutzt27. Methoden wie render und screen helfen, Komponenten zu überprüfen27. Zum Testen braucht man nur npm oder Yarn27. Mehr Infos gibt es hier.

React DevTools

Debugging-Tools wie React DevTools

React-Anwendungen brauchen spezielle Debugging-Werkzeuge. Die bekanntesten sind Chrome DevTools und React Developer Tools28. Die React Developer Tools helfen, Leistungsprobleme zu finden. Sie sind für viele Browser verfügbar28. Mehr zum React.js Testing können Sie hier lesen.

Entwickler verwenden verschiedene Werkzeuge zum Debuggen. Dazu gehören ein Node.js-Server und Paketmanager, React.js-Paket und ein Code-Editor28. Auch Bibliotheken wie MUI brauchen spezielle Werkzeuge28.

Unit Testing ist für die Funktion von Modulen entscheidend. Jest hilft, die Qualität zu sichern26. Mit Jest kann man unnötige Renderings vermeiden. So läuft alles schneller26. Mit der Option –coverage sehen wir, wie viel Code getestet wurde26.

Mehr über Unit-Tests in React mit Jest erfahren Sie hier.

Performancesteigerung in React.js-Anwendungen

React.js Performance Optimierung ist sehr wichtig. Sie hilft, dass Websites schneller und reaktiver werden. Es geht darum, unnötige Neuzeichnungen zu vermeiden. React wurde von Facebook entwickelt. Es benutzt eine virtuelle DOM, die vor allem bei großen Anwendungen hilft, die Performance zu steigern29.

Lazy Loading reduziert die Größe von Dateien und verbessert das Nutzererlebnis. Es lädt Teile der Website, die nicht sofort gebraucht werden, später. Ein effektives Verwalten von Zuständen ist sehr wichtig. Redux hilft dabei, den Zustand in React-Anwendungen gut zu verwalten29.

Siehe auch  Entdecken Sie Tailwind CSS für modernes Webdesign

Google Chrome Developer Tools und Firebug sind nützlich, um die Leistung zu messen. Sie helfen, Probleme zu finden. Spezielle Kurse in München bieten tiefe Einblicke in diese Techniken. Sie kosten 580,00 €30.

Node.js ist wichtig in der Webentwicklung. Es hat JavaScript auf dem Server verändert. Es macht Netzwerkanwendungen schneller und besser skalierbar29. Babel macht moderne JavaScript-Codes älteren Browsern zugänglich. Webpack organisiert Frontend-Ressourcen gut29.

Computed Properties und Watchers bei VueJS helfen, die Leistung zu optimieren, wie in VueJS Performance-Tipps erklärt31. Diese Techniken machen Anwendungen reaktiver. Lazy Loading für Komponenten und Bilder verbessert die Performance31. Diese Methoden in der Entwicklung zu verwenden, macht Anwendungen besser.

Fazit

Unser Leitfaden zeigt, wie toll React.js ist. Es geht um die Grundlagen und mehr32. Wir sprechen über JSX, Lifecycle-Methoden und Virtual DOM32.

React.js wird von Firmen wie Facebook genutzt. Es ist gut für Entwickler32.

JSX macht das Erstellen von Komponenten leicht33. Entwickler können so einfach JavaScript nutzen. Webpack hilft, JSX in JavaScript zu ändern33.

Dies macht Entwickeln flexibel. Mehr über JSX lernen ist nützlich.

React hat viele Vorteile. Es passt gut zu anderen Tools34. Es gibt eine aktive Community für Hilfe34.

React wird ständig verbessert. Wichtige Editoren unterstützen React.js gut.

Wir können mit React.js tolle Projekte machen34. Weiterbildung hilft uns dabei. Dieser Leitfaden ist ein guter Start34.

Für mehr Hilfe, schaut euch die JavaScript Einführung in React an.

FAQ

Was ist React.js?

React.js ist eine JavaScript-Bibliothek, entwickelt von Facebook. Sie dient zum Aufbau dynamischer Benutzeroberflächen für Webseiten. Ein virtueller DOM erhöht die Effizienz bei Updates.

Was ist JSX?

JSX steht für JavaScript XML. Es ist eine Syntax-Erweiterung für JavaScript. Mit JSX kann man das Webseiten-Layout direkt im JavaScript-Code mit HTML-ähnlicher Syntax schreiben.

Was sind Komponenten und ihre Verwendung in React.js?

Komponenten sind die Basis einer React.js-App. Sie funktionieren als eigenständige, wiederverwendbare Teile. Komponenten zeigen die Oberfläche auf dem Bildschirm und bestimmen das Verhalten.

Was sind State und Props in React.js?

State und Props verwalten Daten in React.js. Der State hält zustandsabhängige Daten. Props geben Daten an Kinderkomponenten weiter. Sie können aber nicht verändert werden.

Wie installiere ich Node.js und npm für React.js?

Lade Node.js und npm von der offiziellen Website herunter. Sie sind wichtig, um Pakete zu verwalten und die Entwicklungsumgebung für React.js zu bereiten.

Was ist Create React App?

Create React App ist ein Tool von Facebook. Es hilft Entwicklern, schnell mit neuen React-Projekten zu starten. Es stellt eine komplette Umgebung bereit.

Was sind Funktionskomponenten und Klassenkomponenten in React.js?

Funktionskomponenten sind einfache Funktionen die JSX zurückgeben. Klassenkomponenten sind komplexer. Sie haben zusätzliche Features wie State und Lebenszyklusmethoden.

Welche Lebenszyklusmethoden gibt es in Klassenkomponenten?

Klassenkomponenten haben spezielle Methoden. Zum Beispiel componentDidMount, componentDidUpdate und componentWillUnmount. Sie managen Änderungen in der Komponente während ihres Lebens.

Wie kann ich in React.js Styling vornehmen?

Styling in React.js kann unterschiedlich gemacht werden. Es gibt traditionelle CSS-Dateien, Inline-Styling, Styled-Components und CSS-Module. Jede Methode hat ihre Vorzüge.

Was sind Styled-Components und CSS-Module?

Styled-Components integrieren CSS direkt in JavaScript. CSS-Module bieten eine modulare Nutzung von CSS. Beide helfen, den Stil von Komponenten zu gestalten.

Was ist der React-Context und welche Vorteile bietet Redux?

React-Context teilt Daten, ohne durch viele Schichten zu müssen. Redux verwaltet den State zentral für große Anwendungen. Es erleichtert Updates und Debugging.

Wie kann ich React Router für die Navigation einrichten?

Installiere React Router mit npm. Es erlaubt, Navigation in der App einzurichten. Man kann mit Nested Routes und dynamischen Routen arbeiten.

Was sind Nested Routes und dynamische Routen?

Nested Routes definieren Routen innerhalb anderer Routen. Dynamische Routen passen sich an URL-Änderungen an. Beides ist für flexible Webseiten wichtig.

Was sind die Best Practices für die Entwicklung mit React.js?

Effiziente Code-Struktur und Organisation sind wichtig. React Hooks sollten genutzt werden. Sie ermöglichen State-Management in Funktionen.

Wie teste und debugge ich React.js-Anwendungen?

Jest und die React Testing Library sind gut für Tests. Für das Debugging gibt es React DevTools. Sie helfen, Fehler zu finden.

Wie optimiere ich die Performance von React.js-Anwendungen?

Performance verbessert man durch weniger Re-Rendering, effizientes State-Management und Profiling-Tools. Sie identifizieren Engpässe in der App.

Quellenverweise

  1. https://bitkollegen.de/react-native-entwicklung-der-ultimative-leitfaden/
  2. https://de.everand.com/book/411175647/React-lernen-und-verstehen
  3. https://medium.com/@helen_18602/react-einführung-und-todo-app-4a23513d1b63
  4. https://kinsta.com/de/wissensdatenbank/was-ist-react-js/
  5. https://www.hostinger.de/tutorials/was-ist-react
  6. https://reactjs.de/artikel/react-tutorial-deutsch/
  7. https://www.webtechnologien.com/advanced-tutorials/react-js/
  8. https://learn.microsoft.com/de-de/visualstudio/javascript/tutorial-create-react-app?view=vs-2022
  9. https://de.legacy.reactjs.org/docs/create-a-new-react-app.html
  10. https://www.digitalocean.com/community/tutorials/how-to-create-custom-components-in-react-de
  11. https://lernen.react-js.dev/die-grundlagen/komponenten-in-react
  12. https://www.guru99.com/de/reactjs-tutorial.html
  13. https://l‌e‌r‌n‌e‌n‌.react-js.dev/die-grundlagen/css-und-styling
  14. https://www.geeksforgeeks.org/8-ways-to-style-react-components/
  15. https://www.tutorialspoint.com/reactjs/reactjs_state.htm
  16. https://lernen.react-js.dev/ecosystem/state-management
  17. https://de.legacy.reactjs.org/docs/faq-state.html
  18. https://lernen.react-js.dev/ecosystem/routing
  19. https://medium.com/@reactmasters.in/react-router-in-react-js-04f0a2d94415
  20. https://codewithpawan.medium.com/routing-and-navigation-in-react-js-a-comprehensive-guide-with-examples-17fb10c8a8c6
  21. https://www.reactschulung.de/react-tutorial-erste-schritte-installation-teil-1/
  22. https://reactjs.de/artikel/nextjs-intro/
  23. https://kinsta.com/de/blog/react-best-practices/
  24. https://reactjs.de/artikel/react-tutorial-deutsch-legacy/
  25. https://thecodest.co/de/blog/react-js-entwickler-einstellen/
  26. https://www.browserstack.com/guide/unit-testing-of-react-apps-using-jest
  27. https://blog.logrocket.com/using-react-testing-library-debug-method/
  28. https://raygun.com/blog/react-debugging-guide/
  29. https://webentwicklung.berlin/moderne-javascript-werkzeuge-fuer-webdesign/
  30. https://www.timetoact.de/details/webseiten-performance
  31. https://www.codecentric.de/wissens-hub/blog/vuejs-performance-tips-part-2
  32. https://www.heise.de/hintergrund/JavaScript-Einfuehrung-in-React-2689175.html
  33. https://l‌ernen.react-js.dev/die-grundlagen/jsx-eine-einfuehrung
  34. https://nilshartmann.net/posts/fuenf-gruende-fuer-react