Diese wunderbare Einführung in das React JS Gui Framework macht es völlig unnötig hier noch mehr zu schreiben.

Dass ich trotzdem noch etwas Schreibe ist mehr als Mittel gedacht für mich selbst einig Merkpunkte nochmals zu recapitulieren.

Building Blocks

Importieren von

import React from 'react';
import ReactDOM from 'react-dom';

GUI-Compoent-Modell

Nun können React Componenten als Klassen angelegt werden:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
    renderSquare(i) {
        return (<Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />);
    }

    render() {
        return (
            <div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

Obiger Code zeigt die definition von zwei Componenten (Board und Square). Was durch diese Component im GUI angezeigt wird ist dadurch definiert, was ihre render Methode zurück gibt.
Dieses Rückgabe-Object wird auch React Element genannt.
Im obigen Beispiel wird das React Element mittels JSX Notation beschrieben, welche HTML imitiert.
Die Mitgabe von Sub-Elementen (-Componenten) and den Parser geschieht im Beispiel mit:

return (<Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />);

Die Component-Sub-Klasse (im Beispiel ‚Square‘) wird also wie ein HTML-Tag referenziert!

Parameter-Übergabe und Modell-GUI-Synchronisation

Parameter-Übergabe

Wird eine Sub-Component z.B. so ins GUI einbezogen …

return (<Square meinWert={myVar}>

dann kann sie nachher in der Sqare-Component so ausgelesen werden:

this.parms.meinWert

Status und Modell-GUI-Synchronisation

Status Definition

Der von React verwaltete State muss im Constructor definiert werden:

class Game extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            meineVar: 'Mein Wert' 
        };
    }

Beachte:

• super(props) ist zu programmieren!
• Der State einer Component ist privat!

Status Update

Mittels this.setState() wird der State in der render Methode vom Programmierer nachgeführt. React führt automatisch die States der Unter-Komponenten nach.

this.setState({meineVar: 'Hallo Welt'});