Die Webentwicklungsbranche hat in den letzten Jahren ein stetiges Wachstum erlebt; und während dieses Wachstum anhält, entstehen ständig neue Technologien, die Entwicklern bei der Erstellung von benutzerfreundlichen Webseiten und Webanwendungen helfen.
Im Laufe der Jahre haben die Web-Programmiersprachen zusätzliche Funktionen entwickelt, weitere Programmiersprachen wurden bei der Entwicklung von Webtechnologien eingesetzt und sogar Frameworks und Bibliotheken wurden auf den Strukturen bestehender Technologien aufgebaut.
In diesem Lernprogramm werden wir über React sprechen – die beliebteste komponentenbasierte JavaScript-Bibliothek, die für die Erstellung von Benutzeroberflächen verwendet wird. Dieses Tutorial ist für Anfänger/innen geeignet, kann aber auch als Nachschlagewerk für erfahrene React-Entwickler/innen dienen.
Wir sprechen über die Funktionen von React, die Vor- und Nachteile, warum du es verwenden solltest und wie du React installierst und benutzt. Außerdem werden wir uns einige der Kernfunktionen von React anhand von praktischen Codebeispielen ansehen.
Am Ende dieses Tutorials solltest du verstehen, was React ist und wie es funktioniert, und in der Lage sein, tolle Projekte damit zu erstellen.
Was ist React?
React.js, auch einfach React genannt, ist eine JavaScript-Bibliothek, die für die Erstellung von Benutzeroberflächen verwendet wird. Jede React-Webanwendung besteht aus wiederverwendbaren Komponenten, die Teile der Benutzeroberfläche bilden – wir können eine separate Komponente für unsere Navigationsleiste haben, eine für die Fußzeile, eine andere für den Hauptinhalt und so weiter. Du wirst das besser verstehen, wenn wir zu dem Abschnitt kommen, in dem wir mit Komponenten arbeiten müssen.
Diese wiederverwendbaren Komponenten machen die Entwicklung einfacher, weil wir wiederkehrenden Code nicht wiederholen müssen. Wir müssen nur die Logik erstellen und die Komponente in jeden Teil des Codes importieren, in dem sie benötigt wird.
React ist außerdem eine Single-Page-Anwendung. Anstatt also jedes Mal, wenn eine neue Seite gerendert werden soll, eine Anfrage an den Server zu senden, wird der Inhalt der Seite direkt von den React-Komponenten geladen. Das führt zu einem schnelleren Rendering ohne Neuladen der Seite.
In den meisten Fällen wird für die Erstellung von React-Apps die Syntax JSX (JavaScript XML) verwendet, eine Syntaxerweiterung von JavaScript. Damit können wir die Logik von JavaScript und die Logik der Benutzeroberfläche auf einzigartige Weise kombinieren. Mit JSX müssen wir nicht mehr mit dem DOM interagieren, indem wir Methoden wie document.getElementById, querySelector und andere DOM-Manipulationsmethoden verwenden.
Die Verwendung von JSX ist zwar nicht obligatorisch, aber sie macht die Entwicklung von React-Anwendungen einfacher.
Hier ist ein Beispiel dafür, wie wir JSX in React verwenden können:
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}Im obigen Code haben wir eine funktionale React-Komponente verwendet, um ein Stück Text im Browser darzustellen. Der Name der Komponente ist App. Wir haben eine Variable vor der Funktion render() erstellt.
Dann haben wir diese Variable mit geschweiften Klammern an das Markup übergeben. Das ist kein HTML, sondern die Syntax für das Schreiben von Code mit JSX.
Im nächsten Abschnitt gehen wir auf einige der Gründe ein, warum du React verwenden solltest.
Warum React?
Viele Entwickler und Organisationen haben React anderen Bibliotheken/Frameworks vorgezogen; hier ist der Grund dafür:
- Leicht zu lernen: React ist leicht zu erlernen und zu verstehen, solange du die Voraussetzungen gut kennst. React hat eine solide Dokumentation und eine Menge kostenloser Ressourcen, die von anderen Entwicklern in der sehr aktiven React-Community erstellt wurden.
- Wiederverwendbare Komponenten: Jede Komponente in React hat ihre eigene Logik, die überall in der App wiederverwendet werden kann. Dadurch muss ein und derselbe Code nicht mehrmals umgeschrieben werden.
- Jobchancen: Bei einem Großteil der Stellenangebote für die Frontend-Webentwicklung wird React als eine der erforderlichen Fähigkeiten verlangt. Wenn du also weißt, wie React funktioniert und damit arbeiten kannst, steigen deine Chancen auf einen Job.
- Verbesserte Leistung: Mit dem virtuellen DOM von React kann das Rendern von Seiten schneller erfolgen. Wenn du eine Routing-Bibliothek wie React Router verwendest, werden verschiedene Seiten gerendert, ohne dass die Seite neu geladen werden muss.
- Weitreichend erweiterbar: React ist eine Bibliothek, die nur die Benutzeroberfläche unserer Anwendung rendert. Der Entwickler kann selbst entscheiden, mit welchen Tools er arbeiten möchte, z. B. mit Bibliotheken für das Rendern verschiedener Seiten, Design-Bibliotheken usw.
Wer nutzt React?
React wird von vielen Front-End-Ingenieuren sowohl in Start-ups als auch in etablierten Unternehmen wie Facebook, Netflix, Instagram, Yahoo, Uber, der New York Times und vielen anderen eingesetzt.
Obwohl die oben genannten Unternehmen nicht ihr gesamtes Produkt mit React entwickelt haben, wurden einige ihrer Seiten mit React erstellt. Das liegt an der hohen Leistung, der Benutzerfreundlichkeit und der Skalierbarkeit von React.
React Anwendungsfälle
React wird in der Regel für die Erstellung der Benutzeroberfläche (Frontend) von Webanwendungen verwendet. Es ermöglicht ein schnelles Rendering von Seiten und erhöht die Leistung. React kann für jedes Produkt verwendet werden, das im Internet läuft.
Hier sind nur einige der Dinge, für die React häufig verwendet wird:
- Musikplayer-Apps
- Soziale Medien-Apps
- Chat-Apps in Echtzeit
- Full-Stack-Webanwendungen
- E-Commerce-Apps
- Wetter-Apps
- To-Do-Listen-Apps
Eigenschaften von React
React hat eine Fülle von tollen Funktionen, die es zu einer beliebten Option für Entwickler machen.
Hier sind einige der wichtigsten Funktionen von React:
- JSX: Dies ist eine JavaScript-Syntaxerweiterung, die die Funktionen von ES6 (ECMAScript 2015) erweitert. Damit können wir JavaScript-Logik und Markup in einer Komponente kombinieren.
- Virtuelles DOM: Dabei handelt es sich um eine Kopie des DOM-Objekts, die unsere Seiten bei Änderungen zunächst aktualisiert und neu gerendert wird; sie vergleicht dann den aktuellen Zustand mit dem ursprünglichen DOM, um es mit den Änderungen synchron zu halten. Das führt zu einem schnelleren Rendering der Seite.
- Komponenten: React-Apps bestehen aus verschiedenen wiederverwendbaren Komponenten, die jeweils ihre eigene Logik und Benutzeroberfläche haben. Das macht es effizient, um Anwendungen zu skalieren und die Leistung hoch zu halten, weil du den Code nicht so oft duplizierst wie in anderen Frameworks.
React: Pro und Kontra
React ist zwar ein beliebtes Tool für die Erstellung unserer Benutzeroberfläche, aber es gibt immer noch Gründe, warum manche Entwickler oder Anfänger es nicht verwenden.
In diesem Abschnitt werden wir über die Vor- und Nachteile von React sprechen.
Hier sind die Vorteile der Verwendung von React:
- React ist leicht zu lernen und zu verstehen.
- React hat eine sehr aktive Community, in der du dich einbringen kannst und Hilfe bekommst, wenn du sie brauchst.
- Es gibt viele Jobmöglichkeiten für React-Entwickler/innen.
- React bietet eine verbesserte App-Leistung.
Hier sind einige der Nachteile von React:
- Anfänger/innen, die kein solides Verständnis von JavaScript (vor allem ES6) haben, werden es schwer haben, React zu verstehen.
- React kommt ohne einige gängige Funktionen wie Single State Management und Routing daher; du musst dafür externe Bibliotheken installieren und lernen, sie zu nutzen.
Erste Schritte mit React
In diesem Abschnitt gehen wir zunächst auf die Voraussetzungen für die Verwendung von React ein. Danach beschäftigen wir uns mit dem Einrichten einer React-App, dem Erstellen von Komponenten, dem Umgang mit Ereignissen und der Arbeit mit Zuständen, Hooks und Requisiten in React.
Voraussetzungen für die Verwendung von React
Bevor du mit React arbeiten kannst, solltest du ein gutes Verständnis und Erfahrung mit JavaScript haben. Hier sind einige der JavaScript-Themen, die du vor dem Einsatz von React auffrischen solltest:
- Pfeil-Funktionen
- Rest-Operator
- Spread-Operator
- Module
- Destrukturierung
- Array-Methoden
- Template-Literale
- Versprechen
letundconstSchlüsselwörter
Die meisten der oben genannten Themen fallen unter ES6. Außerdem solltest du Erfahrung im Umgang mit HTML haben, da Markup einen Teil der JSX-Syntax ausmacht.
So installierst du React
Bevor du React installierst, musst du sicherstellen, dass du Node.js auf deinem Computer installiert hast.
Sobald du es erfolgreich installiert hast, führe den folgenden Befehl in deinem Terminal aus:
node -vWenn alles richtig gelaufen ist, sollte der obige Befehl dir sagen, welche Version von Node.js derzeit auf deinem Computer installiert ist.
Als Nächstes führen wir einen weiteren Befehl aus, um die Installation von React zu starten.
Erstelle zunächst einen Ordner oder navigiere zu dem Ort, an dem du die React-App installieren möchtest, und führe dann den folgenden Befehl in deinem Terminal aus:
npx create-react-app react-kitMit dem obigen Befehl wird React in einem Ordner namens react-kit installiert.
Sobald die Installation abgeschlossen ist, öffne den neu installierten React-Ordner in einem Code-Editor deiner Wahl. In diesem Lernbeispiel verwenden wir Visual Studio Code. Visual Studio Code verfügt über ein integriertes Terminal. Wenn du ein anderes Terminal wie Git Bash oder CMD verwendest, navigierst du einfach zu deinem React-App-Verzeichnis und führst den folgenden Befehl aus:
npm run startMit diesem Befehl wird dein Entwicklungsserver hochgefahren. Nach kurzer Zeit sollte die unten stehende Seite auf localhost:3000 in deinem Browser angezeigt werden:
Wenn du bis zu diesem Punkt durchgehalten hast, dann hast du deine erste React-App erfolgreich installiert. Herzlichen Glückwunsch!
Wenn du einen Blick auf deine Ordnerstruktur wirfst, wirst du einen Ordner namens public sehen. Dieser Ordner enthält eine index.html-Datei, in die unser Code eingefügt und an den Browser übermittelt wird.
Der src-Ordner ist der Ort, an dem sich unsere gesamte Logik, das Styling und das Markup befinden; das ist unser Entwicklungsordner mit der App.js-Datei als Stammkomponente. Der Code in dieser Datei ist das, was wir in der Abbildung oben sehen.
Öffne die Datei App.js und nimm einige Änderungen an der Datei vor und speichere sie, damit sie automatisch im Browser angezeigt wird.
Alles bereit? Dann lass uns jetzt etwas Code schreiben!
Komponenten in React
Es gibt zwei Haupttypen von Komponenten in React: Klassen- und Funktionskomponenten. Die React-Dokumentation wird derzeit mit Hooks umgeschrieben, einer Funktion, die in funktionalen Komponenten zu finden ist. Wir werden auch in diesem Lehrgang funktionale Komponenten verwenden, da sie die am häufigsten verwendeten Komponenten für React-Anwendungen sind.
In den meisten Fällen geben Komponenten einen HTML-Code mit einer Mischung aus dynamischen Werten zurück, die mit JavaScript erstellt werden. Komponenten werden wie Funktionen in JavaScript erstellt.
Eine React Class Component erstellen
Schauen wir uns ein Beispiel für eine Klassenkomponente in React an.
Jede Klassenkomponente muss die Anweisung React.Component und die render() subclass.
class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>I am learning {this.state.language} </p>;
}
}In der obigen Komponente haben wir eine Statusvariable namens language mit dem String-Wert „JavaScript“ erstellt. Diese Variable haben wir dann in unserem Markup verwendet. Dieses Beispiel zeigt, wie wir JavaScript und HTML mischen können, ohne auf irgendwelche DOM-Methoden zu verweisen.
Wenn die Seite im Browser angezeigt wird, sehen wir „Ich lerne JavaScript“ auf der Seite.
Eine funktionale React-Komponente erstellen
In diesem Abschnitt werden wir das Beispiel aus dem letzten Abschnitt mit einer funktionalen Komponente nachbauen.
Füge diese Funktion zu deiner Datei hinzu:
function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}Der Name unserer Komponente ist derselbe: Student. Beginne den Namen deiner Komponenten immer mit einem Großbuchstaben. Diese Variable wurde ebenfalls in das Markup übergeben, wie wir es im letzten Abschnitt getan haben, ohne das DOM mit Vanilla JavaScript DOM Methoden zu manipulieren.
Diese Komponente hat auch eine Student Variable, die gerendert wurde, aber im weiteren Verlauf des Tutorials werden wir einen Hook namens useState Hook verwenden, um unsere Statusvariablen zu erstellen.
Umgang mit Ereignissen in React
Die Ereignisse, die in React verwendet werden, ähneln denen, die wir in HTML nutzen. Der einzige Unterschied besteht darin, dass React-Events in CamelCase-Syntax geschrieben werden. So würde „onclick“ in React zu „onClick“, „onchange“ zu „onChange“ und so weiter.
Wenn wir ein Ereignis als Attribut in einem HTML-Tag übergeben, verwenden wir geschweifte Klammern: onClick={changeName} anstelle von Anführungszeichen onClick=”changeName”
Hier ist ein Beispiel (in der Datei App.js):
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Im obigen Code haben wir eine Funktion erstellt, die eine Nachricht im Browser meldet. Wir haben auch eine Schaltfläche erstellt, die diese Funktion aufruft, wenn sie angeklickt wird. Der hier verwendete Event-Handler ist der onClick Event-Handler.
Du hast bemerkt, dass der Funktionsname in geschweifte Klammern und nicht in Anführungszeichen eingeschlossen wurde. So kannst du bei der Verwendung von JSX dynamische Werte wie Variablen- und Funktionsnamen in das Markup einfügen.
Außerdem verwenden wir „className“ statt „class“, wie wir es in HTML tun würden. Das liegt daran, dass „class“ in JavaScript ein reserviertes Wort ist.
In der letzten Zeile haben wir unsere Komponente exportiert. So können wir sie in andere Komponenten importieren.
Mit Status in React arbeiten
Um den Status unserer Anwendung in React zu verwalten, verwenden wir einen Hook namens useState Hook. Hooks ermöglichen es uns, auf zusätzliche React-Funktionen zuzugreifen, ohne eine Klasse zu schreiben.
Mit Hooks können wir den Status unserer Komponente verwalten und sogar bestimmte Effekte ausführen, wenn unsere Zustandsvariablen zum ersten Mal gerendert oder geändert werden.
Ohne den useState Hook in einer funktionalen Komponente werden alle Änderungen an unseren Statusvariablen nicht im DOM angezeigt, sodass der Status unverändert bleibt.
Werfen wir einen Blick auf ein Beispiel.
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Schauen wir uns an, was wir gerade getan haben.
Zuerst haben wir den useState Hook von React importiert. Dann haben wir eine Statusvariable namens name und eine Funktion – setName – erstellt, mit der wir den Wert der Variable name aktualisieren können. Der ursprüngliche Wert der Variable name wird in der useState Hook als „John“ gespeichert.
Als Nächstes haben wir eine Funktion namens changeName erstellt, die die Funktion setName verwendet, um den Wert der Variablen name zu aktualisieren.
In unserem Markup wird „John“ in „James“ geändert, sobald die Schaltfläche angeklickt wird.
Im nächsten Abschnitt werden wir sehen, wie wir einen weiteren Hook in React verwenden.
Mit Hooks in React arbeiten
Im letzten Abschnitt haben wir gesehen, wie wir den Status unserer App mit dem useStatet Hook verwalten können. In diesem Abschnitt sehen wir uns an, wie wir den useEffect Hook verwenden.
Der useEffect Hook führt jedes Mal einen Effekt aus, wenn sich ein Status ändert. Standardmäßig wird dieser Hook beim ersten Rendering und bei jeder Aktualisierung des Status ausgeführt, aber wir können den Effekt auch konfigurieren und an eine entsprechende Statusvariable anhängen.
Schauen wir uns einige Beispiele an:
import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
console.log(`You are in day ${day} of the year`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>Click to increase day</button>
</div>
);
}
export default App;Als Erstes haben wir den useEffect Hook importiert.
Jedes Mal, wenn wir auf die Schaltfläche klicken, wird die Variable name um eins erhöht. Diese Änderung des Wertes von name führt dann dazu, dass der useEffect Hook eine Meldung auf der Konsole protokolliert – dies geschieht jedes Mal, wenn sich die Variable name ändert.
Im nächsten Abschnitt werden wir über Props und den Datenfluss zwischen den Komponenten sprechen.
Arbeiten mit Props in React
Mit Props können wir Daten von einer Komponente an eine andere weitergeben. Das macht den Datenfluss in unserer App dynamisch und wartbar. Props ist die Abkürzung für Eigenschaften.
Sehen wir uns ein Beispiel dafür an, wie wir Props verwenden können.
So sieht unsere App.js-Datei aus:
function App() {
return (
<div>
</div>
);
}
export default App;Wir erstellen eine weitere Komponente namens Bio.js, die wie folgt aussieht:
function Bio() {
return (
<div>
<p>My name is John</p>
<p>I am a JavaScript developer</p>
</div>
);
}
export default Bio;Als Nächstes importieren wir die Bio-Komponente wie folgt in unsere App-Komponente:
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;In der ersten Zeile haben wir die Bio-Komponente importiert. Dann fügen wir die Komponente zwischen den div Tags in unserer App-Komponente ein. Wenn du dir das im Browser anschaust, siehst du, dass der Code, den wir in der Bio-Komponente erstellt haben, gerendert wird.
Jetzt verstehst du, wie Code in React wiederverwendet werden kann. Aber dieser Code ist statisch; er wird in jeder Komponente, in der er verwendet wird, gleich sein. Das ist in Fällen, in denen wir dieselbe Komponente mit unterschiedlichen Informationen verwenden wollen, nicht effizient.
Das können wir mit Props ändern.
In der Komponente Bio.js tust du Folgendes:
function Bio({name, language}) {
return (
<div>
<p>My name is { name }</p>
<p>I am a { language } developer</p>
</div>
);
}
export default Bio;Zuerst haben wir die Daten destrukturiert und name und language als Parameter übergeben. Diese Parameter wurden dann dynamisch in unserem Markup verwendet.
In der letzten Zeile des Codes haben wir die Komponente exportiert: export default Bio;, damit wir sie in jede andere Komponente importieren können, die ihre Logik benötigt.
Im Moment sehen wir nicht, dass ein Wert für sie angezeigt wird. Das werden wir in der App-Komponente nachholen; so geht’s:
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="James" language="Python"/>
</div>
);
}
export default App;Wir haben unserem Bio-Tag Attribute hinzugefügt, die den Requisiten entsprechen, die wir zuvor erstellt haben. Jeder Wert, den wir in diesen Attributen angeben, wird im Browser angezeigt. Das ist wichtig für Komponenten, die in mehreren Komponenten verwendet werden, aber ihre eigenen Daten benötigen.
Wo du mehr lernen kannst
Dieser Lehrgang hat dir die grundlegenden Kenntnisse vermittelt, die du brauchst, um Webanwendungen mit React zu erstellen, aber das ist noch nicht alles, was es über React zu wissen gibt. Es gibt noch weitere Funktionen, die du benötigst, um eine effiziente Anwendung mit React zu erstellen, wie z. B. Routing in Anwendungen, die aus mehr als einer Seite bestehen, und Single State Management mit Tools wie Redux.
Die beste Anlaufstelle, um mehr über React zu erfahren, ist die React-Dokumentation. Du kannst auch einen Blick auf die Beta-Dokumentation werfen, die mit Hooks neu geschrieben wurde.
Zusammenfassung
React als Frontend-Bibliothek ist im Vergleich zu anderen Bibliotheken/Frameworks in der Entwicklergemeinschaft massiv gewachsen und es gibt keine Anzeichen dafür, dass es aufhört. React ist auf der Roadmap eines jeden modernen Webentwicklers zu finden.
Da immer mehr Entwickler die Web3-Technologie einsetzen, ist React nach wie vor das beliebteste Tool für die Erstellung des Frontends von dezentralen Anwendungen (DApps).
Mit React kannst du eine Vielzahl von Anwendungen erstellen, von einfachen To-Do-Listen-Web-Apps bis hin zu Marktplätzen, Dashboards und so weiter.
React kann mit vielen Technologien wie Bootstrap, Tailwind CSS, Axios, Redux, Firebase und vielem mehr verwendet werden. Wir können React auch mit Node.js und anderen Backend-Sprachen verwenden, um Full-Stack-Anwendungen und Web-Apps zu erstellen, die blitzschnell laufen.
