card2brain.ch

Karten	7
Lernende	11
Sprache	Deutsch
Kategorie	Informatik
Stufe	Universität
Erstellt / Aktualisiert	13.11.2016 / 19.02.2019
Weblink	https://card2brain.ch/box/abend_17_21_09_2016_react_mit_testdriven_development
Einbinden	<iframe src="https://card2brain.ch/box/abend_17_21_09_2016_react_mit_testdriven_development/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>

React-Componenten verwenden die methoden createClass(), render() . Welche Aufgabe haben diese Methoden ?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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.

Was ist JSX und deren Aufgabe ?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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>:

React: Wähle die korrekte Antwort

Bei React müssen HTML- und JavaScript-Code strikt getrennt werden

Bei React wird HTML- und JavaScript-Code üblicherweise kombiniert geschrieben

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

Bei React müssen HTML- und JavaScript-Code strikt getrennt werden

Bei React wird HTML- und JavaScript-Code üblicherweise kombiniert geschrieben

React: Rendern unterbinden

Welche Methode musst du implementieren, damit du bei einer React-Komponente anhand Props oder States steuern kannst, ob
diese gerendert werden soll oder nicht?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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

Was trifft bei JSX nicht zu?

Alle Elemente müssen nach dem XML Schema geschlossen werden Beispiel: <br> -> <br />

Ein JSX Ausdruck muss ein umschliessendes Element haben. (Keine mehrfachen Elemente auf der Root Ebene)

Javascript funktioniert nicht in JSX

Um auf ein Html-Tag das class Attribut setzten zu können muss className anstelle verwendet werden

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

Alle Elemente müssen nach dem XML Schema geschlossen werden Beispiel: <br> -> <br />

Ein JSX Ausdruck muss ein umschliessendes Element haben. (Keine mehrfachen Elemente auf der Root Ebene)

Javascript funktioniert nicht in JSX

Um auf ein Html-Tag das class Attribut setzten zu können muss className anstelle verwendet werden

Was ist ein Virtual DOM

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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.

Was ist der Unterschied zwischen einer simplen "Component" und einer "stateful Component"?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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

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

Abend 17: 21.09.2016 - React mit Test-Driven Development

Lernkarteien erstellen oder kopieren

Lernkarteien erstellen oder kopieren

Melde dich an, um alle Karten zu sehen.

SWITCHaai

Office 365

Edulog

Apple ID

Google