React ist zu einem unverzichtbaren Werkzeug für die moderne Webentwicklung geworden. Es auf deinem Rechner einzurichten, ist der erste Schritt, um tolle Benutzeroberflächen zu erstellen.

React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen, bei der Leistung und Wiederverwendbarkeit im Vordergrund stehen. Sie hat die Webentwicklung revolutioniert, indem sie es einfacher gemacht hat, schnelle, reaktionsschnelle und wartbare Benutzeroberflächen zu erstellen, die für die Menschen wirklich funktionieren.

Ihre komponentenbasierte Architektur und ihr Fokus auf die Leistung in der Praxis haben sie zu einer attraktiven Wahl für Entwickler gemacht, die moderne Webanwendungen erstellen wollen.

In diesem umfassenden Leitfaden führen wir dich durch die Installation von React auf den Betriebssystemen Windows, macOS und Linux. Doch zunächst wollen wir die Bedeutung von React erörtern und wie es deinen Entwicklungsworkflow unterstützen kann.

Auf geht’s!

 Was ist React?

React Startseite
React

React ist eine leistungsstarke JavaScript-Bibliothek, die speziell für die Erstellung von Benutzeroberflächen entwickelt wurde. Sie wurde 2013 von Jordan Walke, einem Softwareingenieur bei Facebook, entwickelt.

React konzentriert sich auf die Erstellung und Verwaltung von UI-Komponenten, d. h. wiederverwendbaren Codebausteinen, die ihren Zustand verwalten und UI-Elemente darstellen können. Die komponentenbasierte Architektur ermutigt Entwickler/innen, modulare und wiederverwendbare Komponenten zu erstellen, wodurch die Menge an doppeltem Code reduziert und die Entwicklungszeit verkürzt wird.

Die Verwendung eines virtuellen DOM in React verbessert das Rendering und führt zu einer schnelleren und effizienteren Leistung im Vergleich zu herkömmlichen DOM-Manipulationstechniken. Dieser Fokus auf Leistung und Wiederverwendbarkeit hat React zu einer beliebten Wahl unter Entwicklern gemacht.

Wer nutzt React?

React erfreut sich bei vielen Entwicklern großer Beliebtheit, da es eine leistungsstarke und flexible Möglichkeit bietet, Benutzeroberflächen für Webanwendungen zu erstellen. Hier ist ein Blick auf einige der Personen, die React häufig verwenden:

  • Webentwickler: Sie nutzen React, um ansprechende und reaktionsschnelle Benutzeroberflächen für Websites und Webanwendungen zu erstellen. Die komponentenbasierte Architektur von React ermöglicht es ihnen, modulare Anwendungen zu erstellen, die einfacher zu warten und zu aktualisieren sind.
  • Front-End-Entwickler/innen: Diese Entwickler nutzen React, um Komponenten für die Benutzeroberfläche zu erstellen, die mit Backend-Diensten und APIs interagieren. React vereinfacht die Erstellung komplexer Benutzeroberflächen, indem es sie in kleinere, besser handhabbare Komponenten zerlegt.
  • Full-Stack-Entwickler/innen: Full-Stack-Entwickler/innen nutzen React in Verbindung mit Backend-Technologien wie Node.js, Express und MongoDB, um funktionsreiche Webanwendungen zu erstellen. Die Flexibilität von React macht es einfach, verschiedene Backend-Systeme zu integrieren und den Entwicklungsprozess zu optimieren.

Viele prominente Unternehmen aus der Tech-Branche nutzen React, was seine Vielseitigkeit und weite Verbreitung unterstreicht. Einige Beispiele für Unternehmen, die React in ihrem Tech-Stack verwenden, sind:

  • Facebook: Als Erfinder von React setzt Facebook React in seinen Webanwendungen ein, darunter die Facebook-Hauptseite, Instagram und WhatsApp Web.
  • Airbnb: Airbnb nutzt React, um seine Benutzeroberflächen zu erstellen und seinen Nutzern ein nahtloses und leistungsstarkes Erlebnis auf verschiedenen Plattformen zu bieten.
  • Netflix: Netflix nutzt React für seine Webanwendung und profitiert von den Leistungsoptimierungen und der komponentenbasierten Architektur, um ein reibungsloses Nutzererlebnis zu schaffen.
  • Uber: Uber nutzt React für seine Webanwendungen, um seinen Nutzern intuitive und reaktionsschnelle Benutzeroberflächen zu bieten.
  • Pinterest: Pinterest nutzt die komponentenbasierte Architektur von React, um eine visuell beeindruckende und hochgradig interaktive Webanwendung zu erstellen, mit der Nutzer kreative Ideen entdecken und speichern können.
  • Reddit: Reddit nutzt React für die Entwicklung seiner Webanwendung, um Millionen von Nutzern auf der Plattform ein schnelles und ansprechendes Nutzererlebnis zu bieten.
  • Dropbox: Dropbox nutzt die Leistungsoptimierungen von React und die komponentenbasierte Architektur, um eine benutzerfreundliche und effiziente Webanwendung für die Verwaltung und den Austausch von Dateien zu entwickeln.

Durch den Einsatz von React demonstrieren diese Unternehmen die Leistungsfähigkeit und Flexibilität dieser beliebten JavaScript-Bibliothek und machen sie zu einem unverzichtbaren Werkzeug für die moderne Webentwicklung.

Vorteile der Verwendung von React

React bietet mehrere Vorteile, die es zu einer beliebten Wahl für die moderne Webentwicklung machen.

Hier sind einige der wichtigsten Vorteile:

Komponentenbasiertes Design fördert die Wiederverwendbarkeit

Die Architektur von React ermöglicht es Entwicklern, modulare und wiederverwendbare Komponenten zu erstellen, wodurch doppelter Code vermieden und die Wartung und Aktualisierung von Anwendungen erleichtert wird. Dieser Ansatz fördert die Konsistenz und vereinfacht den Entwicklungsprozess.

Virtuelles DOM für bessere Leistung

React nutzt ein virtuelles DOM, um das Rendering zu optimieren. Das macht es schneller und effizienter als die traditionelle DOM-Manipulation. Indem nur die Teile des DOM aktualisiert werden, die sich geändert haben, minimiert React den Zeitaufwand für das Rendering und verbessert die Gesamtleistung der Anwendung.

Starke Unterstützung durch die Community

Die React-Gemeinschaft ist sehr umfangreich und engagiert in der Entwicklung dieser Technologie. Sie teilt ihr Fachwissen regelmäßig über Online-Plattformen wie Foren, soziale Medien und Blogs. Diese starke Unterstützung durch die Community stellt sicher, dass React ständig weiterentwickelt und verbessert wird, und bietet gleichzeitig wertvolle Ressourcen für Entwickler/innen, von denen sie lernen und Probleme beheben können.

Große Auswahl an Bibliotheken und Tools von Drittanbietern

Das React-Ökosystem ist riesig und bietet eine Fülle von Bibliotheken und Tools, die Entwicklern bei der Erstellung und Optimierung ihrer Anwendungen helfen. Diese Ressourcen können Zeit und Mühe sparen, indem sie vorgefertigte Lösungen und Erweiterungen für häufige Aufgaben und Herausforderungen bereitstellen.

Beliebte Wahl für moderne Webentwicklung

React hat sich unter Entwicklern und Unternehmen weit verbreitet und ist daher eine beliebte Wahl für die Entwicklung moderner Webanwendungen. Diese Beliebtheit bedeutet, dass Entwickler/innen mit React-Kenntnissen sehr gefragt sind, was sie zu einer wertvollen Qualifikation auf dem Arbeitsmarkt macht.

React-Voraussetzungen

Bevor du mit der Installation und Nutzung von React beginnen kannst, solltest du einige grundlegende Kenntnisse und Werkzeuge besitzen. Hier sind die Voraussetzungen, um mit React zu arbeiten:

  • Grundkenntnisse in HTML, CSS und JavaScript: Vertrautheit mit diesen zentralen Webtechnologien ist notwendig, um zu verstehen, wie man Komponenten in React erstellt und gestaltet.
  • Vertrautheit mit der Kommandozeile/Terminal: Bei der Entwicklung von React werden häufig Kommandozeilen-Tools und -Schnittstellen verwendet. Daher ist es wichtig, dass du dich mit der Navigation und der Ausführung von Befehlen im Terminal oder der Eingabeaufforderung deines Systems auskennst.
  • Node.js und npm sind installiert: React setzt auf Node.js und npm (Node Package Manager), um Abhängigkeiten zu verwalten und Build-Skripte auszuführen. Vergewissere dich, dass du beides auf deinem System installiert hast, bevor du mit der Installation von React fortfährst.

Systemvoraussetzungen

Bevor du React installierst, musst du sicherstellen, dass dein System die notwendigen Voraussetzungen erfüllt. Das brauchst du:

  • Betriebssystem: Windows 10 oder 11, macOS 10.10 oder Ubuntu 16 werden für die beste Kompatibilität und Leistung empfohlen.
  • Hardware: Mindestens 4 GB RAM und 10 GB Speicherplatz sind erforderlich, damit React und die dazugehörigen Tools reibungslos funktionieren.
  • Ein Webbrowser und Internetzugang: Ein moderner Webbrowser (wie Google Chrome, Mozilla Firefox oder Microsoft Edge) und ein Internetzugang sind notwendig, um deine React-Anwendungen zu betrachten und zu testen.
  • Node.js und npm sind installiert: Wie bereits erwähnt, ist React auf Node.js und npm angewiesen, um Abhängigkeiten zu verwalten und Build-Skripte auszuführen. Stelle sicher, dass du beides auf deinem System installiert hast.

So installierst du React

Jedes Betriebssystem hat leicht unterschiedliche Anforderungen an die Installation von React. Folge den unten stehenden Anweisungen für das von dir verwendete Betriebssystem.

So installierst du React unter Windows

In diesem Abschnitt führen wir dich durch die Installation von React auf einem Windows-Rechner.

Befolge diese Schritte, um loszulegen:

  1. Node.js und npm installieren.
  2. Installiere React App erstellen.
  3. Erstelle ein neues React-Projekt.
  4. Gehe in das Projektverzeichnis und starte den Entwicklungsserver.

Schritt 1: Node.js und npm installieren

Bevor du React installierst, musst du Node.js und npm (Node Package Manager) auf deinem System installiert haben. Wenn du sie noch nicht installiert hast, befolge diese Schritte:

  1. Besuche die Download-Seite von Node.js unter: https://nodejs.org/en/download/.
  2. Lade das Installationsprogramm für dein Windows-System herunter (entweder die LTS- oder die Current-Version ist in Ordnung, aber die LTS-Version wird für die meisten Benutzer empfohlen).
  3. Um Node.js und npm zu installieren, führe das Installationsprogramm aus und befolge die Anweisungen.
Herunterladen des Node.Js-Installationsprogramms für Windows
Herunterladen des Node.Js-Installationsprogramms für Windows

Nachdem die Installation abgeschlossen ist, kannst du überprüfen, ob Node.js und npm installiert sind, indem du eine Eingabeaufforderung öffnest und die folgenden Befehle ausführst:

node -v npm -v

Diese Befehle sollten die Versionsnummern von Node.js bzw. npm anzeigen.

Schritt 2: Create React App installieren

Create React App ist ein Kommandozeilen-Tool, das die Einrichtung eines neuen React-Projekts mit einer empfohlenen Projektstruktur und Konfiguration vereinfacht. Um Create React App global zu installieren, öffne eine Eingabeaufforderung und führe den folgenden Befehl aus:

npm install -g create-react-app

Dieser Befehl installiert Create React App auf deinem System und macht es in jedem Verzeichnis verfügbar.

Schritt 3: Ein neues React-Projekt erstellen

Jetzt, wo du Create React App installiert hast, kannst du damit ein neues React-Projekt erstellen. Öffne dazu eine Eingabeaufforderung, gehe in das Verzeichnis, in dem das Projekt gespeichert werden soll, und führe den folgenden Befehl aus:

create-react-app my-app

Ersetze „my-app“ durch den gewünschten Namen für dein Projekt. Create React App erstellt ein neues Verzeichnis mit dem angegebenen Namen und generiert ein neues React-Projekt mit der empfohlenen Projektstruktur und Konfiguration.

Schritt 4: Gehe in das Projektverzeichnis und starte den Entwicklungsserver

Sobald das Projekt erstellt ist, gehst du in das Projektverzeichnis, indem du den folgenden Befehl in der Eingabeaufforderung ausführst:

cd my-app

Ersetze „my-app“ durch den Namen deines Projektverzeichnisses. Starte nun den Entwicklungsserver, indem du den folgenden Befehl ausführst:

npm start

Mit diesem Befehl wird der Entwicklungsserver gestartet, der auf Änderungen an deinen Projektdateien achtet und den Browser automatisch neu lädt, wenn Änderungen festgestellt werden.

Es sollte sich ein neues Browserfenster öffnen, in dem deine React-Anwendung unter http://localhost:3000/ läuft und das wie folgt aussieht:

React wurde erfolgreich unter Windows installiert
React wurde erfolgreich unter Windows installiert

Herzlichen Glückwunsch! Du hast React erfolgreich auf deinem Windows-Rechner installiert und ein neues React-Projekt erstellt. Jetzt kannst du damit beginnen, deine Benutzeroberflächen mit React zu erstellen.

So installierst du React auf macOS

Gehen wir nun den Prozess der Installation von React auf einem Computer mit macOS durch:

  1. Node.js und npm installieren.
  2. Installiere Create React App auf deinem macOS.
  3. Erstelle ein neues React-Projekt.
  4. Gehe in das Projektverzeichnis und starte den Entwicklungsserver.

Schritt 1: Node.js und npm installieren

Wie bei der Windows-Installation musst du auch auf deinem macOS-System Node.js und npm (Node Package Manager) installieren. Wenn du sie noch nicht installiert hast, befolge diese Schritte:

  1. Besuche die Node.js Download-Seite
  2. Lade das macOS Installationsprogramm herunter
Herunterladen des Node.js-Installers für macOS
Herunterladen des Node.js-Installers für macOS
  1. Nach dem Download klickst du auf die .pkg-Datei in deinem Download-Ordner, um das Installationsprogramm zu starten.
  2. Befolge die Anweisungen, die auf deinem Bildschirm erscheinen, akzeptiere die Lizenzvereinbarung, wähle das Ziel für die installierten Dateien und den Installationstyp aus.
Befolge die Anweisungen auf dem Bildschirm, um die Installation von Node.js abzuschließen
Befolge die Anweisungen auf dem Bildschirm, um die Installation von Node.js abzuschließen

Nachdem die Installation abgeschlossen ist, kannst du überprüfen, ob Node.js und npm installiert sind, indem du ein Terminal öffnest und die folgenden Befehle ausführst:

node -v
npm -v

Diese Befehle sollten die Versionsnummern von Node.js bzw. npm anzeigen.

Alternativ kannst du Node.js und npm auch über die Kommandozeile installieren. Dazu öffnest du Terminal und gibst ein:

brew install node

Warte, bis die Installation abgeschlossen ist, und überprüfe sie dann auf die gleiche Weise wie oben, indem du eingibst

node -v

Und dann:

npm -v

Schritt 2: Installiere Create React App auf deinem macOS

Jetzt können wir mit der Installation von Create React App auf macOS beginnen.

Create React App ist eine bequeme Methode, um eine einseitige Anwendung mit wenigen Schritten und ohne Konfiguration einzurichten.

Lass uns mit den Installationsschritten fortfahren.

Öffne zunächst das Terminal und erstelle einen Ordner namens react-app, indem du den folgenden Befehl eingibst:

mkdir react-app

Als Nächstes navigierst du mit diesem Befehl in das react-app Verzeichnis:

cd react-app

Um zu überprüfen, ob du dich im richtigen Verzeichnis befindest, gibst du den folgenden Befehl ein und drückst die Eingabetaste:

pwd Wenn du sichergestellt hast, dass du dich im richtigen Verzeichnis befindest, kannst du ein neues React-Projekt erstellen.

Schritt 3: Ein neues React-Projekt erstellen

Jetzt, wo du Create React App installiert hast, kannst du damit ein neues React-Projekt erstellen. Gib folgenden Befehl ein:

npx create-react-app my-app

npx ist ein Modul, das zu npm gehört. Die Installationsschritte werden einige Zeit in Anspruch nehmen, also hab Geduld.

Schritt 4: Gehe in das Projektverzeichnis und starte den Entwicklungsserver

Nachdem der Befehl erfolgreich ausgeführt wurde, navigiere zum Verzeichnis my-app:

cd my-app

Gib schließlich ein:

npm start

Nach erfolgreicher Ausführung des Befehls öffnet sich dein Standard-Webbrowser unter

http://localhost:3000/:

Nach erfolgreicher Installation solltest du das React-Logo in deinem Webbrowser sehen
Nach erfolgreicher Installation solltest du das React-Logo in deinem Webbrowser sehen

Und das war’s! React ist jetzt installiert und kann auf deinem macOS genutzt werden.

So installierst du React unter Linux

Wenn du ein Linux-basiertes System hast, kannst du React mit den folgenden Schritten installieren:

  1. Installiere npm.
  2. Installiere das Dienstprogramm create-react-app.
  3. Erstelle und starte deine erste React-Anwendung.

Schritt 1: Installiere npm

Logge dich als sudo-Benutzer auf deinem Server ein und führe den folgenden Befehl aus:

sudo apt install npm

Sobald die Installation abgeschlossen ist, überprüfe die installierte Version von npm mit dem Befehl:

npm --version

Mit der Installation von npm wird auch Node.js installiert. Bestätige die installierte Version von Node mit dem Befehl:

node --version

Schritt 2: Installiere das Dienstprogramm create-react-app

create-react-app ist ein Dienstprogramm, mit dem du alle Werkzeuge einrichten kannst, die du für eine React-Anwendung brauchst.

Es spart Zeit und Mühe, indem es alles von Grund auf einrichtet und dir einen Vorsprung verschafft.

Um das Tool zu installieren, führe den folgenden npm-Befehl aus:

sudo npm -g install create-react-app

Nach der Installation bestätigst du die Version von create-react-app, indem du ihn ausführst:

create-react-app --version

Schritt 3: Erstelle und starte deine erste React-Anwendung

Das Erstellen einer React-Anwendung ist einfach und unkompliziert. Wir erstellen eine React-Anwendung namens my-app wie folgt:

create-react-app my-app

Dieser Prozess dauert etwa 5 Minuten, um alle Pakete, Bibliotheken und Werkzeuge zu installieren, die für die Anwendung benötigt werden. Geduld ist der Schlüssel.

Wenn die Anwendung erfolgreich erstellt wurde, erhältst du eine Benachrichtigung mit den grundlegenden Befehlen, die du ausführen kannst, um die Anwendung zu verwalten.

Um die Anwendung zu starten, navigiere in das App-Verzeichnis:

cd my-app

Führe dann den Befehl aus:

npm start

Du wirst eine Ausgabe sehen, die dir zeigt, wie du auf die Anwendung im Browser zugreifen kannst.

Öffne deinen Browser und navigiere zur IP-Adresse deines Servers:

http://server-ip:3000

Wie bei den Installationsprozessen unter Windows und macOS solltest du das React-Logo in deinem Browser sehen:

Nach der Installation solltest du das React-Logo in deinem Browser sehen
Nach der Installation solltest du das React-Logo in deinem Browser sehen

Das zeigt, dass die React-Standardapplikation läuft und funktioniert.

Du hast jetzt erfolgreich React auf Linux installiert und eine Anwendung in React erstellt!

Zusammenfassung

Ich hoffe, du hast diese Anleitung zur Installation von React unter Windows, macOS und Linux hilfreich gefunden. Wir haben die Voraussetzungen und Systemanforderungen für die Einrichtung einer React-Entwicklungsumgebung sowie die Installation von Node.js und npm behandelt. Außerdem haben wir gezeigt, wie du mit dem Dienstprogramm create-react-app ein neues React-Projekt erstellst und einen Entwicklungsserver startest.

Jetzt, wo du React auf deinem Rechner installiert hast, ist es an der Zeit, den Tutorials zu folgen, Best Practices zu lernen und herauszufinden, wie du tolle Benutzeroberflächen erstellen kannst. Das Design von React, seine Leistungsvorteile und die starke Unterstützung durch die Community machen es zu einer hervorragenden Wahl für die moderne Webentwicklung.

Wenn du mit deiner React-Entwicklung vorankommst, solltest du in Erwägung ziehen, die Anwendungs-Hosting-Dienste von Kinsta für deine React-Projekte zu nutzen. Kinsta bietet eine leistungsstarke, skalierbare und sichere Hosting-Plattform, mit der du das Beste aus deinen React-Anwendungen herausholen kannst.

Viel Erfolg!