React JS Fetch

Kaum eine React-Anwendung kommt an dem Punkt vorbei, an dem ein API – Application Programming Interface – als Schnittstelle zu einer anderen Anwendung integriert wird.

React JS Symbol

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.

Lifecycle of React Components
Beschreibt die Funktionen, die direkt vor dem Hinzufügen von Komponenten, bei Updates von Komponenten und bei der Entfernung von Komponenten aufgerufen werden

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
Suchen auf mediaevent.de