REST API
Die meisten Anwendungen nutzen das REST-Protokoll für die Kommunikation und senden Daten als JSON (JavaScript Object Notation).
Component life Cycle
Der React Component Lifecycle stellt Funktionen zur Verfügung, die zu bestimmten Zeiten während des Lebenszyklus aufgerufen werden.
componentWillMount wird ausgeführt bevor irgendein HTML-Element gerendert wird und wird eher selten benutzt.
DidMount wird aufgerufen, wenn eine Instanz einer Komponente erzeugt und ins DOM eingefügt wurde. Das ist eine gute Gelegenheit, die Daten des Projekts einzulesen.
Mounting und unmounting entspricht dem Hinzufügen und Entfernen von DOM-Elementen. Die Methoden des Component Lifecycle gibt nur in der class-Syntax.
React und Fetch
Die App liest eine JSON-Datei, in der eine beliebige Zahl von Bildern mit Dateinamen, Datum der Erzeugung, Stichwörtern, Bewertung und Label gelistet sind.
[
{
"filename": "svg-pattern.svg",
"path": "svg\/fetchjson",
"rating": "5",
"urgency": "0",
"created": "",
"lightroom": "Tier,webseite"
},
{
"filename": "position-sticky.svg",
"path": "svg\/fetchjson",
"rating": "4",
"urgency": "0",
"created": "2020|04",
"lightroom": ""
},
…
]
ComponentDidMount ist ein günstiger Zustand einer Komponente, um externe Ressourcen in die App zu laden.
Die Komponente für das Laden der JSON-Datei und die Anzeige der Bilder aus der JSON-Datei ist class SvgArchiv.
class SvgArchiv extends React.Component {
state = {
data: [], // initial state before loading
loading: false
}
componentDidMount () {
this.setState ( {loading:true} );
console.log ("Component ist mounted")
fetch ("svgarchiv.json")
.then ( data => data.json() )
.then ( data => this.setState ( {data, loading : false} ) )
}
}
state enthält ein Array für die Daten aus JSON, loading ist anfänglich false und wird mit Eintreten von componentDidMount auf true gesetzt.
Der Aufruf fetch ist ganz normales Javascript.
Component render
render wird bei jeder Änderung der App aufgerufen und erzeugt das HTML.
render () {
return (
<div>
{this.state.loading
? "loading..."
: <div className="svglist">
{this.state.data.map ((svgfile,i) => {
return (
<div className="item" key={i}>
<div className="imgwrap">
<img alt="svgfile.filename" src={"archiv/" + svgfile.filename} width={200} />
</div>
<div className="fileinfo">
<h4>{svgfile.filename}</h4>
<p>{svgfile.created}</p>
<p>{svgfile.lightroom}</p>
</div>
</div>
)
})}
</div>
}
</div>
)
}
React modularisieren
Die kleine Beispielanwendung hier kann komplett in index.js leben, der Code ist noch übersichtlich. Wenn es aber mehr und mehr wird, ist es angebracht, die Komponenten in individuellen Dateien unterzubringen.
React Components
Fast immer sind React-Komponenten in modernen Javascript programmiert, so z.B. die Javascript class in diesem Beispiel, oder mit der arrow function. Alte Browser – sowohl auf den mobilen Geräten als auch IE10 / IE11 haben mit ECMAScript 2015 nichts am Hut.
Wir brauchen also eine Transformation, bzw. Transpiling durch Babel.
- babel preset env – übersetzt ES6 in ES5
- babel preset react – übersetzt JSX in Javascript
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
