Abend 17: 21.09.2016 - React mit Test-Driven Development

createClass():

Mit React.createClass() wird die React-Component erzeugt.

Code-Beispiel:

const MyComponent = React.createClass({ render: function() { return <div className={this.props.className}/>; } });

Mit ES6 kann auch die React-Component auch mit

class MyComponent extends React.Component { render() { return <div className={this.props.className}/>;

angelegt werden.

render():

render() erzeugt ein einzelnes Kind Element einer virtuellen Abbildung eines nativen Dom-Elements. Im realen DOM werden nur die Unterschiede zum virtuellen DOM aktualisiert. Dies ist die Ursache für die hohe Geschwindigkeit des Renderns von React.

React bringt mit JSX eine JS-Spracherweiterung, um das Schreiben von HTML Elementen zu erleichtern. Damit lässt sich HTML-Code direkt in den JS Code schreiben

Beispiel:

const hi = <h1>Hi there</h1>:

shouldComponentUpdate(nextProps, nextState) {
  if (...) { return true } return false; }
}

Virtual DOM ist eine Abstraktion des realen DOM. Es beinhaltet alle benötigten Details um das DOM zu erstellen, aber weil es nicht all die vielen Informationen die ein DOM braucht, kann es schneller erstellt und geändert werden. Bei Änderungen wird die alte Version und die neue Version verglichen und so wird nur der Teil der geändert wurde neu hinzugefügt, anstatt das das ganze DOM erneut gerendert wird.

Die "stateful Component" kann einen (internen/isolierten) Datenspeicher bereithalten, welchen die simple Component nicht hat.

Daten werden üblicherweise über "props" (Attribut) übergeben.