1. Organisation des fichiers du projet

Le projet react-custom-scrollbars suit une architecture modulaire. Voici sa structure typique :

react-custom-scrollbars/
├── src/
│   ├── Composants/
│   │   ├── BarresDefilement.js
│   │   ├── BarresDefilement.test.js
│   │   ├── index.js
│   │   ├── outils/
│   │   │   ├── calculerLargeurInterne.js
│   │   │   ├── calculerHauteurInterne.js
│   │   │   ├── ...
│   ├── feuilles-de-style/
│   │   ├── BarresDefilement.css
│   ├── index.js
├── demonstrations/
│   ├── simple/
│   │   ├── index.js
│   │   ├── styles.css
│   ├── complexe/
│   │   ├── index.js
│   │   ├── styles.css
├── package.json
├── README.md
├── LICENSE

Détail de l'arborescence

• src/ : Code source principal de la bibliothèque.
• Composants/ : Implémentation des barres de défilement.
• BarresDefilement.js : Logique centrale du composant.
• BarresDefilement.test.js : Suite de tests unitaires.
• index.js : Point d'exportation du module.
• outils/ : Fonctions utilitaires pour le calcul des dimensions.
• feuilles-de-style/ : Fichiers CSS pour l'apparence visuelle.
• demonstrations/ : Exemples d'intégration dans des applications.

2. Fichiers de lancement

Les fichiers de démonstration se trouvent dans demonstrations/simple/index.js et demonstrations/complexe/index.js. Ils illustrent l'intégration du composant.

// demonstrations/simple/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Scrollbars } from 'react-custom-scrollbars';
import './styles.css';

const MonApplication = () => (
  <Scrollbars style={{ width: 400, height: 300 }}>
    <div>
      <p>Exemple élémentaire de barres de défilement.</p>
      <p>Ce composant permet une configuration étendue des styles et du défilement.</p>
    </div>
  </Scrollbars>
);

ReactDOM.render(<MonApplication />, document.getElementById('racine'));

Points d'importance

• Importation du composant Scrollbars depuis le package npm.
• Application de styles inline pour définir les dimensions du conteneur.
• Rendu dans l'élément DOM avec l'idantifiant 'racine'.

3. Fichiers de configuration

La configuration principale réside dans package.json, qui définit les dépendances et les commandes du projet.

{
  "name": "react-custom-scrollbars",
  "version": "1.0.0",
  "description": "Bibliothèque React pour la création de barres de défilement sur mesure",
  "main": "src/index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "eslint": "^7.23.0",
    "eslint-plugin-react": "^7.23.1"
  },
  "license": "MIT"
}

Éléments clés du fichier

• name : Identifiant unique du paquet dans l'écosystème npm.
• description : Résumé fonctionnel du composant.
• scripts : Commandes pour le cycle de développement, par exemple npm run start pour le serveur local.
• dependencies : Modules requis à l'exécution, comme React et ReactDOM.
• devDependencies : Outils supplémentaires pour le développement, incluant ESLint pour le linting.