Marmits Wiki

Max reacjsex

Version datée du 4 juin 2025 à 22:36 par Geo (discussion | contributions)

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.

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 :

Exemple de /src/components/ZoneTexte.jsx

import React from 'react';

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

export default ZoneTexte;

Exemple de /src/components/ZoneNumerique.jsx

import React from 'react';

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

export default ZoneNumerique;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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 &amp;&amp; <Ville value={ville} onChange={(e) => setVille(e.target.value)} />}
      <Zone />
    </div>
  );
};

export default Adresse;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /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;

Exemple de /src/components/FormAdresse.jsx

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

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

export default FormAdresse;

Exemple de /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=&quot;Enregistrer&quot; etat=&quot;activer&quot; onClick={handleSave} />
    </div>
  );
};

export default Page;

Exemple de /src/components/Application.jsx

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

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

export default Application;

Exemple de /src/App.jsx

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

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

export default App;

Exemple de /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.

Récupérée de "https://marmits.com/w/index.php?title=Max_reacjsex&oldid=3256"