React

Themen

• Überblick und einfaches Beispiel
• JavaScript-Grundlagen für React
• State (deklaratives Rendering)
• JSX (Templatesprache)
• React und TypeScript
• Entwicklerwerkzeuge
• Komponenten
• Abfragen von APIs
• Side Effects
• Routing

React Überblick

React

React: JavaScript-Library zum Erstellen interaktiver Benutzeroberflächen im Browser

Grundlagen moderner JavaScript UI Libraries

• State-basiert / deklarativ
• Komponenten-Struktur

State-basiert / deklarativ

• Datenmodell, das den gesamten Anwendungszustand (State) abbildet
• User-Interaktionen ändern den State, die Anzeige wird automatisch aktualisiert

State-basiert / deklarativ

Beispiel: vollständiger State einer Todo-Anwendung

{
  "newTitleInput": "learn Rea",
  "todos": [
    { "id": 1, "title": "laundry", "completed": true },
    { "id": 4, "title": "shopping", "completed": true },
    { "id": 7, "title": "gardening", "completed": false }
  ]
}

State-basiert / deklarativ

mögliches Erscheinungsbild einer Todo-Anwendung:

Komponenten-Struktur

• "eigene" HTML-Tags
• Kommunikation zwischen Eltern- und Kindelement via Props und Events

Komponenten-Struktur

Beispiel: Komponentenstruktur einer Todo-Anwendung

Beispiel: Komponenten und State in einer Todo-Anwendung

Beispiel: Komponenten, State und Props in einer Todo-Anwendung

Was macht React besonders?

• JavaScript-basierte Template-Syntax: JSX
• Explizite Änderung des Anwendungszustands mittels Settern
• State-Objekte sind unveränderlich (immutable)

JSX

einfaches Codebeispiel mit State und JSX:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>current count: {count}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>
          increment
        </button>
      </div>
    </div>
  );
}

Online Editoren

Online Editoren

Optionen:

• https://codesandbox.io
• https://stackblitz.com

gemeinsame Funktionalität:

• auf VS Code basiert
• Templates für React und React TypeScript
• Prettier-basierte Formatierung mittels Shift + Alt + F
• öffentliches Hosting der Resultate

Grundlegendes Beispiel: Slideshow

Grundlegendes Beispiel: Slideshow

Beispiel: slideshow-Komponente, die folgendes demonstriert:

• Komponentendefinition als Funktion
• Komponenten-State (Bild-id)
• JSX Templatesprache: Mischung aus JavaScript und XML

Online-Version auf Codesandbox: https://codesandbox.io/s/slideshow-cn6m5

Grundlegendes Beispiel: Slideshow

in App.js / App.tsx:

import Slideshow from './Slideshow';

// ...

  return (
    // ...
      <Slideshow />;
  )

Grundlegendes Beispiel: Slideshow

import { useState } from 'react';

const baseUrl = 'https://picsum.photos/300/200?image=';
function Slideshow() {
  const [img, setImg] = useState(0);
  const imgUrl = baseUrl + img.toString();
  function goToPrevImg() {
    setImg(img !== 0 ? img - 1 : 0);
  }
  return (
    <div>
      <h1>Image {img}</h1>
      <button onClick={() => setImg(0)}>start</button>
      <button onClick={() => goToPrevImg()}>prev</button>
      <img src={imgUrl} alt="slideshow" />
      <button onClick={() => setImg(img + 1)}>next</button>
    </div>
  );
}
export default Slideshow;

Grundlegendes Beispiel: Slideshow

function Slideshow() {
  // ...
}

Eine Komponente wird als Funktion definiert, die einen XML-Baum zurückgibt

Die Funktion wird jedes Mal aufgerufen, wenn die Komponente (neu) gerendert werden muss

Komponentennamen beginnen immer mit einem Großbuchstaben

Grundlegendes Beispiel: Slideshow

  const [img, setImg] = useState(0);

Eine Komponente kann interne State-Einträge haben

useState gibt bei jedem Rendering den aktuellen State-Eintrag und einen zugehörigen Setter zurück

Grundlegendes Beispiel: Slideshow

  const imgUrl = baseUrl + img.toString();

Üblicherweise wird der minimale State gespeichert

Weitere Werte (z.B. imgUrl) können aus dem State abgeleitet werden

Grundlegendes Beispiel: Slideshow

  function goToPrevImg() {
    setImg(img !== 0 ? img - 1 : 0);
  }

Funktionen, die mit State interagieren, können innerhalb der Komponentenfunktion definiert werden

Grundlegendes Beispiel: Slideshow

  return (
    <div>
      ...
    </div>
  );

Ein XML-Tag wechselt von JavaScript zu XML

Grundlegendes Beispiel: Slideshow

      <h1>Image {img}</h1>

Eine geschweifte Klammer wechselt zurück zu JavaScript

Grundlegendes Beispiel: Slideshow

      <button onClick={() => setImg(0)}>start</button>
      <button onClick={() => goToPrevImg()}>prev</button>
      <img src={imgUrl} alt="slideshow" />
      <button onClick={() => setImg(img + 1)}>next</button>

Eventhandler können als JavaScript-Funktionen definiert werden