Ich nehme derzeit an einer Akademie zum Java Fullstack Software Engineer teil. In den kommenden Wochen möchte ich hier meine Mitschrift, so gut es geht, aufzeichnen und mitteilen. Hier ist das, was ich vom dritten Tag in Block 10 gelernt und behalten habe:
Wir erstellen ein neues Verzeichnis day03, kopieren dort unser Template rein und verschieben das node_modules Verzeichnis. Wir wechseln in das Template-Verzeichnis und starten mit "npm start" unseren React-Server:
Der dicke node_module-Block nervt ziemlich. man kann ihn in den Projektordner verschieben, oder eine Ebene oberhalb der Projekt-Ebene hinlegen. Besser ist es, einen Dir-Link zu erstellen:
D:\Benutzerdaten\Mertens_Achim\my-workspace\Block10-React\day03\ueb-hello-user - Template>mklink /J node_modules "../../node_modules"
Junction created for node_modules <<===>> ../../node_module
Ich habe mir auf dem Trainingsserver das node.js kaputt gemcht. Es half auch kein neues node-modules-Verzeichnis oder den Cache zu löschen. Ich habe node.js neu installiert (repariert). Jetzt geht es.
Props und State
States setzen und lesen
Beispiel: Button ohne Event und Bind
Wenn wir in Control auf unser Event Modell verzichten (wie in car.jsx), brauchen wir auch kein Binding (im Gegensatz zu app.jsx):
Beispiel Toggle:
Uebung: Kehrtwert mit React
Wir bauen einen Kehrwertrechner, der wie gewohnt den Kehrwert einer Zahl zurück liefert. Sollte etwas anderes als eine Zahl geschrieben werden, hätten wir gerne eine rote Fehlermeldung neben dem Eingabekästchen:
Hier die funktionierende App.jsx:
import logo from './logo.svg';
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
// Private Propertie-Informationen
super(props);
// private State-Informationen
this.state = {
"zahl": '',
"kehrwert": '',
"show": false,
"error":'',
"myStyle": { display: 'none' }
};
// Datenbindung an die private States binden
//ReadOnly auf die States für die angegebene Methode aufheben
this.handlerChangeZahl = this.handlerChangeZahl.bind(this)
this.handlerButtonClear = this.handlerButtonClear.bind(this)
this.handlerButtonCalc = this.handlerButtonCalc.bind(this)
}
//Control
handlerChangeZahl(event) {
if (isNaN(event.target.value)) {
// out.innerText = "Error! Bitte Zahl eingeben!";
this.setState({ error: "Error! Bitte Zahl eingeben!" });
}
else {
this.setState({ error: "" });
}
console.log("Input-Name: " + event.target.value);
// this.state.name = event.target.value; // So nicht, da this.state.name ReadOnly ist.
this.setState({ zahl: event.target.value });
}
//Control
handlerChangeGebJahr(event) {
console.log("Input-Name: " + event.target.value);
console.log("Target: " + event.target);
console.log("ID: " + event.target.id);
this.setState({ gebjahr: event.target.value });
}
//Control
handlerButtonCalc(event) {
console.log("Call: handlerButtonSend");
let kehrwert = 1.0 / this.state.zahl;
console.log("kehrwert: " + kehrwert);
this.setState({ kehrwert: kehrwert });
this.setState({ show: true });
this.setState({ myStyle: { display: 'none' } });
}
//Control
handlerButtonClear(event) {
console.log("Call: handlerButtonClear");
this.setState({ zahl: '' });
this.setState({ kehrwert: '' });
this.setState({ show: false });
this.setState({ error: '' });
}
//View
render() {
return (
<div className="App">
<h1> Ueb-Kehrwert </h1>
<hr />
<label>Zahl: </label>
<input type="text" value={this.state.zahl} onChange={this.handlerChangeZahl} />
<span id='error' style={{color: "red"}} >
{this.state.error}
</span>
<label></label>
<br />
<button disabled={this.state.error} onClick={this.handlerButtonCalc}>Calc</button>
<button onClick={this.handlerButtonClear}>Clear</button>
{this.state.show ? (
<div id='out' style={this.state.mystyle}>
<div>Zahl: {this.state.zahl} </div>
<div>Kehrwert: {this.state.kehrwert} </div>
</div>
)
:
null
}
</div>
);
}
}
export default App;
Properties
Die Daten werden über Properties an das Ausgabeobjekt übertragen:
Properties sind dazu da um Daten zwischen Parent und Child Elementen auszutauschen.
Ein Info-Broker Objekt hat einen Benachrichtigungsdienst. Wenn sich andere Objekte dort registrieren, können sie informiert werden, wenn sich Eigenschaften des ersten Objektes ändern:
Beispiel kap0601-using-props:
Inhalt von index.js:
Beispiel Kap602 default-props:
Beispiel kap0603-state-props:
Doit aktuallisiert die Daten:
Beispiel Kap0701:
Wir können Typen von Eigenschaften definieren:
Hier verstoßen wir (gewollt) gegen die Deklaration. "1" ist ein String und keine Zahl:
Beispiel kap0801 Komponent-Api State:
Kap0802 Force Update:
(Könnte auch verwendet werden um regelmäßig Börsenkurse neu darzustellen)
kap0803-component-api-find-dom-node:
Beispiel kap0901-component-life-cycle:
Ablauf des React-Scripts:
ShouldComponentUpdate überlässt uns die Möglichekeit die Daten anzunehmen oder nicht. (Bei SetState geht das nicht):
Oder anders dargestellt:
kap1001-forms-simple-example:
kap1002-forms-complex-example:
Wir haben einen Rückfluss wo ein Child mit Hilfe der onchange Methode am Parent den State ändert:
Disclaimer
Alles was ich mitschrieb und verstanden habe ist ohne Gewähr. Die Bilder stammen teilweise aus dem Internet und wir haben keine Urheberansprüche darauf.
Besten Dank an unseren sehr empfehlenswerten
Trainer: Hans-Joachim Blanke blanke@4point.de
Man achte auf die Schwergewichtigkeit von node_modules
In den nächsten Tagen und Wochen geht’s weiter, so: stay tuned!
Gruß, Achim Mertens