Kapitel 8. Die fertige App

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com

Alle Komponenten der neuen App sind fertiggestellt und im Discovery Tool(http://localhost:3000/discovery) testbar. Jetzt ist es an der Zeit, sie alle zu einer funktionierenden Anwendung zusammenzufügen (im Browser als http://localhost:3000/ verfügbar ). Abbildung 8-1 zeigt das gewünschte Ergebnis, wenn der Nutzer die App zum ersten Mal lädt. Es gibt eine einzige Zeile mit Standarddaten aus den Schema-Beispielen, um dem Nutzer den Zweck der App zu verdeutlichen.

rur2 0801
Abbildung 8-1. Die fertige App zum ersten Mal laden

Abbildung 8-2 zeigt das Dialogfeld, das erscheint, wenn der Benutzer auf die Schaltfläche + WHINE HINZUFÜGEN klickt.

rur2 0802
Abbildung 8-2. Hinzufügen eines neuen Datensatzes

Abbildung 8-3 zeigt den Zustand der App, nachdem der Nutzer eine weitere Zeile hinzugefügt hat.

rur2 0803
Abbildung 8-3. Zwei Datensätze in der Tabelle

Da du bereits die Kopfzeile, den Rumpf, die Tabellenkomponente Excel und die Dialogkomponente hast, musst du sie nur noch zusammensetzen, etwa so:

<div>
  <Header/>
  <Body>
    <Excel/>
    <Dialog>
      <Form/>
    </Dialog ...

Get React: Up & Running, 2. Auflage now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial