React-Übersicht

  • Artikel

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 eingekapselte Einheiten, die als Komponenten bezeichnet werden, die den Zustand beibehalten und Benutzeroberflächenelemente 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 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.

Funktioniert React unter 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:

  • Einfache Web-Apps: Wenn Sie noch nicht mit React arbeiten und in erster Linie daran interessiert sind, mehr über das Erstellen einer einfachen Web-App mit React zu erfahren, wird empfohlen, die Create-React-App direkt unter Windows zu installieren. Wenn Sie planen, eine Web-App zu erstellen, die für die Produktion bereitgestellt wird, sollten Sie erwägen, die Create-React-App unter Windows-Subsystem für Linux (WSL)zu installieren, um eine bessere Leistungsgeschwindigkeit, Kompatibilität von Systemaufrufen und eine Abstimmung zwischen Ihrer lokalen Entwicklungsumgebung und Bereitstellungsumgebung (häufig ein Linux-Server) zu erzielen.

  • 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 neu geschrieben wird, anstatt dass der Browser standardmäßig ganze neue Seiten lädt. Wenn Sie eine statische inhaltsorientierte SPA-Website erstellen möchten, empfiehlt es sich, Gatsby unter WSL zu installieren. Wenn Sie eine vom Server übertragene SPA-Website mit einem Node.js Back-End erstellen möchten, empfiehlt es sich, Next.js unter WSL zu installieren. (Obwohl Next.js jetzt auch statische Datei bereitstellt).

  • Native Desktop-Apps: Mit React Native für Windows und macOS können Sie native Desktopanwendungen mit JavaScript 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 das macOS SDK.

  • Native mobile Apps: React Native ist eine plattformübergreifende Möglichkeit zum Erstellen von Android- und iOS-Apps mit JavaScript, die in nativem Plattform-Benutzeroberfläche-Code übertragen 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 in 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 für die Android-Entwicklung unter 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, Browser können diese Syntax jedoch 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 Leistung für moderne Web-Apps entscheidend ist, ist es wichtig, dass das JavaScript einer App nur den erforderlichen Code für die App enthält und so wenige Dateien wie möglich kombiniert. Ein Bundler wie Webpack führt diese Aufgabe für Sie aus.
  • Paketverwaltung: Paket-Manager machen es einfach, die Funktionalität von Drittanbieterpaketen in Ihre App einzubinden, sie upzudaten und Abhängigkeiten zu verwalten. Häufig verwendete Paket-Manager sind 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. Die einzige Einrichtung, die 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 der 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 Paket-Manager für React sind NPM (in NodeJS enthalten) und Yarn. Beide unterstützen eine umfassende Bibliothek mit gut verwalteten Paketen, die installiert werden können.
  • React Router: Eine Sammlung von Navigationskomponenten, die Sie bei Dingen wie, lesezeichenfähige URLs für Ihre Web-App oder eine zusammensetzbare Möglichkeit zum Navigieren in React Native, unterstützen 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 vorhersagbarer Zustandscontainer, der bei der Datenflussarchitektur hilft. Dies ist wahrscheinlich erst erforderlich, wenn Sie in die fortgeschrittenere React-Entwicklung einsteigen. Zitat von Dan Abramov, einer der Ersteller von Redux: „Verwenden Sie Redux erst, wenn Sie Probleme mit React haben.“
  • Webpack: Ein Build-Tool, mit dem Sie JavaScript-Module kompilieren können, die auch als Modulbundeler bezeichnet werden. 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, ein Toolkit zur Minimierung, Kompression und Verschönerung.
  • Babel: Ein JavaScript-Compiler, der hauptsächlich verwendet wird, um ECMAScript 2015 und höher Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen zu konvertieren. Es kann auch hilfreich sein, Babel-Preset-Env zu verwenden, damit Sie keine Transformationen der Micromanagesyntax oder Browserpolyfills benötigen und definieren 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 machen und Fehler vermeiden können.
  • Enzyme: Ein JavaScript-Testprogramm für React, das das Testen der Ausgabe Ihrer React-Komponenten vereinfacht.
  • Jest: Ein Testframework, das in das Create-React-App-Paket integriert ist, um das Schreiben von idiomatischen JavaScript-Tests zu unterstützen.
  • Mocha: Ein Testframework, das auf Node.js und im Browser ausgeführt wird, um asynchrone Tests, Berichte und die Zuordnung von nicht abgefangenen 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