Open Source im professionellen Einsatz
Linux-Magazin 12/2014
437

XML-Helfer

Dank JSX lässt sich das HTML wie in Listing 1 literal schreiben (Zeilen 10 bis 22), zudem kann der Entwickler wie in Zeile 7 die React-Komponente »ReportRow« aufrufen. In derselben Zeile übergibt das Programm den Rückgabewert von »ReportRow« an die Liste »rows« , die das Resultat in Zeile 21 mit »{rows}« ins erzeugte HTML-Fragment schreibt.

Mit dem reinen JSX-Code würde der Code in Listing 1 noch nicht laufen. Die Zeile 1 veranlasst daher einen Übersetzer, den JSX-Code in natives Javascript zu überführen. Der Prozess ersetzt den Ausdruck »{rows}« in Zeile 21 mit den Werten der Liste »rows« .

Die Renderfunktion aus Listing 1 liest ihre Aufrufparameter über die Eigenschaft »this.props« aus, die Elemente über »this.props.items« (Zeile 5) und die Position über »this.props.position« (Zeile 6). JSX initialisiert die Aufrufparameter in Zeile 7. Die Renderfunktion von »ReportRow« greift auf »this.props.item« und »this.props.key« zu.

Data Binding

Anders als Angular verfügt React von Haus aus nur über ein One-Way-Data-Binding (Abbildung 1). Das heißt, eine Änderung der Anwendungsdaten (Model) zieht die Aktualisierung der Browseransicht (View) nach sich. Den umgekehrten Weg – wie beim Two-Way-Data-Binding – sieht React nicht vor.

Abbildung 1: One-Way- und Two-Way-Data-Binding im Vergleich.

Im Gegensatz zu Angular aktualisiert React auch die View nicht automatisch. Der Entwickler muss wie in den Zeilen 8 bis 10 von Listing 2 die Methode »setState()« aufrufen, die zweierlei erledigt: Sie verändert die Werte der Statusvariablen in der React-Anwendung und erzwingt im Anschluss eine Neuberechnung durch die Renderfunktion. In den Statusvariablen speichert React die Randbedingungen einer Anwendung. Der Entwickler variiert sie, um letztlich eine dynamische React-Anwendung zu erzeugen.

Listing 2

report.js (Auszug)

01 var Report = React.createClass({
02     getInitialState: function() {
03         return {
04             position: {latitude:64.9, longitude:-21.56} // Reykjavík
05         };
06     },
07     handleUserInput: function(lat, lnt) {
08         this.setState({
09             position: {latitude:lat, longitude: lnt}
10         });
11     },
12     render: function() {
13         return (
14             <div id="container">
15                 <h1>Erdbeben-Report</h1>
16                 <ReportOptions
17                     position={this.state.position}
18                     onUserInput={this.handleUserInput}
19                 />
20                 <ReportTable
21                     position={this.state.position}
22                     items={this.props.items}
23                 />
24                 </div>
25             );
26         }
27 });

Der Aufruf von »setState()« speichert als Objekt einen neuen Standort mit Breiten- und Längengrad als Eigenschaften und der Position als Schlüssel. Dann berechnet React die Renderfunktion (Zeile 12) sowie die Kind-Komponenten »ReportOptions« (Zeile 16) und »ReportTable« (Zeile 20) neu. React ändert den DOM-Baum der Browseransicht aber nur, falls sich das errechnete Markup ändert.

Um ein Two-Way-Data-Binding auch in React-Anwendungen umzusetzen, berechnet der Entwickler wie in der folgenden Beispielanwendung das Modell mittels einer Rückruffunktion neu, sobald ein Nutzer das Formularfeld manipuliert.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Developer Tools für React fertig

    Laut Ben Alpert aus dem React-Projekt haben die neuen Entwicklertools für React den Betastatus verlassen. Sie helfen beim Einsatz von Facebooks Javascript-Bibliothek, mit deren Hilfe sich grafische Oberflächen entwickeln lassen.

  • Russland zählt ReactOS zur offiziellen Windows-Alternative

    Russland versucht sich in Sachen Software von der Abhängigkeit von Herstellern und Lizenzen zu befreien. Die dafür eingesetzte Initiative des Ministeriums für Telekommunikation hat nun den freien Windows-Nachbau ReactOS als Alternative für Windows in ihre Empfehlungsliste aufgenommen.

  • Tragendes Rahmenwerk

    Wer Web- oder SaaS-Anwendungen anbieten will, bekommt es mit Kodierungsrelikten der HTML- und Skriptsprachen-Frühzeit zu tun. Abhilfe schaffen moderne Frameworks wie Prado, die viele Elemente und Templates bereits als fertige Bausteine bereitstellen. Doch deren Struktur will zuerst verstanden sein.

  • React 15: Schneller und vollständiger

    Signifikante Verbesserungen im Umgang mit dem DOM und vollen SVG-Support versprechen die Macher für Version 15 von React.

  • Flux heißt jetzt Vizceral und ist Open Source

    Im Oktober 2015 stellte Netflix im hauseigenen Blog die Software Flux vor. Nun veröffentlicht die Firma die Software unter neuem Namen und unter einer Open-Source-Lizenz als Vizceral.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.