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 zweiten Tag in Block 10 gelernt und behalten habe:
Wozu braucht man eigentlich React?
Man kann zwar mit "npm start" den lokalen Server starten. Aber der eigentliche Sinn ist es, den Java-Code zu ergänzen.
Wir können mit "npm run build" unsere React-Ergebnisse in den Java-Code in den Static Ordner einfügen:
App.css ist für den View Stylesheet, App.js für den Control und Data-Bereich und App.test.js für das Testen zuständig:
Testlauf im Projektordner: "npm run test":
Hier noch mal die Installation, entnommen aus reactjs_tutorial.pdf:
Bei einem existierendem Projekt, wechselt man in den Projekt-Ordner (Wichtig ist, das node_modules eine Ebene höher liegt). Dort geht man in ein Projektverzeichnis und startet den React-Server:
Hier noch mal was beim Start passiert, wer welche Komponente einbindet:
Jsx ist eine Klassenbezogene Komponente.
React HTML ist etwas anderes, als das normale HTML. Z.B. gibt es Attributs-values (blau) und es wird dort in geschweiften Klammern gerendert (grün):
Und da es kein HTML ist, gehen auch die Kommentare nicht. Wir müssen es mit{ /* …. */} einklammern. Für React ist eine geschweifte Klammer natives JavaScript
Auch bei anderen HTML-Befehlen müssen wir aufpassen. Sie werden in React ansonsten falsch interpretiert:
Wenn wir in React beim Rendern in das Return mehrere Komponenten hängen, ist das so, als ob wir mehrere Weihnachtsbaum-Kugeln an einen Haken hängten:
Wir können natürlich auch mehrere Klassen erstellen (Weihnachstbaumhaken):
Statefull Example
This.state ist ein Objekt mit der Eigenschaft Person, der als Inhalt ein Array aus Objekten hat:
Ergebnis:
Wir können auch weitere Attribute, wie z.B. den Autor übergeben:
Die Klassen haben Eigenschaften mit dem Namen "props". Dort werden die Inhalte mit der Instanziierung reingesteckt.
Der Key wird intern für den Shadow-Tree verwendet.
Übung
Wir bauen ein Formular.
Wir kopieren vom day01 unser Projekt, fügen es in day02 ein und nennen es ueb-hello-user:
Jetzt müssen wir in package.json den namen ändern:
Als nächstes ändern wir App.js. Wir machen aus der funktionalen Komponente eine Klassenkomponente:
Umbenennen nach App.jsx, Import von React, Functional -> class
Wir passen App.css an (alles löschen außer dem obersten Teil):
Da wir diese Struktur häufiger brauchen, kopieren wir uns den Ordner "ueb-hello-user" und nennen ihn um nach "ueb-hello-user-template".
Danach ändern wir unsere App.css wie folgt:
Wir fügen den Construktor in Apps.jsx ein und übergeben die (noch leere) props-Variable und erstellen die State-Information "Homer". (Möchte ich Werte über die Props übergeben wollen, würde ich es so machen: <App name="Homer", age ="57"/> ):
Wir fügen einen handlerChangeName ein. Wenn das Programm speichern, können wir den Namen Homer nicht ändern, aber wir versuchen es und sehen es im Log:
Wir tragen ein:
this.handlerChangeName=this.handlerChangeName.bind(this)
Dann wird die Variable freigegeben und man kann "Homer" löschen. Siehe Log unten.
Der Eventhandler verarbeitet das Event onChange. Mit SetState möchte der Eventhandler den Status neu setzen. Das geht aber nicht, weil event.target.value privat ist. Da das State-System die Kontrolle über die Eigenschaften hat, muss es erst eine Erlaubnis erteilen:
Wir fügen ein zweites Abfragefeld Gebotsjahr ein:
Wir bauen einenClear-Button. Der muss natürlich auch freigegeben werden:
Wir bauen eine Alter-Berechnungslogik im Send-Button ein:
Jetzt erstellen wir drei Div-Sektionen und geben dort die Daten an. Das Alter haben wir auch noch angepasst:
Hier der fertige, funktionierende Code von app.jsx:
import logo from './logo.svg';
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
// Private Propertie-Informationen
// Data Model
super(props);
// private State-Informationen
//Data / Model
this.state = {
"name" :'',
"gebjahr" :'',
"alter" :'',
"show" : false,
// "myStyle" : {display:'none'}
};
// Datenbindung an die private States binden
//ReadOnly auf die States für die angegebene Methode aufheben
this.handlerChangeName = this.handlerChangeName.bind(this)
this.handlerChangeGebJahr = this.handlerChangeGebJahr.bind(this)
this.handlerButtonClear = this.handlerButtonClear.bind(this)
this.handlerButtonSend = this.handlerButtonSend.bind(this)
}
//Control
handlerChangeName(event) {
console.log("Input-Name: " + event.target.value);
// this.state.name = event.target.value; // So nicht, da this.state.name ReadOnly ist.
this.setState({ name: 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
handlerButtonSend(event) {
console.log("Call: handlerButtonSend");
let currentYear = new Date().getFullYear();
let alter = currentYear - this.state.gebjahr;
console.log("Alter: " + alter);
this.setState({ alter: alter });
this.setState({ show: true });
}
//Control
handlerButtonClear(event) {
console.log("Call: handlerButtonClear");
this.setState({ name: '' });
this.setState({ gebjahr: '' });
this.setState({ alter: '' });
this.setState({ show: false });
}
//View
render() {
return (
<div className="App">
<h1> Hello User </h1>
<hr />
<label>Name: </label>
<input type="text" value={this.state.name} onChange={this.handlerChangeName} />
<label></label>
<br />
<label>Geburtsjahr: <br />
<input id="ipyear" type="text" value={this.state.gebjahr} onChange={this.handlerChangeGebJahr} />
</label>
<br />
<button onClick={this.handlerButtonSend}>Send</button>
<button onClick={this.handlerButtonClear}>Clear</button>
{this.state.show ? (
<div id='out' style={this.state.mystyle}>
<div>Name: {this.state.name} </div>
<div>GebJahr: {this.state.gebjahr} </div>
<div>Alter: {this.state.alter} </div>
</div>
)
:
null
}
</div>
);
}
}
export default App;
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