Unser nächstes Ziel auf unserer fortlaufenden Reise mit der vorherigen App ist es, die "Produkte"-Seite zu erstellen. Diese Seite wird als Plattform dienen, um die aus der Datei `data.js` bereitgestellten Daten darzustellen und mit ihnen zu interagieren.

Wir beginnen mit der Erstellung der `ProductsPage`-Komponente. Die Struktur der Komponente ist wie folgt:

```js
import React, { useState } from "react";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);

  const handleChange = (e) => {
    // Handle user input and update the state (companies in this case)
  };

  return (
    <>
      <input type="text" onChange={handleChange} />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ProductsPage;
```

- Wir haben eine React-Komponente namens `ProductsPage` erstellt. Diese Komponente ist dafür ausgelegt, die Darstellung einer Liste von Unternehmen zu verwalten;
- Der `useState` Hook initialisiert den `companies` Zustand. Dieser Zustand ermöglicht es der Komponente, Änderungen in der Liste der Unternehmen zu verwalten und darauf zu reagieren;
- Die `handleChange` Funktion ist eingerichtet, um Benutzereingaben zu verarbeiten und Aktualisierungen basierend auf der Eingabe auszulösen.

Mit dieser `ProductsPage` Komponente können wir eine dynamische Liste von Unternehmen rendern und die Benutzerinteraktion mit den Daten ermöglichen.

Tauchen Sie ein in die Welt des Routings innerhalb von React-Anwendungen und lernen Sie, wie React Router die Verwaltung von Navigation, URL-Zustand und dynamischem Komponenten-Rendering vereinfacht, alles als Reaktion auf die aktuelle URL.

Lernen Sie die theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verstehen Sie die Bedeutung des Routings in Webanwendungen und warum wir die React Router-Bibliothek benötigen.

Entdecken Sie, wie Sie eine komplette React-Anwendung von Grund auf erstellen können, mit der Fähigkeit, Inhalte anzuzeigen, die sich basierend auf der URL mit der React Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Abfragezeichenfolgen zum Teilen und Verwalten des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Abfrageparametern und nutzen Sie React Router für die Navigation und Effekte basierend auf URL-Änderungen.

React Router

Einrichten Einer React-Komponente