Marmits Wiki

« Max reacjsex » : différence entre les versions

← Modification précédenteModification suivante →
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
Voici une '''architecture ReactJS''' basée sur vos composants déclaratifs, en mettant l’accent sur les '''points clés de réactivité'''. Je vais structurer l’application avec :<br />
- Une hiérarchie de composants<br />
- La gestion d’état stratégique (local vs global)<br />
- Les dépendances réactives (conditions, effets)
-----
<span id="structure-de-fichiers-simplifiée"></span>
=== '''1. Structure de Fichiers (Simplifiée)''' ===
<syntaxhighlight lang="bash">src/
├── components/
│  ├── common/              # Composants réutilisables
│  │  ├── ZoneNumerique.jsx
│  │  ├── ZoneTexte.jsx
│  │  └── Bouton.jsx
│  ├── geoloc/              # Modules spécifiques
│  │  ├── Geoloc.jsx
│  │  └── CoordXY.jsx
│  └── formadresse/          # Formulaire d'adresse
│      ├── AttributAdresse.jsx
│      ├── CodePos.jsx
│      └── Ville.jsx
├── pages/
│  └── Application.jsx      # Point d'entrée
└── App.jsx                  # Racine React</syntaxhighlight>
-----
<span id="squellette-de-lapplication"></span>
=== '''2. Squellette de l’Application''' ===
<span id="a.-composants-de-base-réutilisables"></span>
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.
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.


Ligne 126 : Ligne 92 :
=== Exemple de <code>/src/components/ZoneTexte.jsx</code> ===
=== Exemple de <code>/src/components/ZoneTexte.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';


const ZoneTexte = ({ value, onChange }) => {
const ZoneTexte = ({ value, onChange }) => {
Ligne 136 : Ligne 102 :
=== Exemple de <code>/src/components/ZoneNumerique.jsx</code> ===
=== Exemple de <code>/src/components/ZoneNumerique.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';


const ZoneNumerique = ({ value, onChange }) => {
const ZoneNumerique = ({ value, onChange }) => {
Ligne 158 : Ligne 124 :
export default Bouton;</syntaxhighlight>
export default Bouton;</syntaxhighlight>
<span id="exemple-de-srccomponentscoordxy.jsx"></span>
<span id="exemple-de-srccomponentscoordxy.jsx"></span>
=== Exemple de <code>/src/components/CoordXY.jsx</code> ===
=== Exemple de <code>/src/components/CoordXY.jsx</code> ===


Ligne 175 : Ligne 140 :
export default CoordXY;</syntaxhighlight>
export default CoordXY;</syntaxhighlight>
<span id="exemple-de-srccomponentsgeoloc.jsx"></span>
<span id="exemple-de-srccomponentsgeoloc.jsx"></span>
=== Exemple de <code>/src/components/Geoloc.jsx</code> ===
=== Exemple de <code>/src/components/Geoloc.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React, { useState } from 'react';
<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
import CoordXY from './CoordXY';
import CoordXY from './CoordXY';


Ligne 204 : Ligne 168 :
=== Exemple de <code>/src/components/Etage.jsx</code> ===
=== Exemple de <code>/src/components/Etage.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneTexte from './ZoneTexte';
import ZoneTexte from './ZoneTexte';


Ligne 215 : Ligne 179 :
=== Exemple de <code>/src/components/CodeAcces.jsx</code> ===
=== Exemple de <code>/src/components/CodeAcces.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 226 : Ligne 190 :
=== Exemple de <code>/src/components/CodePos.jsx</code> ===
=== Exemple de <code>/src/components/CodePos.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 237 : Ligne 201 :
=== Exemple de <code>/src/components/Ville.jsx</code> ===
=== Exemple de <code>/src/components/Ville.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneTexte from './ZoneTexte';
import ZoneTexte from './ZoneTexte';


Ligne 248 : Ligne 212 :
=== Exemple de <code>/src/components/Adresse.jsx</code> ===
=== Exemple de <code>/src/components/Adresse.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React, { useState } from 'react';
<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
import Etage from './Etage';
import Etage from './Etage';
import CodeAcces from './CodeAcces';
import CodeAcces from './CodeAcces';
Ligne 276 : Ligne 240 :
=== Exemple de <code>/src/components/Zone.jsx</code> ===
=== Exemple de <code>/src/components/Zone.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import RueToureP from './RueToureP';
import RueToureP from './RueToureP';
import Tou from './Tou';
import Tou from './Tou';
Ligne 304 : Ligne 268 :
=== Exemple de <code>/src/components/RueToureP.jsx</code> ===
=== Exemple de <code>/src/components/RueToureP.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 315 : Ligne 279 :
=== Exemple de <code>/src/components/Tou.jsx</code> ===
=== Exemple de <code>/src/components/Tou.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 326 : Ligne 290 :
=== Exemple de <code>/src/components/Rep.jsx</code> ===
=== Exemple de <code>/src/components/Rep.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 337 : Ligne 301 :
=== Exemple de <code>/src/components/Etablissement.jsx</code> ===
=== Exemple de <code>/src/components/Etablissement.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ZoneNumerique from './ZoneNumerique';
import ZoneNumerique from './ZoneNumerique';


Ligne 348 : Ligne 312 :
=== Exemple de <code>/src/components/FormAdresse.jsx</code> ===
=== Exemple de <code>/src/components/FormAdresse.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import Adresse from './Adresse';
import Adresse from './Adresse';


Ligne 363 : Ligne 327 :
=== Exemple de <code>/src/components/Page.jsx</code> ===
=== Exemple de <code>/src/components/Page.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import FormAdresse from './FormAdresse';
import FormAdresse from './FormAdresse';
import Bouton from './Bouton';
import Bouton from './Bouton';
Ligne 385 : Ligne 349 :
=== Exemple de <code>/src/components/Application.jsx</code> ===
=== Exemple de <code>/src/components/Application.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import Page from './Page';
import Page from './Page';


Ligne 400 : Ligne 364 :
=== Exemple de <code>/src/App.jsx</code> ===
=== Exemple de <code>/src/App.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import Application from './components/Application';
import Application from './components/Application';


Ligne 415 : Ligne 379 :
=== Exemple de <code>/src/index.jsx</code> ===
=== Exemple de <code>/src/index.jsx</code> ===


<syntaxhighlight lang="js" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom';
import App from './App';
import App from './App';
Ligne 426 : Ligne 390 :
);</syntaxhighlight>
);</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.
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.
==== '''B. Composants Contextuels (Réactivité Conditionnelle)''' ====
<syntaxhighlight lang="jsx" line copy>// components/formadresse/Ville.jsx
export const Ville = ({ codePostal }) => {
  const [ville, setVille] = useState("");
  // Effet réactif : Chargement de la ville basé sur le code postal
  useEffect(() => {
    if (codePostal) {
      // Simule un appel API (ex: fetch(`/api/villes?cp=${codePostal}`))
      setVille("Paris"); // Valeur mockée
    }
  }, [codePostal]); // Dépendance réactive
  return <ZoneTexte value={ville} onChange={setVille} />;
};
};</syntaxhighlight>
-----
<span id="c.-gestion-détat-global-contexte-ou-redux"></span>
==== '''C. Gestion d’État Global (Contexte ou Redux)''' ====
<syntaxhighlight lang="jsx" line copy>// contexts/AdresseContext.jsx
import { createContext, useState } from 'react';
export const AdresseContext = createContext();
export const AdresseProvider = ({ children }) => {
  const [adresse, setAdresse] = useState({
    codePostal: "",
    ville: "",
    etage: "",
    // ... autres champs
  });
  return (
    <AdresseContext.Provider value={{ adresse, setAdresse }}>
      {children}
    </AdresseContext.Provider>
  );
};
};</syntaxhighlight>
-----
<span id="d.-composant-principal-application"></span>
==== '''D. Composant Principal (<code>Application</code>)''' ====
<syntaxhighlight lang="jsx" line copy>// pages/Application.jsx
import { AdresseProvider } from '../contexts/AdresseContext';
import { FormAdresse } from '../components/formadresse/FormAdresse';
import { Bouton } from '../components/common/Bouton';
export const Application = () => {
  const [isFormValid, setIsFormValid] = useState(false);
  // Logique de validation réactive (ex: vérifie si tous les champs sont remplis)
  useEffect(() => {
    // Implémentez la validation ici
    setIsFormValid(true); // Mock
  }, []); // Dépendances à ajuster
  return (
    <AdresseProvider>
      <FormAdresse />
      <Bouton
        label="Enregistrer"
        disabled={!isFormValid} // Désactivé si le formulaire est invalide
        onClick={() => console.log("Sauvegarde...")}
      />
    </AdresseProvider>
  );
};
};</syntaxhighlight>
-----
<span id="points-stratégiques-de-réactivité"></span>
=== '''3. Points Stratégiques de Réactivité''' ===
# '''État Local vs Global'''
#* <code>ZoneNumerique</code>/<code>ZoneTexte</code> : État local si isolé.<br />
#* <code>Ville</code> : Dépend d’un état parent (<code>codePostal</code>) → '''Effet réactif'''.<br />
#* <code>Bouton</code> : Désactivé conditionnellement (<code>isFormValid</code>).
# '''Effets de Bord'''
#* Chargement de la ville après un changement de code postal (<code>useEffect</code>).
# '''Optimisation'''
#* Mémoisation des composants (<code>React.memo</code>) si re-rendus fréquents.<br />
#* Éviter les props inutiles qui déclenchent des re-rendus.
# '''Validation Réactive'''
#* Un custom hook comme <code>useFormValidation</code> pourrait surveiller les changements de l’état global.
-----
<span id="exemple-de-flux-réactif"></span>
=== '''4. Exemple de Flux Réactif''' ===
* L’utilisateur remplit <code>CodePos</code> → '''déclenche''' un effet dans <code>Ville</code>.<br />
* La modification de <code>ville</code> met à jour l’état global → '''notifie''' le bouton “Enregistrer”.<br />
* Si tous les champs sont valides, le bouton passe en <code>disabled={false}</code>.
-----
<span id="pour-aller-plus-loin"></span>
=== '''5. Pour Aller Plus Loin''' ===
* '''Librairies utiles''' :
** <code>react-hook-form</code> pour la gestion de formulaires complexes.<br />
** <code>react-query</code> pour les appels API réactifs.<br />
* '''Tests''' : Vérifiez les performances avec <code>React DevTools Profiler</code>.
-----
Cette architecture sépare clairement :<br />
- Les '''composants UI''' (stateless si possible).<br />
- La '''logique réactive''' (effets, état).<br />
- Les '''règles métier''' (validation, dépendances).
😊
[[Category:Private]]
Récupérée de "https://marmits.com/wiki/Max_reacjsex"