Java Training Block 10 – Tag 4 React

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 vierten Tag in Block 10 gelernt und behalten habe:

Apps erstellen

Das auf JavaScript basierende Framework React ist die Grundlage von Apps, wie wir sie auf dem Smartphone haben. D.h. wer in React programmieren kann, kann Handy-Apps herstellen.

Hier ist eine Seite, wo man das kostenfrei und sehr einfach ausprobieren kann: https://expo.dev.

Ich abe gestern innerhalb von10 Minuten eine Hello-World-App auf meinem Handy.

Ich lade Code auf einen Zwschenserver hoch und kann dann die App auf mein Handy installieren. (Damit ist sie aber nicht im Google-Play-Store).

---

Wir schauen uns weitere React Beispiele an:

kap1102-events-child-event

Im Render Teil stehen der Button und am Anfang die Daten "Initial Data". Wird auf den Button geklickt, wird die Method updateState aufgerufen. Dort wird das Feld this.state.data überschrieben.

kap1102-events-child-event

Zuerst wird wieder die Render-Methode in Zeile 22 aufgerufen und es erscheinen zwei Abschnitte. Zu jedem Abschnitt gehört eine Klasse Content1 bzw. Content2.
Beide Klassen überschreiben die Daten aus dem Constructor. Damit werden beide Komponenten gleichzeitig, egal auf welchen Button man klickt, geändert:

Wir können mit dem Klick in der einen Komponente, die Daten aus der anderen Komponente ändern. In rot der Weg des Events, in blau der Weg der Daten:

kap1201-refs

Nach dem Drücken auf Clear wird der Fokus in das Feld gesetzt. Der Cursor blinkt dann dort:

kap1301-keys

Im render() wird die Klasse Content so oft aufgerufen, wie es i-Elemente gibt:

---

Routing

kap1401-routing-simple

Wir teilen unsere Single-Page in verschiedene Bereiche auf. Mit Routing kann man zwischen den einzelnen Seiten schalten:

Wir haben das Modul react-router-dom installiert (npm install react-router-dom):

kap1402-routing-active-styles

Anstelle eines Links gibt es jetzt ein Nav-Link Objekt. Es wird nicht der gesamte DOM-Baum, sondern nur die Deltas ausgetauscht.

kap1403-routing-navi-prog

Ich habe versucht mit npm install react-dom-… in dem Projektordner die fehlende Komponente zu installieren.
Danach startete aber npm start nicht mehr.
Auch nicht in allen anderen Projektordnern.
Selbst eine Neuinstallation von node.js half nicht.
Ich habe das node-Modules-Verzeichnis im übergeordneten Ordner Block10-react gelöscht und aus dem Zip-File dort wieder hingelegt.
Dann haben wir den Code noch etwas angepasst und jetzt läuft es wieder:

kap1404-routing-url-param

kap1405-routing-nested-routes

Es gibt genestete Komponenten, aber keine genesteten Router. Dienks vererben sich in alle Subkomponenten. Die Subkomponenten haben eigene Links und rufen sich selber auf (blau). Diese mit Eigenschaften gefüllte Route-Komponente wird an die User-Komponente (grün) übergeben:

---

Übung Routing (ueb-kreis-routing):

3 Componenten (App, Input, Output)
1 Utility-Klasse Kreisrechner

• App -> Menü zum Umschalten zwischen Input und Output
• Input -> Formular zur Erfassung des Radius
• Output -> Für die Ausgabe von Radius, Fläche, Umfang

Hier der Code. Er funktioniert, solange man keine Null eingibt:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//import reportWebVitals from './reportWebVitals';
ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);
// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

//reportWebVitals();

index.css:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

}

app.css:

.active{
  color:red;
}

app.js (könnte auch app.jsx heißen):

import React from 'react';
import './App.css';
import { Route, NavLink, BrowserRouter as Router, Switch, browserHistory } from 'react-router-dom'
import { useHistory } from "react-router-dom";

import Input from './components/Input';

import Output from './components/Output';

import Notfound from './notfound'

import Kreis from './util/Kreis'
class App extends React.Component {

constructor(props) {

super(props);
// Private
this.state={'radius': 0}

    // Databinding an die  private States binden
    this.updateParentState = this.updateParentState.bind(this)

}
updateParentState(radius) {

console.log("updateParentState - Radius: " + radius)

let kreis = new Kreis();

let flaeche = kreis.flaeche(radius)

let umfang = kreis.umfang(radius)

this.setState({

'radius': radius,

'flaeche': flaeche,

'umfang': umfang

})

//this.props.history.push('/output');

}
render() {

return (

<Router >

<div>

<NavLink exact activeClassName="active" to="/">Input  </NavLink>

<NavLink activeClassName="active" to="/output"> Output</NavLink>

<hr />

<Switch>
        &lt;Route exact path="/" component={() => &lt;Input updateStateProp={this.updateParentState}>&lt;/Input>} />
        &lt;Route path="/output" component={() => &lt;Output kreis={this.state}>&lt;/Output>} />
        {/* 
        &lt;Route path="/output" component={&lt;Output/>} />
        */}
            &lt;Route component={Notfound} />
        &lt;/Switch>
    &lt;/div>
&lt;/Router>

);

}
}
export default App;

notfound.js:

import React from 'react'
const Notfound = () => <h1>Not found</h1>
export default Notfound

util.kreis.js:

class Kreis {
umfang(r) {
    if (isNaN(r) || r <= 0) {
        throw new Error("Ungültiger Radius");
    }
    return 2.0 * Math.PI * r;
}

flaeche(r) {
    if (isNaN(r) || r <= 0) {
        throw new Error("Ungültiger Radius");
    }
    return Math.PI * Math.pow(r, 2);
}

}
export default Kreis;

---

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