Marmits Wiki

« Max reacjsex » : différence entre les versions

← Modification précédenteModification suivante →
Aucun résumé des modifications
Ligne 33 : Ligne 33 :


<span id="a.-composants-de-base-réutilisables"></span>
<span id="a.-composants-de-base-réutilisables"></span>
==== '''A. Composants de Base (Réutilisables)''' ====
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.
 
<span id="arborescence-des-fichiers-jsx"></span>
=== Arborescence des fichiers JSX ===
 
{| class="wikitable"
|-
! Chemin du fichier
! Description
|-
| <code>/src/index.jsx</code>
| Point d’entrée principal de l’application.
|-
| <code>/src/App.jsx</code>
| Composant principal de l’application.
|-
| <code>/src/components/Application.jsx</code>
| Composant racine de l’application.
|-
| <code>/src/components/Page.jsx</code>
| Composant de la page principale.
|-
| <code>/src/components/FormAdresse.jsx</code>
| Composant du formulaire d’adresse.
|-
| <code>/src/components/Adresse.jsx</code>
| Composant d’adresse.
|-
| <code>/src/components/AttributAdresse.jsx</code>
| Composant pour les attributs de l’adresse.
|-
| <code>/src/components/Etage.jsx</code>
| Composant pour l’étage.
|-
| <code>/src/components/CodeAcces.jsx</code>
| Composant pour le code d’accès.
|-
| <code>/src/components/CodePos.jsx</code>
| Composant pour le code postal.
|-
| <code>/src/components/Ville.jsx</code>
| Composant pour la ville.
|-
| <code>/src/components/Zone.jsx</code>
| Composant pour la zone.
|-
| <code>/src/components/RueToureP.jsx</code>
| Composant pour la rue/tour/étage.
|-
| <code>/src/components/Tou.jsx</code>
| Composant pour le numéro de tour.
|-
| <code>/src/components/Rep.jsx</code>
| Composant pour le numéro de répétition.
|-
| <code>/src/components/Etablissement.jsx</code>
| Composant pour l’établissement.
|-
| <code>/src/components/Geoloc.jsx</code>
| Composant pour la géolocalisation.
|-
| <code>/src/components/CoordXY.jsx</code>
| Composant pour les coordonnées XY.
|-
| <code>/src/components/ZoneTexte.jsx</code>
| Composant pour les zones de texte.
|-
| <code>/src/components/ZoneNumerique.jsx</code>
| Composant pour les zones numériques.
|-
| <code>/src/components/Bouton.jsx</code>
| Composant pour les boutons.
|}
 
<span id="gestion-des-imports"></span>
=== 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 :
 
<span id="points-clés"></span>
=== 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 <code>useState</code> pour gérer l’état local de chaque composant. Voici comment vous pourriez structurer chaque fichier avec sa logique respective :
 
<span id="exemple-de-srccomponentszonetexte.jsx"></span>
=== Exemple de <code>/src/components/ZoneTexte.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
 
const ZoneTexte = ({ value, onChange }) => {
  return <input type=&quot;text&quot; value={value} onChange={onChange} />;
};
 
export default ZoneTexte;</syntaxhighlight>
<span id="exemple-de-srccomponentszonenumerique.jsx"></span>
=== Exemple de <code>/src/components/ZoneNumerique.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
 
const ZoneNumerique = ({ value, onChange }) => {
  return <input type=&quot;number&quot; value={value} onChange={onChange} />;
};
 
export default ZoneNumerique;</syntaxhighlight>
<span id="exemple-de-srccomponentsbouton.jsx"></span>
=== Exemple de <code>/src/components/Bouton.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
 
const Bouton = ({ valeur, etat, onClick }) => {
  return (
    <button onClick={onClick} disabled={etat === 'désactivé'}>
      {valeur}
    </button>
  );
};
 
export default Bouton;</syntaxhighlight>
<span id="exemple-de-srccomponentscoordxy.jsx"></span>
=== Exemple de <code>/src/components/CoordXY.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>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;</syntaxhighlight>
<span id="exemple-de-srccomponentsgeoloc.jsx"></span>
=== Exemple de <code>/src/components/Geoloc.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>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;</syntaxhighlight>
<span id="exemple-de-srccomponentsetage.jsx"></span>
=== Exemple de <code>/src/components/Etage.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneTexte from './ZoneTexte';
 
const Etage = ({ value, onChange }) => {
  return <ZoneTexte value={value} onChange={onChange} />;
};
 
export default Etage;</syntaxhighlight>
<span id="exemple-de-srccomponentscodeacces.jsx"></span>
=== Exemple de <code>/src/components/CodeAcces.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const CodeAcces = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default CodeAcces;</syntaxhighlight>
<span id="exemple-de-srccomponentscodepos.jsx"></span>
=== Exemple de <code>/src/components/CodePos.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const CodePos = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default CodePos;</syntaxhighlight>
<span id="exemple-de-srccomponentsville.jsx"></span>
=== Exemple de <code>/src/components/Ville.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneTexte from './ZoneTexte';
 
const Ville = ({ value, onChange }) => {
  return <ZoneTexte value={value} onChange={onChange} />;
};
 
export default Ville;</syntaxhighlight>
<span id="exemple-de-srccomponentsadresse.jsx"></span>
=== Exemple de <code>/src/components/Adresse.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>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;</syntaxhighlight>
<span id="exemple-de-srccomponentszone.jsx"></span>
=== Exemple de <code>/src/components/Zone.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>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;</syntaxhighlight>
<span id="exemple-de-srccomponentsruetourep.jsx"></span>
=== Exemple de <code>/src/components/RueToureP.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const RueToureP = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default RueToureP;</syntaxhighlight>
<span id="exemple-de-srccomponentstou.jsx"></span>
=== Exemple de <code>/src/components/Tou.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const Tou = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default Tou;</syntaxhighlight>
<span id="exemple-de-srccomponentsrep.jsx"></span>
=== Exemple de <code>/src/components/Rep.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const Rep = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default Rep;</syntaxhighlight>
<span id="exemple-de-srccomponentsetablissement.jsx"></span>
=== Exemple de <code>/src/components/Etablissement.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
 
const Etablissement = ({ value, onChange }) => {
  return <ZoneNumerique value={value} onChange={onChange} />;
};
 
export default Etablissement;</syntaxhighlight>
<span id="exemple-de-srccomponentsformadresse.jsx"></span>
=== Exemple de <code>/src/components/FormAdresse.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import Adresse from './Adresse';
 
const FormAdresse = () => {
  return (
    <div>
      <Adresse />
    </div>
  );
};
 
export default FormAdresse;</syntaxhighlight>
<span id="exemple-de-srccomponentspage.jsx"></span>
=== Exemple de <code>/src/components/Page.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>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');
  };


<syntaxhighlight lang="js" line copy>// components/common/ZoneNumerique.jsx
export const ZoneNumerique = ({ value, onChange, disabled }) => {
   return (
   return (
     <input
     <div>
       type="number"
       <FormAdresse />
      value={value}
       <Bouton valeur=&quot;Enregistrer&quot; etat=&quot;activer&quot; onClick={handleSave} />
       onChange={(e) => onChange(e.target.value)}
     </div>
      disabled={disabled}
     />
   );
   );
};
};
};</syntaxhighlight>
 
<syntaxhighlight lang="jsx" line copy>// components/common/Bouton.jsx
export default Page;</syntaxhighlight>
export const Bouton = ({ label, onClick, disabled }) => {
<span id="exemple-de-srccomponentsapplication.jsx"></span>
=== Exemple de <code>/src/components/Application.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import Page from './Page';
 
const Application = () => {
   return (
   return (
     <button onClick={onClick} disabled={disabled}>
     <div>
       {label}
      <Page />
     </button>
    </div>
  );
};
 
export default Application;</syntaxhighlight>
<span id="exemple-de-srcapp.jsx"></span>
=== Exemple de <code>/src/App.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import Application from './components/Application';
 
const App = () => {
  return (
    <div className=&quot;App&quot;>
       <Application />
     </div>
   );
   );
};
};
};</syntaxhighlight>


-----
export default App;</syntaxhighlight>
<span id="exemple-de-srcindex.jsx"></span>
=== Exemple de <code>/src/index.jsx</code> ===
 
<syntaxhighlight lang="js" line copy>import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);</syntaxhighlight>
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.


<span id="b.-composants-contextuels-réactivité-conditionnelle"></span>
==== '''B. Composants Contextuels (Réactivité Conditionnelle)''' ====
==== '''B. Composants Contextuels (Réactivité Conditionnelle)''' ====


Récupérée de "https://marmits.com/wiki/Max_reacjsex"