Was ist React: Funktionen verstehen und wie man es für die moderne Webentwicklung einsetzt

React ist eine der beliebtesten JavaScript-Bibliotheken zur Entwicklung von mobilen und Web-Anwendungen. Entwickelt von Meta (ehemals Facebook), ermöglicht React Entwicklern das Erstellen wiederverwendbarer Komponenten zum Aufbau von Benutzeroberflächen (UIs).

Es ist wichtig zu beachten, dass React kein Framework ist. Das liegt daran, dass es nur für das Rendern der Komponenten einer Anwendungsschicht verantwortlich ist. Jedoch bietet React eine Alternative zu Frameworks wie Angular und Vue, die es Ihnen ermöglicht, komplexe Funktionalitäten damit zu konstruieren.

Dieser Artikel erklärt, wie React funktioniert, untersucht seine Funktionen und diskutiert die Vorteile der Verwendung von React.js für Front-End-Entwickler. Darüber hinaus werden wir React.js und React Native vergleichen und ihre Funktionen für die Web- und Mobile-App-Entwicklung diskutieren.

Zusätzlich werden wir Sie durch die Bereitstellung einer React-Anwendung auf Hostingers VPS führen.

React JavaScript, oder React.js, behandelt komplexe Benutzeroberflächen und bietet Entwicklern eine strukturierte und effiziente Möglichkeit, interaktive, datengesteuerte Oberflächen zu erstellen.

Wie funktioniert React?

React führt JSX ein, eine Syntaxerweiterung, die nahtlos JavaScript- und HTML-Code kombiniert. JSX-Tags ähneln XML mit einigen Unterschieden.

Zum Beispiel verwendet React className anstelle des traditionellen class Attributs für CSS-Klassen. Numerische Werte und Ausdrücke sind in geschweiften Klammern eingeschlossen, während Anführungszeichen Zeichenketten kennzeichnen, ähnlich wie in JavaScript.

Das Folgende ist ein Beispiel für einen React-Code-Schnipsel:

<MyCounter count={3 + 5} />;
const GameScores = { player1: 2, player2: 5 };
<DashboardUnit data-index="2">
 <h1>Scores</h1>
 <Scoreboard className="results" scores={GameScores} />
</DashboardUnit>;

Hier ist eine Aufschlüsselung des oben genannten React-Code-Schnipsel:

• <MyCounter count={3 + 5} />; – diese Zeile rendert eine MyCounter React-Komponente mit dem count Prop gesetzt auf 8.
• const GameScores = { player1: 2, player2: 5 }; – dieser Code erstellt ein Objekt, GameScores, mit Spielerpunkten.
• <DashboardUnit data-index= “2”> – es rendert eine DashboardUnit-Komponente mit einem data-index Attribut, das auf 2 gesetzt ist.
• <h1>Scores</h1>  – diese Zeile erzeugt ein <h1> Überschrift-Element mit dem Text Scores.
• <Scoreboard className= “results” scores={GameScores} /> – dies rendert eine Scoreboard-Komponente mit einer CSS-Klasse und Spielständen als Attribute weitergegeben.

React nutzt auch das virtuelle DOM, um die Leistung zu optimieren, indem direkte DOM-Manipulationen minimiert werden. Es berechnet die Unterschiede zwischen dem aktuellen und dem vorherigen virtuellen DOMs, wenn Änderungen auftreten, und aktualisiert effizient das echte DOM.

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Der obige Codeausschnitt kann wie folgt erklärt werden:

• const element = <h1>Hallo Welt!</h1>; – diese Zeile erstellt eine Variable namens element und weist ihr ein JSX-Element zu. In diesem Fall ein <h1> Element, das den Text Hallo Welt! enthält.
• ReactDOM.render(element, document.getElementById(‘root’));  – dieser Code verwendet die render-Methode, um ein JSX-Element in das echte DOM zu aktualisieren. In diesem Fall rendert es das JSX-Element in das HTML-Element mit der ID root.

Warum sollte man React verwenden?

Hunderte von großen Unternehmen weltweit, wie Netflix, Airbnb und American Express, verwenden React, um ihre Web-Apps zu erstellen. In diesem Abschnitt werden wir die Gründe diskutieren, warum viele Entwickler React gegenüber seinen Konkurrenten bevorzugen.

1. Einfach zu benutzen

Webentwickler mit JavaScript-Kenntnissen können schnell lernen, wie man React verwendet, da es auf reinem JavaScript basiert und einen komponentenbasierten Ansatz verfolgt. Damit können Sie webbasierte Anwendungen entwickeln.

Wenn Sie sich mit JavaScript vertrauter machen müssen, bieten viele Websites kostenlose Programmierstunden an. Sobald Sie die Grundlagen von JavaScript kennen, informieren Sie sich über React, um den Prozess der Front-End-Entwicklung zu optimieren.

2. Unterstützt wiederverwendbare Komponenten

React ermöglicht es Ihnen, Komponenten wiederzuverwenden, die für andere Anwendungen entwickelt wurden. Als solche können Sie React-Komponenten vorab erstellen, um die Entwicklungszeit für komplexe Webanwendungen erheblich zu reduzieren.

Darüber hinaus ermöglicht Ihnen React, Komponenten in anderen zu verschachteln, um komplexe Funktionen zu erstellen, ohne den Code aufzublähen. Jede React-Komponente hat ihre Steuerelemente, was die Wartung nahtlos macht.

3. Einfacheres Schreiben von Komponenten

React ermöglicht es Ihnen, JavaScript-Objekte mit HTML-Syntax und Tags zu kombinieren. Sie können auch Komponenten schreiben und React zu einer bestehenden HTML-Seite mit JSX-Integration hinzufügen. JSX vereinfacht das Rendern mehrerer Funktionen und hält den Code übersichtlich, ohne die Fähigkeiten der App einzuschränken.

Obwohl JSX nicht die am weitesten verbreitete Syntaxerweiterung ist, hat es sich bei der Entwicklung spezieller Komponenten und dynamischer Anwendungen als effizient erwiesen.

Das offizielle Befehlszeilen-Interface (CLI)-Tool von React, genannt Create React App, optimiert die Entwicklung von Einzelseitenanwendungen weiter. Es verfügt über einen modernen Einrichtungsprozess mit vorkonfigurierten Tools, die hervorragend zum Erlernen von React geeignet sind.

4. Hohe Leistung

Das Virtuelle Dokumenten-Objektmodell ermöglicht es React, den DOM-Baum effizient zu aktualisieren. Die Speicherung des virtuelle DOM beseitigt es übermäßiges erneutes Rendern, das die Leistung beeinträchtigen könnte.

Zusätzlich vereinfacht die One-Way-Datenbinding von React zwischen Elementen den Debugging-Prozess. Änderungen an Child-Komponenten wirken sich nicht auf die Parent-Struktur aus, wodurch das Risiko von Fehlern verringert wird.

5. SEO-freundlich

React kann die Suchmaschinenoptimierung (SEO) von Webanwendungen verbessern, indem es ihre Leistung steigert und die Ladezeit für JavaScript-Code reduziert. Die Implementierung des virtuellen DOM trägt zu schnelleren Seitengeschwindigkeiten bei.

Sie hilft auch Suchmaschinen bei der Navigation durch Webanwendungen, indem sie serverseitiges Rendering ermöglicht. Diese Art der Darstellung behebt eines der größten Probleme von JavaScript-lastigen Websites, da Suchmaschinen sie in der Regel als schwierig und zeitaufwändig zu durchsuchen empfinden.

Merkmale von React

Die Merkmale und Funktionen von React.js unterscheiden es von anderen JavaScript-Bibliotheken. Die folgenden Abschnitte werden diese Funktionen vorstellen und ihre Beiträge zur Entwicklung von mobilen und Webanwendungen erläutern.

1. JSX

JSX ist eine JavaScript-Syntaxerweiterung, die in React zur Elementerstellung verwendet wird. Entwickler verwenden es, um HTML-Code in JavaScript-Objekte einzubetten. JSX kann JavaScript-Funktionen und -Ausdrücke einbetten, was komplexe Code-Strukturen vereinfacht.

Schauen wir uns ein Beispiel für das Einbetten eines Ausdrucks in JSX an:

const name = 'John Smith';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
 element,
 document.getElementById('root')
);

In der zweiten Zeile wird die Variable Name mit geschweiften Klammern eingebettet. Dies ermöglicht die Einbeziehung von dynamischen Inhalten in das JSX. In der Zwischenzeit rendert die Funktion ReactDOM.render(), die die Benutzeroberfläche definiert, das React-Element im DOM-Baum.

JSX hilft auch dabei, Cross-Site-Scripting (XSS) Angriffe zu mildern. Standardmäßig konvertiert React DOM-Werte, die in JSX eingebettet sind, in Zeichenketten, bevor sie gerendert werden. Daher können Dritte keinen zusätzlichen Code durch Benutzereingaben einfügen, es sei denn, dies ist ausdrücklich in der Anwendung angegeben.

2. Virtuelles DOM

Das Document Object Model (DOM) stellt eine Website als strukturierten Datenbaum dar. React speichert virtuelle DOM-Bäume im Speicher, was es ermöglicht, spezifische Teile des Datenbaums effizienter zu aktualisieren als den gesamten DOM-Baum neu zu rendern.

Immer wenn sich Daten ändern, erzeugt React einen neuen virtuellen DOM-Baum und vergleicht ihn mit dem vorherigen, um die effizienteste Methode zur Implementierung von Änderungen im echten DOM zu ermitteln. Dieser Prozess wird als Diffing bezeichnet.

Die Sicherstellung, dass die Manipulation der Benutzeroberfläche nur bestimmte Bereiche des echten DOM-Baums beeinflusst, macht die aktualisierte Version schneller und verbraucht weniger Ressourcen. Diese Praxis bringt großen Projekten mit intensiver Benutzerinteraktion erhebliche Vorteile.

3. Komponenten und Attribute

React teilt die Benutzeroberfläche in isolierte, wiederverwendbare Code-Stücke, die als Komponenten bezeichnet werden. React-Komponenten sind die Grundlage für die Erstellung von Benutzeroberflächen. Sie funktionieren ähnlich wie JavaScript-Funktionen und akzeptieren beliebige Eingaben, die als Eigenschaften oder Attribute bekannt sind.

Zurückgegebene React-Elemente, die erzeugt werden, wenn Sie interaktive React-Komponenten rendern, sind entscheidend für die Definition, wie die Benutzeroberfläche am Ende des Kunden erscheinen wird. Hier ist ein Beispiel für eine React-Komponente:

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Interaktive Komponenten, ob Klassenkomponenten oder Funktionskomponenten, erhalten Daten durch Eigenschaften oder Attribute von der übergeordneten Komponente. React unterstützt auch asynchrone Komponenten, was ein effizientes Abrufen und Rendern von Daten ermöglicht.

Sie können so viele React-Komponenten haben, wie Sie benötigen, ohne Ihren Code zu überladen.

4. Zustandsverwaltung 

Ein Zustand ist ein JavaScript-Objekt, das die Daten einer React-Komponente hält. Dieser Zustand kann sich ändern, wenn ein Benutzer mit der Anwendung interagiert, wodurch eine neue Benutzeroberfläche gerendert wird, die diese Änderungen widerspiegelt.

Die Verwaltung von Zuständen kann innerhalb von React selbst oder optional über Drittanbieter-Bibliotheken gehandhabt werden. Sie erleichtert den Umgang mit komplexeren Daten und löst den Neurendering-Prozess aus, wann immer sich die Daten ändern.

Zwei der beliebtesten Bibliotheken zur Zustandsverwaltung sind Redux und Recoil.

Redux

Die Redux State-Management-Bibliothek bietet einen zentralisierten Speicher, der den Zustandsbaum einer Anwendung verwaltet und Vorhersehbarkeit gewährleistet. Die Architektur von Redux unterstützt Fehlerprotokollierung für eine einfachere Fehlerbehebung und folgt einer strengen Methode zur Code-Organisation.

Allerdings kann Redux komplex sein und ist möglicherweise nicht die beste Wahl für kleine Anwendungen mit einer einzigen Datenquelle.

Recoil

Recoil verwendet reine Funktionen, die als Selektoren bezeichnet werden, um Daten aus aktualisierbaren Einheiten des Zustands zu berechnen, die als Atome bekannt sind. Mehrere Komponenten können sich auf das gleiche Atom beziehen, was es ihnen ermöglicht, einen Zustand zu teilen.

Dieser Ansatz verhindert redundante Zustände, vereinfacht den Code und beseitigt übermäßige erneute Darstellungen von React und seinen untergeordneten Komponenten. Recoil wird oft als anfängerfreundlicher als Redux betrachtet, aufgrund seiner einfacheren Kernkonzepte.

5. Programmatische Navigation

Programmatische Navigation bezieht sich auf Situationen, in denen Codezeilen Aktionen auslösen, die Benutzer umleiten. Wenn beispielsweise Benutzer Anmelde- oder Registrierungsvorgänge durchführen, führt sie die programmatische Navigation zu den relevanten Seiten.

React Router, die Standardbibliothek von React für das Routing, bietet mehrere Möglichkeiten, eine sichere programmatische Navigation zwischen Komponenten zu erreichen, ohne dass Benutzer auf Links klicken müssen.

Die primäre Methode der programmatischen Navigation ist die Verwendung einer Umleitungs-Komponente, aber Sie können auch history.push() als Alternative nutzen.

Kurz gesagt, das React Router Paket synchronisiert die Benutzeroberfläche mit der URL und gibt Ihnen die Kontrolle über das Aussehen von React-Anwendungen, ohne sich ausschließlich auf vom Benutzer initiierte Link-Klicks zu verlassen.

React Native verstehen

React Native ist ein Open-Source-JavaScript-Framework, das auf der React-Bibliothek basiert. Entwickler verwenden es, um plattformübergreifende React-Anwendungen für iOS und Android zu erstellen, die ein nahtloses Erlebnis für native Benutzeroberflächen bieten.

React Native nutzt native Anwendungsprogrammierschnittstellen (APIs), um mobile UI-Komponenten in Objective-C (iOS) oder Java (Android) zu rendern. Dieser Ansatz ermöglicht es Entwicklern, plattformspezifische Komponenten zu erstellen, während sie Quellcode über mehrere Plattformen hinweg teilen.

Trotz ihrer Ähnlichkeiten unterscheidet sich React Native von React.js. Hier ist ein schneller Vergleich von React.js gegen React Native:

Aspekt	React.js	React Native
Plattform	Webanwendungen	Mobilanwendungen (iOS, Android, usw.)
Rendering	DOM-basiert	Native Komponenten
Sprache	JavaScript	JavaScript
Entwicklungsansatz	Einzelseitenanwendungen	Plattformübergreifende mobile Apps
UI-Komponenten	HTML, CSS und React-Komponenten	Native Komponenten und React-Komponenten
Navigation	Browserbasierte Navigation	Native Navigation
Drittanbieter-Plugins	Web-spezifische Erweiterungen, Plugins und Bibliotheken	Native mobile Plugins und Bibliotheken
Leistung	Web-Leistung	Native-Level-Niveau
Benutzerfreundlichkeit	Webbasierte Benutzeroberfläche	Heimisches Aussehen und Gefühl

Wie benutzt man React?

Die Implementierung der Webentwicklung mit React beinhaltet verschiedene Schritte und bewährte Methoden, um effizienten und wartbaren Code zu gewährleisten. Folgen Sie diesen Schritten, um mit React zu beginnen:

1. Überprüfen Sie die Installation von Node.js und npm

Bevor Sie mit React arbeiten, installieren Sie Node.js und npm (Node Package Manager) auf Ihrem System. Sie können deren Installation überprüfen, indem Sie die folgenden Befehle in Ihrem Terminal ausführen:

node -v
npm -v

Wenn Node.js und npm nicht installiert sind, können Sie sie von der offiziellen Node.js-Website herunterladen und installieren.

2. Erstellen Sie eine React-App

React bietet ein praktisches Werkzeug namens Create React App, das die Projekteinrichtung vereinfacht. Um eine neue React-App zu erstellen, führen Sie den folgenden Befehl aus:

npx create-react-app my-react-app

Ersetzen Sie my-react-app durch den gewünschten Namen Ihrer Anwendung. Dieser Befehl erstellt ein neues React-Projekt mit den notwendigen Dateien und Abhängigkeiten.

3. Navigieren Sie zu Ihrem Projektverzeichnis

Greifen Sie auf Ihr Projektverzeichnis zu, indem Sie den folgenden Befehl verwenden:

cd my-react-app

4. Starten Sie den Entwicklungsserver

Starten Sie den Entwicklungsserver, um Ihre React-App in Aktion zu sehen:

npm start

Dieser Befehl startet den Entwicklungsserver und macht Ihre React-App unter http://localhost:3000 erreichbar. Der Entwicklungsserver bietet auch Live-Neuladen an, was Ihnen ermöglicht, Echtzeitänderungen zu beobachten, während Sie Ihren Code bearbeiten.

5. Erkunden Sie die Projektstruktur

Nehmen Sie sich einen Moment Zeit, um die von der Create React App erstellte Projektstruktur zu erkunden. Hauptverzeichnisse beinhalten:

• src : Dieser Ordner enthält den Quellcode Ihrer Anwendung.
• puclic : Dieser Ordner enthält statische Assets und die HTML-Vorlage für Ihre App.

6. Erstellen Sie Ihre erste React-Komponente

Öffnen Sie das src-Verzeichnis und navigieren Sie zu der App.js-Datei. Diese Datei dient als Einstiegspunkt Ihrer React-Anwendung. Ändern Sie den Inhalt dieser Datei, um Ihre erste React-Komponente zu erstellen.

Hier ist ein grundlegendes Beispiel für eine funktionale Komponente:

import React from 'react';
function App() {
  return (
   <div>
<h1>Hello, React!</h1>
   </div>
 );
}
export default App;

7. Rendern Sie Ihre Komponente

React-Komponenten empfangen Daten und bestimmen, was auf der Kundenseite erscheinen sollte. Um Ihre Komponente anzuzeigen, rendern Sie sie in der src/index.js-Datei:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

8. Beginnen Sie mit dem Aufbau Ihrer App

Wenn Ihre ersten React-Komponente bereit ist, können Sie Ihre React-Anwendung weiter aufbauen. Erstellen Sie zusätzliche Komponenten, bearbeiten Sie Benutzerinteraktionen und verwalten Sie Zustände, während Ihr Projekt sich weiterentwickelt.

Wie kann man eine React-Anwendung auf Hostinger bereitstellen?

Um Ihre React-Anwendung für Benutzer im Web zugänglich zu machen, müssen Sie sie auf einem Server bereitstellen. Hostingers Hosting für VPS kommt mit vollem Root-Zugriff, einem umfassenden Dateimanager und einem KI-Assistenten. Es ist auch leicht skalierbar, was es zu einer ausgezeichneten Wahl für das Hosting Ihrer React-Projekte macht.

Die folgende Anleitung zeigt, wie man eine React-App auf Hostinger mit einem Ubuntu 22.04 64bit Betriebssystem einsetzt:

1. Stellen Sie sicher, dass Ihre React-App produktionsbereit ist, indem Sie einen Produktionsbuild erstellen. Navigieren Sie zu Ihrem Projektverzeichnis, das Ihre React-App enthält, und führen Sie den folgenden Befehl aus:

npm run build

2. Melden Sie sich bei Ihrem Hostinger VPS mit SSH an. Öffnen Sie das Terminal und geben Sie den untenstehenden Befehl ein, ersetzen Sie dabei your_server_IP durch die tatsächliche IP Ihres VPS-Servers:

ssh root@your_server_ip

3. Als nächstes stellen Sie sicher, dass Ihr VPS auf dem neuesten Stand ist, indem Sie diese Befehle ausführen:

sudo apt update
sudo apt upgrade

4. Laden Sie den Inhalt Ihres Build-Verzeichnisses auf Ihren VPS hoch. Ersetzen Sie path/to/your/app durch den lokalen Pfad zu Ihrem Build-Verzeichnis und your-username@your-server-ip:/path/to/destination durch den entsprechenden Remote Pfad auf Ihrem VPS.

scp -r path/to/your/app your-username@your-server-ip:/path/to/destination

5. Installieren Sie Node.js und NGINX auf Ihrem VPS mit dem untenstehenden Befehl. Beachten Sie, dass diese Aktion auch Apache2 entfernt, wenn es installiert ist.

sudo apt-get purge apache2*
curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install -y nodejs nginx

6. Erstellen Sie eine NGINX-Konfigurationsdatei für Ihre Anwendung. Stellen Sie sicher, dass Sie your-app durch einen einzigartigen und aussagekräftigen Namen ersetzen:

sudo nano /etc/nginx/sites-available/your-app

7. Fügen Sie die folgende Konfiguration hinzu und ersetzen Sie dabei your-domain-or-ip durch Ihren tatsächlichen Domainnamen oder Ihre IP-Adresse und your-port durch den Port, auf dem Ihre App läuft.

server {
listen 80;
server_name your-domain-or-ip;
location / {
proxy_pass http://127.0.0.1:your-port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

8. Speichern und schließen Sie die Datei. Erstellen Sie dann einen symbolischen Link, um die Konfiguration zu aktivieren:

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/

9. Testen Sie die NGINX-Konfiguration auf Syntaxfehler mit dem folgenden Befehl:

sudo nginx -t

10. Wenn es keine Fehler gibt, starten Sie NGINX neu:

/sudo service nginx restart

Ihre React-App ist jetzt live und über Ihren Domainnamen oder VPS-IP-Adresse erreichbar.

Fazit

React ist eine solide JS-Bibliothek, die Webentwicklern ermöglicht, dynamische und effiziente Webanwendungen zu erstellen. Es vereinfacht die JavaScript-Programmierung und verbessert die Leistung, was es zu einer Top-Wahl für die Front-End-Entwicklung macht. 

Hier ist eine Zusammenfassung, warum Sie in Betracht ziehen sollten, React zu verwenden, um leistungsstarke Webanwendungen zu erstellen:

• Die Einfachheit von React und die zahlreichen Online-Coding-Ressourcen machen es Entwicklern aller Stufen zugänglich.
• React unterstützt die Wiederverwendbarkeit von Komponenten, was die Entwicklungszeit und den Aufwand erheblich reduziert.
• JSX erleichtert das Codieren und Rendern von Elementen, verbessert die Lesbarkeit und Wartbarkeit des Codes.
• Das React Virtual DOM beseitigt unnötiges erneutes Rendern und stellt sicher, dass Ihre Anwendung reibungslos und effizient läuft.
• React verwendet serverseitiges Rendering, das die Ladezeit von Web-App-Seiten verbessert und sich positiv auf die SEO auswirkt.

React hat stark von den kontinuierlichen Verbesserungen durch das React-Team profitiert. Es integriert sich nahtlos in verschiedene Technologien, einschließlich Bootstrap, Tailwind CSS, Axios, Redux und Firebase. Eine React-Anwendung auf einem VPS zu implementieren ist auch unkompliziert mit der Hilfe von Node.js und NGINX.

Wenn Sie Fragen oder Erkenntnisse über React haben, können Sie diese gerne im Kommentarbereich unten hinterlassen.

Was ist React FAQ

Dieser Abschnitt beantwortet die häufigsten Fragen zu React.