Ihre komponentenbasierte Architektur und ihr Fokus auf die Leistung in der Praxis haben sie zu einer attraktiven Wahl f\u00fcr Entwickler gemacht, die moderne Webanwendungen erstellen wollen.<\/p>\n
In diesem umfassenden Leitfaden f\u00fchren wir dich durch die Installation von React<\/a> auf den Betriebssystemen Windows, macOS und Linux. Doch zun\u00e4chst wollen wir die Bedeutung von React er\u00f6rtern und wie es deinen Entwicklungsworkflow unterst\u00fctzen kann.<\/p>\n Auf geht’s!<\/p>\n React<\/a> ist eine leistungsstarke JavaScript-Bibliothek<\/a>, die speziell f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen entwickelt wurde. Sie wurde 2013 von Jordan Walke<\/a>, einem Softwareingenieur bei Facebook, entwickelt.<\/p>\n React konzentriert sich auf die Erstellung und Verwaltung von UI-Komponenten<\/a>, d. h. wiederverwendbaren Codebausteinen, die ihren Zustand verwalten und UI-Elemente darstellen k\u00f6nnen. Die komponentenbasierte Architektur ermutigt Entwickler\/innen, modulare und wiederverwendbare Komponenten zu erstellen, wodurch die Menge an doppeltem Code reduziert und die Entwicklungszeit verk\u00fcrzt wird.<\/p>\n Die Verwendung eines virtuellen DOM in React verbessert das Rendering und f\u00fchrt zu einer schnelleren und effizienteren Leistung im Vergleich zu herk\u00f6mmlichen DOM-Manipulationstechniken. Dieser Fokus auf Leistung und Wiederverwendbarkeit hat React zu einer beliebten Wahl unter Entwicklern gemacht.<\/p>\n\n React erfreut sich bei vielen Entwicklern gro\u00dfer Beliebtheit, da es eine leistungsstarke und flexible M\u00f6glichkeit bietet, Benutzeroberfl\u00e4chen f\u00fcr Webanwendungen zu erstellen. Hier ist ein Blick auf einige der Personen, die React h\u00e4ufig verwenden:<\/p>\n Viele prominente Unternehmen aus der Tech-Branche nutzen React, was seine Vielseitigkeit und weite Verbreitung unterstreicht. Einige Beispiele f\u00fcr Unternehmen, die React in ihrem Tech-Stack verwenden, sind:<\/p>\n Durch den Einsatz von React demonstrieren diese Unternehmen die Leistungsf\u00e4higkeit und Flexibilit\u00e4t dieser beliebten JavaScript-Bibliothek und machen sie zu einem unverzichtbaren Werkzeug f\u00fcr die moderne Webentwicklung.<\/p>\n React bietet mehrere Vorteile, die es zu einer beliebten Wahl f\u00fcr die moderne Webentwicklung machen.<\/p>\n Hier sind einige der wichtigsten Vorteile:<\/p>\n Die Architektur von React erm\u00f6glicht es Entwicklern, modulare und wiederverwendbare Komponenten zu erstellen, wodurch doppelter Code vermieden und die Wartung und Aktualisierung von Anwendungen erleichtert wird. Dieser Ansatz f\u00f6rdert die Konsistenz und vereinfacht den Entwicklungsprozess.<\/p>\n 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\u00e4ndert haben, minimiert React den Zeitaufwand f\u00fcr das Rendering und verbessert die Gesamtleistung der Anwendung.<\/p>\n Die React-Gemeinschaft ist sehr umfangreich und engagiert in der Entwicklung dieser Technologie. Sie teilt ihr Fachwissen regelm\u00e4\u00dfig \u00fcber Online-Plattformen wie Foren, soziale Medien und Blogs. Diese starke Unterst\u00fctzung durch die Community stellt sicher, dass React st\u00e4ndig weiterentwickelt und verbessert wird, und bietet gleichzeitig wertvolle Ressourcen f\u00fcr Entwickler\/innen, von denen sie lernen und Probleme beheben k\u00f6nnen.<\/p>\n Das React-\u00d6kosystem ist riesig und bietet eine F\u00fclle von Bibliotheken und Tools, die Entwicklern bei der Erstellung und Optimierung ihrer Anwendungen helfen. Diese Ressourcen k\u00f6nnen Zeit und M\u00fche sparen, indem sie vorgefertigte L\u00f6sungen und Erweiterungen f\u00fcr h\u00e4ufige Aufgaben und Herausforderungen bereitstellen.<\/p>\n React hat sich unter Entwicklern und Unternehmen weit verbreitet und ist daher eine beliebte Wahl f\u00fcr die Entwicklung moderner Webanwendungen<\/a>. Diese Beliebtheit bedeutet, dass Entwickler\/innen mit React-Kenntnissen sehr gefragt sind, was sie zu einer wertvollen Qualifikation auf dem Arbeitsmarkt macht.<\/p>\n 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:<\/p>\n Bevor du React installierst, musst du sicherstellen, dass dein System die notwendigen Voraussetzungen erf\u00fcllt. Das brauchst du:<\/p>\n Jedes Betriebssystem hat leicht unterschiedliche Anforderungen an die Installation von React. Folge den unten stehenden Anweisungen f\u00fcr das von dir verwendete Betriebssystem.<\/p>\n In diesem Abschnitt f\u00fchren wir dich durch die Installation von React auf einem Windows-Rechner.<\/p>\n Befolge diese Schritte, um loszulegen:<\/p>\n 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:<\/p>\n Nachdem die Installation abgeschlossen ist, kannst du \u00fcberpr\u00fcfen, ob Node.js und npm installiert sind, indem du eine Eingabeaufforderung \u00f6ffnest und die folgenden Befehle ausf\u00fchrst:<\/p>\n Diese Befehle sollten die Versionsnummern von Node.js bzw. npm anzeigen.<\/p>\n 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, \u00f6ffne eine Eingabeaufforderung und f\u00fchre den folgenden Befehl aus:<\/p>\n Dieser Befehl installiert Create React App auf deinem System und macht es in jedem Verzeichnis verf\u00fcgbar.<\/p>\n Jetzt, wo du Create React App installiert hast, kannst du damit ein neues React-Projekt erstellen. \u00d6ffne dazu eine Eingabeaufforderung, gehe in das Verzeichnis, in dem das Projekt gespeichert werden soll, und f\u00fchre den folgenden Befehl aus:<\/p>\n Ersetze „my-app“ durch den gew\u00fcnschten Namen f\u00fcr 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.<\/p>\n Sobald das Projekt erstellt ist, gehst du in das Projektverzeichnis, indem du den folgenden Befehl in der Eingabeaufforderung ausf\u00fchrst:<\/p>\n Ersetze „my-app“ durch den Namen deines Projektverzeichnisses. Starte nun den Entwicklungsserver, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n Mit diesem Befehl wird der Entwicklungsserver gestartet, der auf \u00c4nderungen an deinen Projektdateien achtet und den Browser automatisch neu l\u00e4dt, wenn \u00c4nderungen festgestellt werden.<\/p>\n Es sollte sich ein neues Browserfenster \u00f6ffnen, in dem deine React-Anwendung unter http:\/\/localhost:3000\/<\/a> l\u00e4uft und das wie folgt aussieht:<\/p>\n Herzlichen Gl\u00fcckwunsch! Du hast React erfolgreich auf deinem Windows-Rechner installiert und ein neues React-Projekt erstellt. Jetzt kannst du damit beginnen, deine Benutzeroberfl\u00e4chen mit React zu erstellen.<\/p>\n Gehen wir nun den Prozess der Installation von React auf einem Computer mit macOS durch:<\/p>\n 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:<\/p>\n Nachdem die Installation abgeschlossen ist, kannst du \u00fcberpr\u00fcfen, ob Node.js und npm installiert sind, indem du ein Terminal \u00f6ffnest und die folgenden Befehle ausf\u00fchrst:<\/p>\n Diese Befehle sollten die Versionsnummern von Node.js bzw. npm anzeigen.<\/p>\n Alternativ kannst du Node.js und npm auch \u00fcber die Kommandozeile installieren. Dazu \u00f6ffnest du Terminal und gibst ein:<\/p>\n Warte, bis die Installation abgeschlossen ist, und \u00fcberpr\u00fcfe sie dann auf die gleiche Weise wie oben, indem du eingibst<\/p>\n Und dann:<\/p>\n Jetzt k\u00f6nnen wir mit der Installation von Create React App auf macOS beginnen.<\/p>\n Create React App ist eine bequeme Methode, um eine einseitige Anwendung mit wenigen Schritten und ohne Konfiguration einzurichten.<\/p>\n Lass uns mit den Installationsschritten fortfahren.<\/p>\n \u00d6ffne zun\u00e4chst das Terminal und erstelle einen Ordner namens react-app, indem du den folgenden Befehl eingibst:<\/p>\n Als N\u00e4chstes navigierst du mit diesem Befehl in das react-app Verzeichnis:<\/p>\n Um zu \u00fcberpr\u00fcfen, ob du dich im richtigen Verzeichnis befindest, gibst du den folgenden Befehl ein und dr\u00fcckst die Eingabetaste:<\/p>\n Jetzt, wo du Create React App installiert hast, kannst du damit ein neues React-Projekt erstellen. Gib folgenden Befehl ein:<\/p>\n npx ist ein Modul, das zu npm geh\u00f6rt. Die Installationsschritte werden einige Zeit in Anspruch nehmen, also hab Geduld.<\/p>\n Nachdem der Befehl erfolgreich ausgef\u00fchrt wurde, navigiere zum Verzeichnis my-app:<\/p>\n Gib schlie\u00dflich ein:<\/p>\n Nach erfolgreicher Ausf\u00fchrung des Befehls \u00f6ffnet sich dein Standard-Webbrowser unter<\/p>\n http:\/\/localhost:3000\/<\/a>:<\/p>\n Und das war’s! React ist jetzt installiert und kann auf deinem macOS genutzt werden.<\/p>\n Wenn du ein Linux-basiertes System hast, kannst du React mit den folgenden Schritten installieren:<\/p>\n Logge dich als sudo-Benutzer auf deinem Server ein und f\u00fchre den folgenden Befehl aus:<\/p>\n Sobald die Installation abgeschlossen ist, \u00fcberpr\u00fcfe die installierte Version von npm mit dem Befehl:<\/p>\n Mit der Installation von npm wird auch Node.js installiert. Best\u00e4tige die installierte Version von Node mit dem Befehl:<\/p>\n create-react-app ist ein Dienstprogramm, mit dem du alle Werkzeuge einrichten kannst, die du f\u00fcr eine React-Anwendung brauchst.<\/p>\n Es spart Zeit und M\u00fche, indem es alles von Grund auf einrichtet und dir einen Vorsprung verschafft.<\/p>\n Um das Tool zu installieren, f\u00fchre den folgenden npm-Befehl aus:<\/p>\n Nach der Installation best\u00e4tigst du die Version von create-react-app, indem du ihn ausf\u00fchrst:<\/p>\n Das Erstellen einer React-Anwendung ist einfach und unkompliziert. Wir erstellen eine React-Anwendung namens my-app wie folgt:<\/p>\n Dieser Prozess dauert etwa 5 Minuten, um alle Pakete, Bibliotheken und Werkzeuge zu installieren, die f\u00fcr die Anwendung ben\u00f6tigt werden. Geduld ist der Schl\u00fcssel.<\/p>\n Wenn die Anwendung erfolgreich erstellt wurde, erh\u00e4ltst du eine Benachrichtigung mit den grundlegenden Befehlen, die du ausf\u00fchren kannst, um die Anwendung zu verwalten.<\/p>\n Um die Anwendung zu starten, navigiere in das App-Verzeichnis:<\/p>\n F\u00fchre dann den Befehl aus:<\/p>\n Du wirst eine Ausgabe sehen, die dir zeigt, wie du auf die Anwendung im Browser zugreifen kannst.<\/p>\n \u00d6ffne deinen Browser und navigiere zur IP-Adresse deines Servers:<\/p>\n http:\/\/server-ip:3000<\/p>\n Wie bei den Installationsprozessen unter Windows und macOS solltest du das React-Logo in deinem Browser sehen:<\/p>\n Das zeigt, dass die React-Standardapplikation l\u00e4uft und funktioniert.<\/p>\n Du hast jetzt erfolgreich React auf Linux installiert und eine Anwendung in React erstellt!<\/p>\n\n Ich hoffe, du hast diese Anleitung zur Installation von React unter Windows, macOS und Linux hilfreich gefunden. Wir haben die Voraussetzungen und Systemanforderungen f\u00fcr die Einrichtung einer React-Entwicklungsumgebung sowie die Installation von Node.js und npm behandelt. Au\u00dferdem haben wir gezeigt, wie du mit dem Dienstprogramm create-react-app ein neues React-Projekt erstellst und einen Entwicklungsserver startest.<\/p>\n Jetzt, wo du React auf deinem Rechner installiert hast, ist es an der Zeit, den Tutorials zu folgen<\/a>, Best Practices<\/a> zu lernen und herauszufinden, wie du tolle Benutzeroberfl\u00e4chen erstellen kannst. Das Design von React, seine Leistungsvorteile und die starke Unterst\u00fctzung durch die Community machen es zu einer hervorragenden Wahl f\u00fcr die moderne Webentwicklung.<\/p>\n\u00a0Was ist React?<\/h2>\n
![\"React](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/react-homepage.png\")
Wer nutzt React?<\/h2>\n
\n
\n
Vorteile der Verwendung von React<\/h2>\n
Komponentenbasiertes Design f\u00f6rdert die Wiederverwendbarkeit<\/h3>\n
Virtuelles DOM f\u00fcr bessere Leistung<\/h3>\n
Starke Unterst\u00fctzung durch die Community<\/h3>\n
Gro\u00dfe Auswahl an Bibliotheken und Tools von Drittanbietern<\/h3>\n
Beliebte Wahl f\u00fcr moderne Webentwicklung<\/h3>\n
React-Voraussetzungen<\/h2>\n
\n
Systemvoraussetzungen<\/h3>\n
\n
So installierst du React<\/h2>\n
So installierst du React unter Windows<\/h2>\n
\n
Schritt 1: Node.js und npm installieren<\/h3>\n
\n
![\"Herunterladen](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/nodejs-download.png\")
node -v npm -v<\/code><\/pre>\nSchritt 2: Create React App installieren<\/h3>\n
npm install -g create-react-app<\/code><\/pre>\nSchritt 3: Ein neues React-Projekt erstellen<\/h3>\n
create-react-app my-app<\/code><\/pre>\nSchritt 4: Gehe in das Projektverzeichnis und starte den Entwicklungsserver<\/h3>\n
cd my-app<\/code><\/pre>\nnpm start<\/code><\/pre>\n![\"React](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/react-on-windows.png\")
So installierst du React auf macOS<\/h2>\n
\n
Schritt 1: Node.js und npm installieren<\/h3>\n
\n
![\"Herunterladen](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/download-nodejs-mac.png\")
\n
![\"Befolge](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/nodejs-installation-mac.png\")
node -v<\/code><\/pre>\nnpm -v<\/code><\/pre>\nbrew install node<\/code><\/pre>\nnode -v<\/code><\/pre>\nnpm -v<\/code><\/pre>\nSchritt 2: Installiere Create React App auf deinem macOS<\/h3>\n
mkdir react-app<\/code><\/pre>\ncd react-app<\/code><\/pre>\npwd<\/code> Wenn du sichergestellt hast, dass du dich im richtigen Verzeichnis befindest, kannst du ein neues React-Projekt erstellen.<\/pre>\nSchritt 3: Ein neues React-Projekt erstellen<\/h3>\n
npx create-react-app my-app<\/code><\/pre>\nSchritt 4: Gehe in das Projektverzeichnis und starte den Entwicklungsserver<\/h3>\n
cd my-app<\/code><\/pre>\nnpm start<\/code><\/pre>\n![\"Nach](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/macos-local.png\")
So installierst du React unter Linux<\/h2>\n
\n
Schritt 1: Installiere npm<\/h3>\n
sudo apt install npm<\/code><\/pre>\nnpm --version<\/code><\/pre>\nnode --version<\/code><\/pre>\nSchritt 2: Installiere das Dienstprogramm create-react-app<\/h3>\n
sudo npm -g install create-react-app<\/code><\/pre>\ncreate-react-app --version<\/code><\/pre>\nSchritt 3: Erstelle und starte deine erste React-Anwendung<\/h3>\n
create-react-app my-app<\/code><\/pre>\ncd my-app<\/code><\/pre>\nnpm start<\/code><\/pre>\n![\"Nach](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/linux-complete.png\")
Zusammenfassung<\/h2>\n