React-Komponenten, Props und HTTP-Requests: Eine Schritt-für-Schritt-Anleitung für die Barstool-Archiv-Aufgabe

Einführung: React und das Barstool-Archiv-Projekt

In diesem Tutorial zeige ich dir, wie du eine React-Anwendung baust, die Daten von einer externen API abruft und als Liste anzeigt. Das Beispiel orientiert sich an der Cosc484 assignment 9, bei der ein Barstool-Archiv aus dem Jahr 2020/2021 nachgebildet wird. Du lernst, wie du Komponenten, Props, State und HTTP-Requests kombinierst – Grundlagen, die in vielen modernen Web-Apps (wie Social-Media-Feeds oder Dashboards) zum Einsatz kommen.

Stell dir vor, du entwickelst eine Retro-Sports-News-Seite, die an die Anfänge von Barstool Sports erinnert. Genau das ist die Idee: Eine Liste von Artikeln mit Titel, Bild, Autor, Autoren-Avatar und Kommentarzahl. Klingt machbar? Dann lass uns loslegen.

Grundlagen: React-Komponenten und JSX

React basiert auf Komponenten – kleinen, wiederverwendbaren Bausteinen. Jede Komponente gibt JSX zurück, eine HTML-ähnliche Syntax. Für unser Archiv brauchen wir mindestens zwei Komponenten: App (die Hauptkomponente) und Article (die einzelne Artikelkarte).

Ein einfaches Beispiel:

function Article(props) {
  return (
    <div>
      <h3>{props.title}</h3>
      <p>Autor: {props.author}</p>
    </div>
  );
}

Hier siehst du Props: Daten, die von der Elternkomponente an die Kindkomponente übergeben werden. Props sind schreibgeschützt und machen Komponenten flexibel.

State und HTTP-Requests mit fetch

Um Daten von einer API zu laden, brauchen wir State. State speichert veränderliche Daten, die das UI beeinflussen. In React verwendest du dafür den useState-Hook und den useEffect-Hook, um den Request auszulösen.

So holst du die Daten von der Barstool-API:

import React, { useState, useEffect } from 'react';

function App() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('https://www.jalirani.com/files/barstool.json')
      .then(response => response.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div>
      {articles.map(article => (
        <Article key={article.id} data={article} />
      ))}
    </div>
  );
}

Der useEffect-Hook führt den HTTP-Request einmalig beim ersten Rendern aus. Die empfangenen Daten werden in articles gespeichert und dann an die Article-Komponente übergeben.

Die Article-Komponente im Detail

Laut Aufgabenstellung muss jeder Artikel Folgendes anzeigen:

• Artikeltitel (klickbar, verlinkt auf die echte Barstool-Seite)
• Thumbnail/Bild (die kleine Version)
• Autor
• Autoren-Avatar
• Anzahl der Kommentare

Die JSON-Daten enthalten die benötigten Felder. Achte darauf, dass die Bild-URL aus image.location und image.thumbnail.small zusammengesetzt wird. Beispiel:

const imageUrl = article.image.location + article.image.thumbnail.small;

Einige Thumbnails sind GIFs – React zeigt sie ohne Probleme an, solange du das img-Tag normal verwendest. Falls du Bedenken hast, teste die URL im Browser.

Hier die vollständige Article-Komponente:

function Article({ data }) {
  const { title, url, image, author, comments } = data;
  const thumbnail = image.location + image.thumbnail.small;
  const authorAvatar = author.avatar;

  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <a href={url} target="_blank" rel="noopener noreferrer">
        <h3>{title}</h3>
      </a>
      <img src={thumbnail} alt={title} style={{ maxWidth: '100%' }} />
      <p><strong>Autor:</strong> {author.name}</p>
      <img src={authorAvatar} alt={author.name} style={{ width: 50, borderRadius: '50%' }} />
      <p><em>Kommentare:</em> {comments}</p>
    </div>
  );
}

Beachte: Der Titel wird in einen a-Tag verpackt, der auf die Originalseite verweist. Das Attribut target="_blank" öffnet den Link in einem neuen Tab – benutzerfreundlich und sicher.

Häufige Fehler und Tipps

• Bild-URL nicht korrekt zusammengesetzt: Überprüfe die JSON-Struktur. Die Felder image.location und image.thumbnail.small müssen konkateniert werden. Teste die URL im Browser.
• GIF-Unterstützung: React zeigt GIFs automatisch an. Keine Sonderbehandlung nötig.
• Kommentare als Zahl: Die API liefert comments als Zahl – einfach anzeigen.
• Fehlende Daten: Manche Artikel haben vielleicht leere Felder. Verwende optionale Verkettung (article?.author?.name) oder Fallback-Werte.

Zusammenfassung und Ausblick

Du hast gelernt, wie du mit React eine Liste von Artikeln aus einer API darstellst. Die Konzepte – Komponenten, Props, State und HTTP-Requests – sind universell und tauchen in unzähligen Projekten wieder auf. Ob du nun ein React-Entwickler werden oder einfach nur die Hausaufgabe lösen willst – diese Grundlagen sind essenziell.

Als Nächstes könntest du CSS hinzufügen, um die Liste wie das echte Barstool-Archiv aussehen zu lassen. Oder du implementierst einen Filter, um nach Autor zu suchen. Die Möglichkeiten sind endlos.

Viel Erfolg bei deiner Abgabe – und denk dran: Übung macht den Meister.