React für JavaScript (Node.js): Vollständiger Leitfaden mit Beispielen

Was ist React und warum wird es benötigt?

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek mit offenem Quellcode zur Erstellung von Benutzeroberflächen (UI). Sie wurde 2013 von Ingenieuren bei Facebook (heute Meta) entwickelt und ist seitdem eine der beliebtesten Frontend-Technologien der Welt. React ermöglicht es Entwicklern, komplexe, interaktive und skalierbare Webanwendungen zu erstellen, indem die Oberfläche in unabhängige, wiederverwendbare Komponenten aufgeteilt wird.

Warum wird React benötigt?

\n
• Komponentenbasierter Ansatz: React baut die UI aus isolierten Blöcken (Komponenten) auf, von denen jeder seinen eigenen Zustand verwaltet. Dies vereinfacht die Entwicklung, das Testen und die Wartung des Codes.
\n
• Deklarativität: Sie beschreiben, wie die UI für jeden Zustand der Anwendung aussehen soll, und React aktualisiert und rendert effizient nur die Komponenten, die sich geändert haben. Dies macht den Code vorhersagbarer und einfacher zu debuggen.
\n
• Virtuelles DOM (Virtual DOM): React verwendet eine leichtgewichtige Kopie des echten DOM (Document Object Model). Wenn sich der Zustand der Anwendung ändert, aktualisiert React zuerst das virtuelle DOM, vergleicht es dann mit der vorherigen Version (Diffing) und wendet nur die minimal notwendigen Änderungen auf das echte DOM an. Dies verbessert die Leistung erheblich, insbesondere bei Anwendungen mit häufigen Aktualisierungen.
\n
• Große Community und Ökosystem: React hat eine der größten Entwickler-Communities, was eine Fülle an vorgefertigten Lösungen, Bibliotheken, Werkzeugen (React Router, Redux, Next.js, Gatsby) und Lernmaterialien bedeutet.
\n
• Vielseitigkeit: React kann nicht nur für Webanwendungen, sondern auch für mobile (React Native), Desktop- (Electron) und sogar VR-Anwendungen (React 360) verwendet werden.
\n

React eignet sich für Projekte jeder Größenordnung: von einfachen Single-Page-Anwendungen (SPA) bis hin zu komplexen Unternehmenssystemen und sozialen Netzwerken.

Installation von React (npm)

Um mit React zu arbeiten, benötigen Sie Node.js (Version 14 oder höher) und einen Paketmanager wie npm (oder yarn). Der einfachste Weg, ein neues Projekt zu starten, ist die Verwendung des offiziellen Tools Create React App.

# Globale Installation von Create React App (optional)\nnpm install -g create-react-app\n\n# Erstellen eines neuen Projekts mit dem Namen my-app\nnpx create-react-app my-app\n\n# Wechseln in das Projektverzeichnis\ncd my-app\n\n# Starten des Entwicklungsservers\nnpm start

Nach der Ausführung dieser Befehle öffnet sich Ihr Browser automatisch unter http://localhost:3000 mit einer laufenden React-Anwendung.

Wichtig: npx ist ein Tool, das Pakete ausführt, ohne sie global zu installieren. Wenn Sie eine ältere npm-Version haben (< 5.2), verwenden Sie npm install -g create-react-app und dann create-react-app my-app.

Alternative Methode (manuelle Installation):

# Erstellen Sie einen Projektordner und initialisieren Sie npm\nmkdir my-react-app && cd my-react-app\nnpm init -y\n\n# Installieren Sie React und ReactDOM\nnpm install react react-dom\n\n# Installieren Sie Babel für die JSX-Transpilation und Webpack für das Bundling (Konfiguration erforderlich)\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

Für Anfänger wird jedoch dringend empfohlen, Create React App zu verwenden, da es die gesamte komplexe Konfiguration des Build-Tools (Webpack, Babel) übernimmt.

Schnellstart mit einem Codebeispiel

Nachdem Sie das Projekt mit Create React App erstellt haben, öffnen Sie die Datei src/App.js. Dies ist die Hauptkomponente Ihrer Anwendung. Lassen Sie uns eine einfache "Hallo, Welt!"-Anwendung mit einem Button erstellen, der den Titel ändert.

// src/App.js\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {