Max reacjsex

Pour organiser l’arborescence des fichiers JSX et les imports dans une application React, il est important de structurer les fichiers de manière logique et modulaire. Voici une suggestion d’organisation sous forme de tableau, ainsi qu’une indication sur la manière de gérer les imports.

1.Exemple

Arborescence des fichiers JSX

Chemin du fichier	Description
/src/index.jsx	Point d’entrée principal de l’application.
/src/App.jsx	Composant principal de l’application.
/src/components/Application.jsx	Composant racine de l’application.
/src/components/Page.jsx	Composant de la page principale.
/src/components/FormAdresse.jsx	Composant du formulaire d’adresse.
/src/components/Adresse.jsx	Composant d’adresse.
/src/components/AttributAdresse.jsx	Composant pour les attributs de l’adresse.
/src/components/Etage.jsx	Composant pour l’étage.
/src/components/CodeAcces.jsx	Composant pour le code d’accès.
/src/components/CodePos.jsx	Composant pour le code postal.
/src/components/Ville.jsx	Composant pour la ville.
/src/components/Zone.jsx	Composant pour la zone.
/src/components/RueToureP.jsx	Composant pour la rue/tour/étage.
/src/components/Tou.jsx	Composant pour le numéro de tour.
/src/components/Rep.jsx	Composant pour le numéro de répétition.
/src/components/Etablissement.jsx	Composant pour l’établissement.
/src/components/Geoloc.jsx	Composant pour la géolocalisation.
/src/components/CoordXY.jsx	Composant pour les coordonnées XY.
/src/components/ZoneTexte.jsx	Composant pour les zones de texte.
/src/components/ZoneNumerique.jsx	Composant pour les zones numériques.
/src/components/Bouton.jsx	Composant pour les boutons.

Gestion des imports

Pour les imports, chaque fichier JSX importera les composants et les dépendances nécessaires. Voici comment vous pourriez structurer les imports dans chaque fichier :

Points clés

• Modularité : Chaque composant est dans son propre fichier, ce qui facilite la maintenance et la réutilisation.
• Imports relatifs : Utilisez des chemins relatifs pour importer des composants dans d’autres fichiers.
• Structure claire : Une arborescence bien définie aide à comprendre rapidement où se trouvent les différents composants.

Cette structure vous permet de garder votre code bien organisé et facile à naviguer.

Pour ajouter la logique de chaque composant tout en respectant la condition selon laquelle la ville est affichée uniquement si un code postal est saisi, nous allons utiliser le hook useState pour gérer l’état local de chaque composant. Voici comment vous pourriez structurer chaque fichier avec sa logique respective :

/src/components/ZoneTexte.jsx

import React from 'react';

const ZoneTexte = ({ value, onChange }) => {
  return <input type="text" value={value} onChange={onChange} />;
};

export default ZoneTexte;

/src/components/ZoneNumerique.jsx

import React from 'react';

const ZoneNumerique = ({ value, onChange }) => {
  return <input type="number" value={value} onChange={onChange} />;
};

export default ZoneNumerique;

/src/components/Bouton.jsx

import React from 'react';

const Bouton = ({ valeur, etat, onClick }) => {
  return (
    <button onClick={onClick} disabled={etat === 'désactivé'}>
      {valeur}
    </button>
  );
};

export default Bouton;

/src/components/CoordXY.jsx

import React from 'react';
import ZoneTexte from './ZoneTexte';

const CoordXY = ({ x, y, onXChange, onYChange }) => {
  return (
    <div>
      <ZoneTexte value={x} onChange={onXChange} />
      <ZoneTexte value={y} onChange={onYChange} />
    </div>
  );
};

export default CoordXY;

/src/components/Geoloc.jsx

import React, { useState } from 'react';
import CoordXY from './CoordXY';

const Geoloc = () => {
  const [x, setX] = useState('');
  const [y, setY] = useState('');

  const handleXChange = (e) => setX(e.target.value);
  const handleYChange = (e) => setY(e.target.value);

  return (
    <div>
      <CoordXY
        x={x}
        y={y}
        onXChange={handleXChange}
        onYChange={handleYChange}
      />
    </div>
  );
};

export default Geoloc;

/src/components/Etage.jsx

import React from 'react';
import ZoneTexte from './ZoneTexte';

const Etage = ({ value, onChange }) => {
  return <ZoneTexte value={value} onChange={onChange} />;
};

export default Etage;

/src/components/CodeAcces.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const CodeAcces = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default CodeAcces;

/src/components/CodePos.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const CodePos = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default CodePos;

/src/components/Ville.jsx

import React from 'react';
import ZoneTexte from './ZoneTexte';

const Ville = ({ value, onChange }) => {
  return <ZoneTexte value={value} onChange={onChange} />;
};

export default Ville;

/src/components/Adresse.jsx

import React, { useState } from 'react';
import Etage from './Etage';
import CodeAcces from './CodeAcces';
import CodePos from './CodePos';
import Ville from './Ville';
import Zone from './Zone';

const Adresse = () => {
  const [etage, setEtage] = useState('');
  const [codeAcces, setCodeAcces] = useState('');
  const [codePos, setCodePos] = useState('');
  const [ville, setVille] = useState('');

  return (
    <div>
      <Etage value={etage} onChange={(e) => setEtage(e.target.value)} />
      <CodeAcces value={codeAcces} onChange={(e) => setCodeAcces(e.target.value)} />
      <CodePos value={codePos} onChange={(e) => setCodePos(e.target.value)} />
      {codePos && <Ville value={ville} onChange={(e) => setVille(e.target.value)} />}
      <Zone />
    </div>
  );
};

export default Adresse;

Explication

• Condition {codePos && <Ville ... />} : Cette ligne signifie que le composant Ville ne sera rendu que si codePos a une valeur non vide. Si codePos est une chaîne vide (), alors le composant Ville ne sera pas affiché.
• Gestion de l’État : Lorsque l’utilisateur saisit quelque chose dans le champ CodePos, l’état codePos est mis à jour, ce qui déclenche un re-rendu du composant Adresse. Si codePos a une valeur, le composant Ville est alors affiché.

Cette approche permet de s’assurer que le champ de la ville n’est visible que lorsque l’utilisateur a saisi un code postal, ce qui peut être utile pour des raisons de logique métier ou d’expérience utilisateur.

/src/components/Zone.jsx

import React from 'react';
import RueToureP from './RueToureP';
import Tou from './Tou';
import Rep from './Rep';
import Etablissement from './Etablissement';
import Geoloc from './Geoloc';

const Zone = () => {
  const [rueToureP, setRueToureP] = React.useState('');
  const [tou, setTou] = React.useState('');
  const [rep, setRep] = React.useState('');
  const [etablissement, setEtablissement] = React.useState('');

  return (
    <div>
      <RueToureP value={rueToureP} onChange={(e) => setRueToureP(e.target.value)} />
      <Tou value={tou} onChange={(e) => setTou(e.target.value)} />
      <Rep value={rep} onChange={(e) => setRep(e.target.value)} />
      <Etablissement value={etablissement} onChange={(e) => setEtablissement(e.target.value)} />
      <Geoloc />
    </div>
  );
};

export default Zone;

/src/components/RueToureP.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const RueToureP = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default RueToureP;

/src/components/Tou.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const Tou = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default Tou;

/src/components/Rep.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const Rep = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default Rep;

/src/components/Etablissement.jsx

import React from 'react';
import ZoneNumerique from './ZoneNumerique';

const Etablissement = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};

export default Etablissement;

/src/components/FormAdresse.jsx

import React from 'react';
import Adresse from './Adresse';

const FormAdresse = () => {
  return (
    <div>
      <Adresse />
    </div>
  );
};

export default FormAdresse;

/src/components/Page.jsx

import React from 'react';
import FormAdresse from './FormAdresse';
import Bouton from './Bouton';

const Page = () => {
  const handleSave = () => {
    // Logique pour enregistrer les données
    console.log('Enregistrement des données');
  };

  return (
    <div>
      <FormAdresse />
      <Bouton valeur="Enregistrer" etat="activer" onClick={handleSave} />
    </div>
  );
};

export default Page;

/src/components/Application.jsx

import React from 'react';
import Page from './Page';

const Application = () => {
  return (
    <div>
      <Page />
    </div>
  );
};

export default Application;

/src/App.jsx

import React from 'react';
import Application from './components/Application';

const App = () => {
  return (
    <div className="App">
      <Application />
    </div>
  );
};

export default App;

/src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Cette structure vous permet de gérer l’état local de chaque composant et de conditionner l’affichage de la ville en fonction de la saisie du code postal. Chaque composant est responsable de sa propre logique et de son rendu, ce qui facilite la maintenance et l’évolution de l’application.

2.Exemple Ville from CodPos

Pour créer un composant Ville qui affiche une liste de villes provenant d’une API fictive et qui se base sur le codePos pour sélectionner la bonne ville, nous allons suivre les étapes suivantes :

1. Simuler une API : Nous allons simuler une API qui renvoie une liste de villes en fonction du codePos.
2. Composant Ville : Ce composant va récupérer les villes en fonction du codePos et afficher une liste déroulante (select) des villes correspondantes.
3. Mécanisme de Sélection : Lorsque le codePos change, le composant Ville va mettre à jour la liste des villes.

Voici comment vous pourriez structurer cela :

Simulation de l’API

Nous allons créer une fonction qui simule un appel API pour récupérer les villes en fonction du codePos.

// Simuler un appel API
const fetchVillesByCodePos = async (codePos) => {
  // Simuler des données fictives
  const villesData = {
    '75001': ['Paris 1'],
    '75002': ['Paris 2'],
    '69001': ['Lyon 1'],
    '69002': ['Lyon 2'],
    // Ajoutez d'autres codes postaux et villes fictives ici
  };

  // Simuler un délai de réponse de l'API
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(villesData[codePos] || []);
    }, 500);
  });
};

Composant Ville

Le composant Ville va utiliser le hook useEffect pour appeler la fonction fetchVillesByCodePos chaque fois que le codePos change.

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

const Ville = ({ codePos }) => {
  const [villes, setVilles] = useState([]);
  const [selectedVille, setSelectedVille] = useState('');

  useEffect(() => {
    const fetchVilles = async () => {
      if (codePos) {
        const villes = await fetchVillesByCodePos(codePos);
        setVilles(villes);
        setSelectedVille(villes[0] || '');
      }
    };

    fetchVilles();
  }, [codePos]);

  const handleVilleChange = (e) => {
    setSelectedVille(e.target.value);
  };

  return (
    <div>
      {villes.length > 0 ? (
        <select value={selectedVille} onChange={handleVilleChange}>
          {villes.map((ville, index) => (
            <option key={index} value={ville}>
              {ville}
            </option>
          ))}
        </select>
      ) : (
        <p>Aucune ville trouvée pour ce code postal.</p>
      )}
    </div>
  );
};

export default Ville;

Intégration dans le Composant Adresse

Enfin, nous allons intégrer le composant Ville dans le composant Adresse et passer le codePos comme prop.

import React, { useState } from 'react';
import Etage from './Etage';
import CodeAcces from './CodeAcces';
import CodePos from './CodePos';
import Ville from './Ville';
import Zone from './Zone';

const Adresse = () => {
  const [etage, setEtage] = useState('');
  const [codeAcces, setCodeAcces] = useState('');
  const [codePos, setCodePos] = useState('');

  return (
    <div>
      <Etage value={etage} onChange={(e) => setEtage(e.target.value)} />
      <CodeAcces value={codeAcces} onChange={(e) => setCodeAcces(e.target.value)} />
      <CodePos value={codePos} onChange={(e) => setCodePos(e.target.value)} />
      {codePos && <Ville codePos={codePos} />}
      <Zone />
    </div>
  );
};

export default Adresse;

Explication

• Appel API Simulé : La fonction fetchVillesByCodePos simule un appel API et renvoie une liste de villes en fonction du codePos.
• Hook useEffect : Le composant Ville utilise useEffect pour appeler la fonction fetchVillesByCodePos chaque fois que le codePos change.
• Liste Déroulante : Le composant Ville affiche une liste déroulante (select) des villes correspondantes au codePos. Si aucune ville n’est trouvée, un message est affiché.

Cette approche permet de sélectionner dynamiquement les villes en fonction du code postal saisi par l’utilisateur.

Vidéos

C'est quoi react (Youtube)