Freigeben über

React-Übersicht

Was ist React JS?

React ist eine Open-Source-JavaScript-Bibliothek zum Erstellen von Front-End-Benutzeroberflächen. Im Gegensatz zu anderen JavaScript-Bibliotheken, die ein vollständiges Anwendungsframework bereitstellen, konzentriert sich React ausschließlich auf das Erstellen von Anwendungsansichten über gekapselte Einheiten, die als Komponenten bezeichnet werden, die Zustand beibehalten und UI-Elemente generieren. Sie können eine einzelne Komponente auf einer Webseite platzieren oder Hierarchien von Komponenten verschachteln, um eine komplexe Benutzeroberfläche zu erstellen.

React-Komponenten werden in der Regel in JavaScript und JSX (JavaScript XML) geschrieben. Dabei handelt es sich um eine JavaScript-Erweiterung, die HTML sehr ähnlich sieht, aber über einige Syntaxfunktionen verfügt, die das Ausführen gängiger Aufgaben wie das Registrieren von Event-Handlern für Benutzeroberflächenelemente vereinfachen. Eine React-Komponente implementiert die Rendermethode , die jsX zurückgibt, die die Benutzeroberfläche der Komponente darstellt. In einer Web-App wird der von der Komponente zurückgegebene JSX-Code in einen browserkonformen HTML-Code übersetzt, der in den Browser übertragen wird.

Wichtig

Im Februar 2025 gab das React-Team bekannt , dass Create React App (CRA) für neue Apps veraltet ist. Das Team empfiehlt, vorhandene Apps zu einem Framework wie Next.js oder React Router zu migrieren oder eine Migration zu einem Buildtool wie Vite, Paket oder RSBuild vorzunehmen.

Funktioniert React an Windows?

Ja. Windows unterstützt zwei verschiedene Umgebungen für die Entwicklung von React-Apps:

Wozu kann ich React nutzen?

Windows unterstützt eine Vielzahl von Szenarien für React-Entwickler, darunter:

  • de-DE: Basic-Web-Apps: Wenn Sie mit React noch nicht vertraut sind und hauptsächlich daran interessiert sind, eine grundlegende Web-App mit React zu erstellen, empfehlen wir Ihnen, eine React-App mit dem Vite-Frontend-Tooling auf Windows zu erstellen. Wenn Sie planen, eine Web-App zu erstellen, die für die Produktion bereitgestellt wird, sollten Sie in Betracht ziehen, eine React-App mithilfe der Vite-Frontend-Tools auf Windows Subsystem for Linux (WSL) zu erstellen, um bessere Leistung, Systemaufrufkompatibilität und eine bessere Ausrichtung zwischen Ihrer lokalen Entwicklungsumgebung und der Bereitstellungsumgebung (die häufig ein Linux-Server ist) zu erreichen.

  • Single-Page Apps (SPAs): Hierbei handelt es sich um Websites, die mit dem Benutzer interagieren, indem die aktuelle Webseite dynamisch mit neuen Daten von einem Server umgeschrieben wird, anstatt dass der Browser standardmäßig ganze neue Seiten lädt. Wenn Sie eine statische inhaltsorientierte SPA-Website erstellen möchten, empfehlen wir die Installation von Gatsby auf WSL. Wenn Sie eine vom Server gerenderte SPA-Website mit einem Node.js-Back-End erstellen möchten, empfehlen wir die Installation von Next.js auf WSL. (Obwohl Next.js jetzt auch statische Datei-Bereitstellung bietet).

  • Native Desktop-Apps: React Native für Desktop + macOS ermöglicht es Ihnen, systemeigene Desktopanwendungen mit JavaScript zu erstellen, die auf verschiedenen Arten von Desktop-PCs, Laptops, Tablets, Xbox und Mixed Reality Geräten ausgeführt werden. Es unterstützt sowohl das Windows SDK als auch macOS SDK.

  • Native mobile Apps: React Native ist eine plattformübergreifende Möglichkeit zum Erstellen von Android- und iOS-Apps mit JavaScript, die in systemeigenem Plattform-UI-Code gerendert werden. Es gibt zwei Hauptmethoden zum Installieren von React Native: die Expo-CLI und die React Native CLI. Es gibt einen guten Vergleich der beiden auf StackOverflow. Expo verfügt über eine Client-App für mobile iOS- und Android-Geräte zum Ausführen und Testen Ihrer Apps. Anweisungen zum Entwickeln einer Android-App mit Windows, React Native und der Expo CLI finden Sie unter React Native for Android development on Windows.

Installationsoptionen

Es gibt verschiedene Möglichkeiten, React zusammen mit einer integrierten Toolkette zu installieren, die für Ihr Anwendungsfallszenario am besten geeignet ist. Dies sind einige der gängigsten Optionen:

React-Tools

Während das Schreiben einer einfachen React-Komponente in einem Nur-Text-Editor zwar eine gute Einführung in React ist, ist aber der Code, der auf diese Weise generiert wird, sperrig, schwierig zu verwalten und bereitzustellen und langsam. Es gibt einige allgemeine Aufgaben, die Produktions-Apps ausführen müssen. Diese Aufgaben werden von anderen JavaScript-Frameworks verarbeitet, die von der App als Abhängigkeit verwendet werden. Diese Aufgaben sind unter anderem:

  • Kompilierung – JSX ist die Sprache, die häufig für React-Apps verwendet wird, aber Browser können diese Syntax nicht direkt verarbeiten. Stattdessen muss der Code in die JavaScript-Standardsyntax kompiliert und für verschiedene Browser angepasst werden. Babel ist ein Beispiel für einen Compiler, der JSX unterstützt.
  • Bündelung – Da die Leistung für moderne Web-Apps von entscheidender Bedeutung ist, ist es wichtig, dass das JavaScript einer App nur den erforderlichen Code für die App enthält und in so wenige Dateien wie möglich kombiniert wird. Ein Bundler, z. B. Webpack , führt diese Aufgabe für Sie aus.
  • Paketverwaltung – Paketmanager erleichtern die Einbeziehung der Funktionen von Drittanbieterpaketen in Ihre App, einschließlich der Aktualisierung und Verwaltung von Abhängigkeiten. Häufig verwendete Paketmanager umfassen Yarn und npm.

Zusammen wird die Reihe von Frameworks, die Sie beim Erstellen, Aufbauen und Bereitstellen Ihrer App unterstützen, als Toolkette bezeichnet. Eine einfach einzurichtende Entwicklungsumgebung für React, die diese Toolkette verwendet, ist Vite , die eine einfache einseitige App für Sie generiert. Das einzige Setup, das für die Verwendung von Vite erforderlich ist, ist Node.js.

React Native Komponentenverzeichnis

Die Komponenten, die in einer React Native-App verwendet werden können, umfassen die Folgenden:

  • Kernkomponenten: Komponenten, die als Teil des React Native Frameworks entwickelt und unterstützt werden.
  • Community-Komponenten: Komponenten, die von der Community entwickelt und verwaltet werden.
  • Native Komponenten: Komponenten, die Sie selbst mit plattformnativem Code erstellen und registrieren, um von React Native aus darauf zugreifen zu können.

Das React Native Directory enthält eine Liste von Komponentenbibliotheken, die nach Zielplattform gefiltert werden können.

Fullstack React-Toolkettenoptionen

React ist eine Bibliothek und kein Framework, sodass möglicherweise zusätzliche Tools erforderlich sind, um eine komplexere App zu erstellen. Zusätzlich zur Verwendung von React sollten Sie in Betracht ziehen Folgendes zu verwenden:

  • Paket-Manager: Zwei beliebte Paketmanager für React sind npm (die in NodeJS enthalten ist) und Yarn. Beide unterstützen eine umfassende Bibliothek mit gut verwalteten Paketen, die installiert werden können.
  • React Router: Eine Sammlung von Navigationskomponenten, die Ihnen bei Elementen wie Lesezeichen-URLs für Ihre Web-App oder einer komponierbaren Methode zum Navigieren in React Native helfen können. React befasst sich eigentlich nur mit der Zustandsverwaltung und dem Übertragen dieses Zustands im DOM, sodass zum Erstellen von React-Anwendungen normalerweise eine Routingbibliothek wie React Router verwendet werden muss.
  • Redux: Ein vorhersehbarer Zustandscontainer, der bei der Datenflussarchitektur hilft. Dies ist wahrscheinlich erst erforderlich, wenn Sie in die fortgeschrittenere React-Entwicklung einsteigen. Zitat von Dan Abramov, einem der Mitbegründer von Redux: „Verwenden Sie Redux erst, wenn Sie Probleme mit Vanilla-React haben.“
  • Webpack: Ein Buildtool, mit dem Sie JavaScript-Module kompilieren können, auch als Modulbundleer bezeichnet. Wenn Webpack Ihre Anwendung verarbeitet, wird intern ein Abhängigkeitsdiagramm erstellt, das jedes Modul zuordnet, das Ihr Projekt benötigt, und ein oder mehrere Bundles generiert.
  • Uglify: Ein JavaScript-Parser, Minifier, Kompressor und Beautifier-Toolkit.
  • Babel: Ein JavaScript-Compiler, der hauptsächlich zum Konvertieren von ECMAScript 2015+-Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen verwendet wird. Es kann auch hilfreich sein, babel-preset-env zu verwenden, da Sie dann nicht jede Syntaxtransformation und jeden Browser-Polyfill im Detail verwalten müssen und festlegen können, welche Internetbrowser unterstützt werden sollen.
  • ESLint: Ein Tool zum Identifizieren und Melden von Mustern in Ihrem JavaScript-Code, mit dem Sie Ihren Code konsistenter gestalten und Fehler vermeiden können.
  • Enzym: Ein JavaScript-Testprogramm für React, das das Testen der React-Komponentenausgabe erleichtert.
  • Jest: Ein Testframework, das mit Babel zusammenarbeitet, um idiomatische JavaScript-Tests in React-Apps zu schreiben.
  • Mocha: Ein Testframework, das auf Node.js und im Browser ausgeführt wird, um asynchrones Testen, Melden und Zuordnen ungenauer Ausnahmen zu den richtigen Testfällen zu unterstützen.

React-Kurse und -Tutorials

Hier sind einige empfohlene Stellen, um React zu erlernen und Beispiel-Apps zu erstellen:

Zusätzliche Ressourcen

  • Last updated on