Notre prochain objectif dans notre parcours continu avec l'application précédente est de construire la page "Produits". Cette page servira de plateforme pour afficher les données fournies par le fichier `data.js`, nous permettant d'interagir avec elles.

Nous commençons par créer le composant `ProductsPage`. La structure du composant est la suivante :

```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;
```

- Nous avons établi un composant React nommé `ProductsPage`. Ce composant est conçu pour gérer l'affichage d'une liste d'entreprises ;
- Le hook `useState` initialise l'état `companies`. Cet état permettra au composant de gérer et de répondre aux changements dans la liste des entreprises ;
- La fonction `handleChange` est configurée pour gérer les entrées utilisateur et déclencher des mises à jour basées sur l'entrée.

Avec ce composant `ProductsPage` en place, nous pouvons afficher une liste dynamique d'entreprises et permettre l'interaction de l'utilisateur avec les données.

Plongez dans le monde du routage au sein des applications React et découvrez comment React Router simplifie la gestion de la navigation, de l'état des URL et du rendu dynamique des composants, tout en réponse à l'URL actuelle.

Apprenez les bases théoriques de concepts tels que l'URL, le domaine, le protocole, les paramètres de requête, et plus encore. Comprenez l'importance du routage dans les applications web et pourquoi nous avons besoin de la bibliothèque React Router.

Découvrez comment créer une application React complète à partir de zéro, avec la capacité d'afficher du contenu qui s'adapte en fonction de l'URL en utilisant la fonctionnalité de React Router.

Explorez l'utilisation des chaînes de requête pour partager et gérer l'état de l'application via les URL, travaillez avec différents types de données dans les paramètres de requête, et utilisez React Router pour la navigation et les effets basés sur les changements d'URL.

React Router

Configurer un Composant React