React: Up & Running, 2. Auflage

Kapitel 3. Excel: Eine ausgefallene Tabellenkomponente

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Jetzt weißt du, wie du benutzerdefinierte React-Komponenten erstellst, wie du die Benutzeroberfläche mit generischen DOM-Komponenten und eigenen Komponenten zusammenstellst, wie du Eigenschaften festlegst, wie du den Status beibehältst, wie du dich in den Lebenszyklus einer Komponente einklinkst und wie du die Leistung optimierst, indem du nicht neu gerendert wirst, wenn es nicht nötig ist.

Um das alles zusammenzubringen (und dabei mehr über React zu erfahren), erstellen wir unter eine leistungsfähigere Komponente - eine Datentabelle. So etwas wie ein früher Prototyp von Microsoft Excel, mit dem du den Inhalt einer Datentabelle bearbeiten und die Daten sortieren, durchsuchen und als herunterladbare Dateien exportieren kannst.

Daten zuerst

Bei Tabellen dreht sich alles um die Daten, also sollte die schicke Tabellenkomponente (warum nicht Excel nennen?) ein Array mit Daten und ein Array mit Überschriften, die jede Datenspalte beschreiben, aufnehmen. Zum Testen nehmen wir eine Liste der meistverkauften Bücher aus Wikipedia:

const headers = ['Book', 'Author', 'Language', 'Published', 'Sales'];

const data = [
  [
    'A Tale of Two Cities', 'Charles Dickens',
      'English', '1859', '200 million',
  ],
  [
    'Le Petit Prince (The Little Prince)', 'Antoine de Saint-Exupéry',
      'French', '1943', '150 million',
  ],