Glossar der React Begriffe
Single-Page Anwendung
Eine Single-Page-Anwendung ist eine Anwendungen, die eine einzelne HTML-Seite und all deren Ressourcen (wie JavaScript oder CSS) lädt, die für das Ausführen der Anwendung erforderlich sind. Jegliche Interaktionen mit der Seite und deren Unterseiten benötigen keine erneute Serveranfrage, d. h. die Seite muss nicht neu geladen werden.
Obwohl du mit React komplette Single-Page-Anwendungen erstellen kannst, ist dies kein Muss. React kann auch nur für kleine Teile bestehender Webseiten verwendet werden um die Interaktivität zu erweitern. In React geschriebener Code kann in Ruhe mit Markup koexistieren, welches auf dem Server von beispielsweise PHP oder auch clientseitig anderen Bibliotheken gerendert wird. Tatsächlich wird React genau so bei Facebook eingesetzt.
ES6, ES2015, ES2016, etc
Diese Kürzel beziehen sich alle auf den neuesten Standard der ECMAScript Language Specification, von dem JavaScript eine Implementierung ist. Die ES6-Version (auch bekannt als ES2015) enthält viele Ergänzungen zu den Vorgängerversionen wie: Pfeilfunktionen, Klassen, Template Literale, let und const Anweisungen. Du kannst hier mehr über bestimmte Versionen lernen.
Compiler
Ein JavaScript-Compiler nimmt JavaScript-Code, wandelt ihn um und gibt JavaScript-Code in einem anderen Format zurück. Der häufigste Anwendungsfall ist die Umwandlung von ES6-Syntax in eine Syntax, die ältere Browser interpretieren können. Babel ist der Compiler, der am häufigsten mit React verwendet wird.
Bundler
Bundler nehmen JavaScript und CSS-Code, geschrieben als separate Module (oft hunderte von ihnen), und fügen diese zusammen in ein paar Dateien, die besser für den Browser optimiert sind. Häufig zusammen mit React-Anwendungen verwendete Bundler sind unter anderem Webpack und Browserify.
Paketmanager
Paketmanager sind Tools, welche dir das Verwalten deiner Projekt-Abhängigkeiten ermöglichen. npm und Yarn sind zwei Paketmanager, die häufig in React-Anwendungen verwendet werden. Beides sind Clients für die gleiche npm-Paketregistrierung.
CDN
CDN steht für Content Delivery Network. CDNs sind Netzwerke von Servern auf der ganzen Welt, die gecachte, statische Inhalte ausliefern.
JSX
JSX ist eine Syntaxerweiterung für JavaScript. Es ist ähnlich einer Template-Sprache, hat aber den vollen Leistungsumfang von JavaScript. JSX wird bei React.createElement()-Aufrufen kompiliert, welche das reine JavaScript-Objekt namens “React elements” zurückgeben. Um ein grundlegendes Verständnis für JSX zu bekommen, sieh dir diese Dokumentation an und ein ausführliches Tutorial zu JSX findest du hier.
React DOM benutzt die camelCase-Namenskonvention anstelle von HTML-Attributnamen. Zum Beispiel wird tabindex zu tabIndex in JSX. Das Attribut class wird zu className, da class ein reserviertes Wort in JavaScript ist:
<h1 className="hello">My name is Clementine!</h1>Elements
React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of “components”. An element describes what you want to see on the screen. React elements are immutable.
const element = <h1>Hallo, Welt</h1>;Elemente
React-Elemente sind die Bausteine von React-Anwendungen. Elemente könnten mit dem allgemein bekannteren Konzept der “Komponenten” verwechselt werden. Ein Element beschreibt was du auf dem Bildschirm sehen möchtest. React-Elemente sind unveränderbar.
const element = <h1>Hallo, Welt</h1>;Normalerweise werden Elemente nicht direkt verwendet, sondern von Komponenten zurückgegeben.
Komponenten
React-Komponenten sind kleine, wiederverwendbare Codestücke, die ein zu renderndes React-Element an die Seite zurückgeben. Die einfachste Version einer React-Komponente ist eine simple JavaScript-Funktion, die ein React-Element zurückgibt:
function Welcome(props) {
return <h1>Hallo, {props.name}</h1>;
}Komponenten können ebenso ES6-Klassen sein:
class Welcome extends React.Component {
render() {
return <h1>Hallo, {this.props.name}</h1>;
}
}Komponenten können in mehrere kleinere Teile zerlegt und deren Funktionalität in anderen Komponenten wiederverwendet werden. Komponenten können andere Komponenten, Arrays, Strings und Nummern zurückgeben. Eine gute Faustregel ist, dass wenn ein Teil deiner Benutzeroberfläche mehrmals verwendet wird (Button, Panel, Avatar), oder komplex genug ist (App, FeedStory, Comment), sie ein guter Kandidat ist, eine wiederverwendbare Komponente zu sein. Komponentennamen sollten immer mit einem Großbuchstaben beginnen (<Wrapper/> nicht <wrapper/>). Weitere Informationen findest du in dieser Dokumentation zum Rendern von Komponenten.
props
props sind die Werte, die in eine React-Komponente gegeben werden. Es handelt sich hierbei um Daten, die von einer übergeordneten Komponente an eine untergeordnete Komponente weitergegeben werden.
Denke daran, dass props nur lesbar(readonly) sind. Sie sollten in keiner Weise verändert werden:
// Falsch!
props.number = 42;Wenn du einen Wert aufgrund von Nutzereingaben oder Netzwerkantworten verändern möchtest, verwende state.
props.children
props.children ist in jeder Komponente verfügbar. Es enthält den Inhalt, der zwischen dem öffnenden und schließenden Tag einer Komponente steht. Zum Beispiel:
<Welcome>Hallo Welt!</Welcome>Der String Hallo Welt! ist in props.children in der Welcome-Komponente verfügbar:
function Welcome(props) {
return <p>{props.children}</p>;
}Für Komponenten, die als Klassen definiert wurden, verwende this.props.children:
class Welcome extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}state
Eine Komponente benötigt state, wenn sich mit ihr verbundene Daten im Laufe der Zeit ändern. Zum Beispiel könnte eine Checkbox-Komponente ein isChecked in ihrem State benötigen und eine NewsFeed-Komponente könnte in ihrem State fetchedPosts verfolgen wollen.
Der wichtigste Unterschied zwischen state und props ist, dass props von einer übergeordneten Komponente übergeben werden, aber state in einer Komponente selbst verwaltet wird. Eine Komponente kann nicht ihre props ändern, aber ihren state.
Jeder Datensatz, der sich ändern kann, sollte nur zu einer Komponente zugeordnet sein, die ihren State “besitzt”. Versuche nicht States von zwei verschiedenen Komponenten zu synchronisieren. Verschiebe stattdessen den State in die am nächsten höhergelegene gemeinsame Komponente (lift it up) und gebe sie als Props an beide von ihnen weiter.
Lifecycle-Methoden
Lifecycle-Methoden sind benutzerdefinierte Funktionen, die in den verschiedenen Phasen einer Komponente ausgeführt werden. Es stehen Methoden zur Verfügung, wenn die Komponenten erstellt und in das DOM (eingefügt (mounting)) wird, wenn die Komponente upgedatet wird und wenn die Komponente gemountet oder entfernt wird vom DOM.
Kontrollierte vs. Unkontrollierte Komponenten
React besitzt zwei verschiedene Ansätze, um mit Formulareingaben umzugehen.
Ein Eingabefeld, dessen Wert (engl. value) von React gesteuert wird, wird als kontrollierte Komponente bezeichnet. Wenn ein Benutzer Daten in eine kontrollierte Komponente eingibt, wird ein Change-Event-Handler ausgelöst und dein Code entscheidet, ob der Wert gültig ist (durch erneutes Rendern mit dem aktualisierten Wert). Wenn du es nicht erneut renderst, bleibt das Formularelement unverändert.
Eine unkontrollierte Komponente funktioniert, wie sie es auch außerhalb von React tun würde. Wenn ein Benutzer Daten in ein Formularfeld (Eingabefeld, Dropdown etc.) eingibt, werden die aktualisierten Informationen angezeigt, ohne dass React etwas tun muss. Das bedeutet aber auch, dass du das Feld nicht dazu zwingen kannst, einen bestimmten Wert zu haben.
In den meisten Fällen solltest du kontrollierte Komponenten verwenden.
Keys
Ein “Key” ist ein spezielles String-Attribut, welches du bei der Erstellung von Arrays von Elementen berücksichtigen musst. Keys helfen React zu erkennen, welche Elemente geändert, hinzugefügt oder entfernt wurden. Keys sollten an Elemente innerhalb eines Arrays gegeben werden, um ihnen eine stabile Identität zu geben.
Keys müssen nur in einem Array untereinander eindeutig sein. Sie müssen nicht über die gesamte Anwendung oder in einer einzelnen Komponente eindeutig sein.
Übergebe nicht so etwas wie Math.random als Key. Es ist wichtig, dass Keys eine “stabile Identität” über mehrere Renderings hinweg aufweisen, damit React feststellen kann, wann Elemente hinzugefügt, gelöscht oder neu angeordnet werden. Im Idealfall sollten Keys eindeutigen und stabilen Identifikatoren aus ihren Daten entsprechen, wie z. B. post.id.
Refs
React unterstützt ein spezielles Attribut, das du an jede Komponente anhängen kannst. Das ref-Attribut kann ein Objekt sein, das mit der React.createRef()-Funktion, einer Callback-Funktion oder einem String (veraltete API) erstellt wurde. Wenn das ref-Attribut eine Callback-Funktion ist, erhält die Funktion das zugrundeliegende DOM-Element oder die Klassen-Instanz (je nach Elementtyp). Dadurch haben wir direkten Zugriff auf das DOM-Element oder die Komponenteninstanz.
Benutze refs sparsam. Wenn du dich da bei erwischst, refs in deiner Anwendung zu benutzen um “Dinge möglich zu machen”, solltest du dich ein bisschen mehr mit dem Top-Down-Datenfluss auseinandersetzen.
Events
Die Handhabung von Events in React-Elementen weist einige syntaktische Unterschiede auf:
- React Event-Handler werden nicht in Kleinbuchstaben, sondern in camelCase geschrieben.
- Bei JSX übergibst du als Event-Handler eine Funktion und keinen String.
Abgleich (reconciliation)
Wenn sich Props oder State einer Komponente ändern, entscheidet React ob ein tatsächliches DOM-Update erforderlich ist, in dem es das neue zurückgegebene Element mir dem zuvor gerenderten vergleicht. Wenn diese nicht übereinstimmen, wird React das DOM aktualisieren. Dieser Vorgang wird “Abgleich (engl. reconciliation)” genannt.