card2brain.ch

Cartes-fiches	7
Utilisateurs	11
Langue	Deutsch
Catégorie	Informatique
Niveau	Université
Crée / Actualisé	13.11.2016 / 19.02.2019
Lien de web	https://card2brain.ch/box/abend_17_21_09_2016_react_mit_testdriven_development
Intégrer	<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 ?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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 ?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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"?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Créer ou copier des fichiers d'apprentissage

Créer ou copier des fichiers d'apprentissage

Connecte-toi pour voir toutes les cartes.

SWITCHaai

Office 365

Edulog

Apple ID

Google