Deklarativ
React macht es dir leicht, interaktive Benutzeroberflächen zu erstellen. Erstelle einfache Ansichten für jeden Zustand deiner Anwendung und React wird sobald du Daten änderst, effizient die richtigen Komponenten aktualisieren und rendern.
Deklarative Ansichten machen deinen Code vorhersehbarer und leichter zu debuggen.
Komponentenbasiert
Erstelle verkapselte Komponenten, die ihren eigenen Zustand verwalten und setze sie dann zu komplexen Benutzeroberflächen zusammen.
Da die Komponentenlogik in JavaScript anstelle von Vorlagen geschrieben ist, kannst du problemlos umfangreiche Daten durch deine Anwendung leiten und den Komponentenzustand aus dem DOM heraushalten.
Einmal lernen, für jede Plattform schreiben
Wir treffen keine Annahmen über den Rest deines Technologie-Stacks, sodass du neue Funktionen in React entwickeln kannst, ohne bestehenden Code neu zu schreiben.
React kann auch auf dem Server mit Node und als mobile Anwendungen mit React Native gerendert werden.
Eine einfache Komponente
React Komponenten implementieren eine render() Methode, die Eingabedaten entgegennimmt und zurückgibt, was angezeigt werden soll. Dieses Beispiel verwendet eine XML-ähnliche Syntax namens JSX. Auf Eingabedaten, die der Komponente übergeben werden, kann mittels render() durch this.props zugegriffen werden.
JSX ist optional und nicht erforderlich, um React zu verwenden. Teste Babel REPL, um den reinen JavaScript-Code zu sehen, der durch den JSX-Kompilationsschritt erzeugt wird.
Lade Code-Beispiel...
Eine zustandsabhängige Komponente
Zusätzlich zur Übernahme von Eingabedaten (Zugriff durch this.props) kann eine Komponente interne Zustandsdaten pflegen (Zugriff durch this.state).
Wenn sich die Zustandsdaten einer Komponente ändern, wird das gerenderte Markup durch erneutes Aufrufen von render() aktualisiert.
Lade Code-Beispiel...
Eine Anwendung
Mit Hilfe von props und state können wir eine kleine Todo-Anwendung erstellen.
Dieses Beispiel verwendet state, um die aktuelle Liste der Elemente sowie den vom Benutzer eingegebenen Text zu sehen.
Obwohl es so scheint, als würden Event-Handler inline gerendert werden, werden sie gesammelt und mit Hilfe der Event-Delegation implementiert.
Lade Code-Beispiel...
Eine Komponente mit externen Plugins
React ermöglicht es, sich mit anderen Bibliotheken und Frameworks zu verbinden.
In diesem Beispiel wird remarkable, eine externe Markdown-Bibliothek, verwendet, um den Wert des <textarea>-Feldes in Echtzeit zu konvertieren.