« Max reacjsex » : différence entre les versions

(12 versions intermédiaires par le même utilisateur non affichées)

Ligne 1 :

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 ===

Ligne 90 :

=== ~~Exemple de~~ <code>/src/components/ZoneTexte.jsx</code> ===

=== <code>/src/components/ZoneTexte.jsx</code> ===

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

Ligne 100 :

export default ZoneTexte;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/ZoneNumerique.jsx</code> ===

=== <code>/src/components/ZoneNumerique.jsx</code> ===

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

Ligne 110 :

export default ZoneNumerique;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Bouton.jsx</code> ===

=== <code>/src/components/Bouton.jsx</code> ===

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

Ligne 124 :

export default Bouton;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/CoordXY.jsx</code> ===

=== <code>/src/components/CoordXY.jsx</code> ===

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

Ligne 140 :

export default CoordXY;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Geoloc.jsx</code> ===

=== <code>/src/components/Geoloc.jsx</code> ===

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

Ligne 166 :

export default Geoloc;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Etage.jsx</code> ===

=== <code>/src/components/Etage.jsx</code> ===

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

Ligne 177 :

export default Etage;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/CodeAcces.jsx</code> ===

=== <code>/src/components/CodeAcces.jsx</code> ===

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

Ligne 188 :

export default CodeAcces;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/CodePos.jsx</code> ===

=== <code>/src/components/CodePos.jsx</code> ===

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

Ligne 199 :

export default CodePos;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Ville.jsx</code> ===

=== <code>/src/components/Ville.jsx</code> ===

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

Ligne 210 :

export default Ville;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Adresse.jsx</code> ===

=== <code>/src/components/Adresse.jsx</code> ===

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

Ligne 230 :

<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)} />}

{codePos && <Ville value={ville} onChange={(e) => setVille(e.target.value)} />}

</div>

Ligne 237 :

export default Adresse;</syntaxhighlight>

==== Explication ====

* '''Condition <code>{codePos && <Ville ... />}</code>''' : Cette ligne signifie que le composant <code>Ville</code> ne sera rendu que si <code>codePos</code> a une valeur non vide. Si <code>codePos</code> est une chaîne vide (<code>''</code>), alors le composant <code>Ville</code> ne sera pas affiché.

* '''Gestion de l’État''' : Lorsque l’utilisateur saisit quelque chose dans le champ <code>CodePos</code>, l’état <code>codePos</code> est mis à jour, ce qui déclenche un re-rendu du composant <code>Adresse</code>. Si <code>codePos</code> a une valeur, le composant <code>Ville</code> 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.

=== ~~Exemple de~~ <code>/src/components/Zone.jsx</code> ===

=== <code>/src/components/Zone.jsx</code> ===

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

Ligne 266 :

Ligne 275 :

export default Zone;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/RueToureP.jsx</code> ===

=== <code>/src/components/RueToureP.jsx</code> ===

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

Ligne 277 :

Ligne 286 :

export default RueToureP;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Tou.jsx</code> ===

=== <code>/src/components/Tou.jsx</code> ===

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

Ligne 288 :

Ligne 297 :

export default Tou;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Rep.jsx</code> ===

=== <code>/src/components/Rep.jsx</code> ===

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

Ligne 299 :

Ligne 308 :

export default Rep;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Etablissement.jsx</code> ===

=== <code>/src/components/Etablissement.jsx</code> ===

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

Ligne 310 :

Ligne 319 :

export default Etablissement;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/FormAdresse.jsx</code> ===

=== <code>/src/components/FormAdresse.jsx</code> ===

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

Ligne 325 :

Ligne 334 :

export default FormAdresse;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Page.jsx</code> ===

=== <code>/src/components/Page.jsx</code> ===

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

Ligne 347 :

Ligne 356 :

export default Page;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/components/Application.jsx</code> ===

=== <code>/src/components/Application.jsx</code> ===

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

Ligne 362 :

Ligne 371 :

export default Application;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/App.jsx</code> ===

=== <code>/src/App.jsx</code> ===

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

Ligne 377 :

Ligne 386 :

export default App;</syntaxhighlight>

=== ~~Exemple de~~ <code>/src/index.jsx</code> ===

=== <code>/src/index.jsx</code> ===

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

Ligne 390 :

Ligne 399 :

);</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.

== '''2.Exemple Ville from CodPos''' ==

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

# '''Simuler une API''' : Nous allons simuler une API qui renvoie une liste de villes en fonction du <code>codePos</code>.

# '''Composant <code>Ville</code>''' : Ce composant va récupérer les villes en fonction du <code>codePos</code> et afficher une liste déroulante (<code>select</code>) des villes correspondantes.

# '''Mécanisme de Sélection''' : Lorsque le <code>codePos</code> change, le composant <code>Ville</code> 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 <code>codePos</code>.

<syntaxhighlight lang="jsx" line copy>// 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);

});

};</syntaxhighlight>

=== Composant <code>Ville</code> ===

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

<syntaxhighlight lang="jsx" line copy>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 ? (

{villes.map((ville, index) => (

{ville}

</option>

))}

</select>

) : (

Aucune ville trouvée pour ce code postal.

)}

</div>

);

};

export default Ville;</syntaxhighlight>

=== Intégration dans le Composant <code>Adresse</code> ===

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

<syntaxhighlight lang="jsx" 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('');

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} />}

</div>

);

};

export default Adresse;</syntaxhighlight>

=== Explication ===

* '''Appel API Simulé''' : La fonction <code>fetchVillesByCodePos</code> simule un appel API et renvoie une liste de villes en fonction du <code>codePos</code>.

* '''Hook <code>useEffect</code>''' : Le composant <code>Ville</code> utilise <code>useEffect</code> pour appeler la fonction <code>fetchVillesByCodePos</code> chaque fois que le <code>codePos</code> change.

* '''Liste Déroulante''' : Le composant <code>Ville</code> affiche une liste déroulante (<code>select</code>) des villes correspondantes au <code>codePos</code>. 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 ==

[https://www.youtube.com/watch?v=1p6TsZW_HDk C'est quoi react (Youtube)]

[[Category:React]]

@@ Ligne 1 : / Ligne 1 : @@
 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''' ==
 <span id="arborescence-des-fichiers-jsx"></span>
 === Arborescence des fichiers JSX ===
@@ Ligne 90 : / Ligne 90 : @@
 <span id="exemple-de-srccomponentszonetexte.jsx"></span>
-=== Exemple de <code>/src/components/ZoneTexte.jsx</code> ===
+===  <code>/src/components/ZoneTexte.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 100 : / Ligne 100 : @@
 export default ZoneTexte;</syntaxhighlight>
 <span id="exemple-de-srccomponentszonenumerique.jsx"></span>
-=== Exemple de <code>/src/components/ZoneNumerique.jsx</code> ===
+===  <code>/src/components/ZoneNumerique.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 110 : / Ligne 110 : @@
 export default ZoneNumerique;</syntaxhighlight>
 <span id="exemple-de-srccomponentsbouton.jsx"></span>
-=== Exemple de <code>/src/components/Bouton.jsx</code> ===
+===  <code>/src/components/Bouton.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 124 : / Ligne 124 : @@
 export default Bouton;</syntaxhighlight>
 <span id="exemple-de-srccomponentscoordxy.jsx"></span>
-=== Exemple de <code>/src/components/CoordXY.jsx</code> ===
+===  <code>/src/components/CoordXY.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 140 : / Ligne 140 : @@
 export default CoordXY;</syntaxhighlight>
 <span id="exemple-de-srccomponentsgeoloc.jsx"></span>
-=== Exemple de <code>/src/components/Geoloc.jsx</code> ===
+===  <code>/src/components/Geoloc.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
@@ Ligne 166 : / Ligne 166 : @@
 export default Geoloc;</syntaxhighlight>
 <span id="exemple-de-srccomponentsetage.jsx"></span>
-=== Exemple de <code>/src/components/Etage.jsx</code> ===
+===  <code>/src/components/Etage.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 177 : / Ligne 177 : @@
 export default Etage;</syntaxhighlight>
 <span id="exemple-de-srccomponentscodeacces.jsx"></span>
-=== Exemple de <code>/src/components/CodeAcces.jsx</code> ===
+===  <code>/src/components/CodeAcces.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 188 : / Ligne 188 : @@
 export default CodeAcces;</syntaxhighlight>
 <span id="exemple-de-srccomponentscodepos.jsx"></span>
-=== Exemple de <code>/src/components/CodePos.jsx</code> ===
+===  <code>/src/components/CodePos.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 199 : / Ligne 199 : @@
 export default CodePos;</syntaxhighlight>
 <span id="exemple-de-srccomponentsville.jsx"></span>
-=== Exemple de <code>/src/components/Ville.jsx</code> ===
+===  <code>/src/components/Ville.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 210 : / Ligne 210 : @@
 export default Ville;</syntaxhighlight>
 <span id="exemple-de-srccomponentsadresse.jsx"></span>
-=== Exemple de <code>/src/components/Adresse.jsx</code> ===
+===  <code>/src/components/Adresse.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
@@ Ligne 230 : / Ligne 230 : @@
        <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)} />}
+       {codePos && <Ville value={ville} onChange={(e) => setVille(e.target.value)} />}
        <Zone />
      </div>
@@ Ligne 237 : / Ligne 237 : @@
 export default Adresse;</syntaxhighlight>
+==== Explication ====
+* '''Condition <code>{codePos &amp;&amp; <Ville ... />}</code>''' : Cette ligne signifie que le composant <code>Ville</code> ne sera rendu que si <code>codePos</code> a une valeur non vide. Si <code>codePos</code> est une chaîne vide (<code>''</code>), alors le composant <code>Ville</code> ne sera pas affiché.
+* '''Gestion de l’État''' : Lorsque l’utilisateur saisit quelque chose dans le champ <code>CodePos</code>, l’état <code>codePos</code> est mis à jour, ce qui déclenche un re-rendu du composant <code>Adresse</code>. Si <code>codePos</code> a une valeur, le composant <code>Ville</code> 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.
 <span id="exemple-de-srccomponentszone.jsx"></span>
-=== Exemple de <code>/src/components/Zone.jsx</code> ===
+===  <code>/src/components/Zone.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 266 : / Ligne 275 : @@
 export default Zone;</syntaxhighlight>
 <span id="exemple-de-srccomponentsruetourep.jsx"></span>
-=== Exemple de <code>/src/components/RueToureP.jsx</code> ===
+===  <code>/src/components/RueToureP.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 277 : / Ligne 286 : @@
 export default RueToureP;</syntaxhighlight>
 <span id="exemple-de-srccomponentstou.jsx"></span>
-=== Exemple de <code>/src/components/Tou.jsx</code> ===
+===  <code>/src/components/Tou.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 288 : / Ligne 297 : @@
 export default Tou;</syntaxhighlight>
 <span id="exemple-de-srccomponentsrep.jsx"></span>
-=== Exemple de <code>/src/components/Rep.jsx</code> ===
+===  <code>/src/components/Rep.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 299 : / Ligne 308 : @@
 export default Rep;</syntaxhighlight>
 <span id="exemple-de-srccomponentsetablissement.jsx"></span>
-=== Exemple de <code>/src/components/Etablissement.jsx</code> ===
+===  <code>/src/components/Etablissement.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 310 : / Ligne 319 : @@
 export default Etablissement;</syntaxhighlight>
 <span id="exemple-de-srccomponentsformadresse.jsx"></span>
-=== Exemple de <code>/src/components/FormAdresse.jsx</code> ===
+===  <code>/src/components/FormAdresse.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 325 : / Ligne 334 : @@
 export default FormAdresse;</syntaxhighlight>
 <span id="exemple-de-srccomponentspage.jsx"></span>
-=== Exemple de <code>/src/components/Page.jsx</code> ===
+===  <code>/src/components/Page.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 347 : / Ligne 356 : @@
 export default Page;</syntaxhighlight>
 <span id="exemple-de-srccomponentsapplication.jsx"></span>
-=== Exemple de <code>/src/components/Application.jsx</code> ===
+===  <code>/src/components/Application.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 362 : / Ligne 371 : @@
 export default Application;</syntaxhighlight>
 <span id="exemple-de-srcapp.jsx"></span>
-=== Exemple de <code>/src/App.jsx</code> ===
+===  <code>/src/App.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 377 : / Ligne 386 : @@
 export default App;</syntaxhighlight>
 <span id="exemple-de-srcindex.jsx"></span>
-=== Exemple de <code>/src/index.jsx</code> ===
+===  <code>/src/index.jsx</code> ===
 <syntaxhighlight lang="jsx" line copy>import React from 'react';
@@ Ligne 390 : / Ligne 399 : @@
 );</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.
+== '''2.Exemple Ville from CodPos''' ==
+Pour créer un composant <code>Ville</code> qui affiche une liste de villes provenant d’une API fictive et qui se base sur le <code>codePos</code> pour sélectionner la bonne ville, nous allons suivre les étapes suivantes :
+# '''Simuler une API''' : Nous allons simuler une API qui renvoie une liste de villes en fonction du <code>codePos</code>.
+# '''Composant <code>Ville</code>''' : Ce composant va récupérer les villes en fonction du <code>codePos</code> et afficher une liste déroulante (<code>select</code>) des villes correspondantes.
+# '''Mécanisme de Sélection''' : Lorsque le <code>codePos</code> change, le composant <code>Ville</code> va mettre à jour la liste des villes.
+Voici comment vous pourriez structurer cela :
+<span id="simulation-de-lapi"></span>
+=== Simulation de l’API ===
+Nous allons créer une fonction qui simule un appel API pour récupérer les villes en fonction du <code>codePos</code>.
+<syntaxhighlight lang="jsx" line copy>// 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);
+  });
+};</syntaxhighlight>
+<span id="composant-ville"></span>
+=== Composant <code>Ville</code> ===
+Le composant <code>Ville</code> va utiliser le hook <code>useEffect</code> pour appeler la fonction <code>fetchVillesByCodePos</code> chaque fois que le <code>codePos</code> change.
+<syntaxhighlight lang="jsx" line copy>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;</syntaxhighlight>
+<span id="intégration-dans-le-composant-adresse"></span>
+=== Intégration dans le Composant <code>Adresse</code> ===
+Enfin, nous allons intégrer le composant <code>Ville</code> dans le composant <code>Adresse</code> et passer le <code>codePos</code> comme prop.
+<syntaxhighlight lang="jsx" 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('');
+  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;</syntaxhighlight>
+<span id="explication"></span>
+=== Explication ===
+* '''Appel API Simulé''' : La fonction <code>fetchVillesByCodePos</code> simule un appel API et renvoie une liste de villes en fonction du <code>codePos</code>.
+* '''Hook <code>useEffect</code>''' : Le composant <code>Ville</code> utilise <code>useEffect</code> pour appeler la fonction <code>fetchVillesByCodePos</code> chaque fois que le <code>codePos</code> change.
+* '''Liste Déroulante''' : Le composant <code>Ville</code> affiche une liste déroulante (<code>select</code>) des villes correspondantes au <code>codePos</code>. 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 ==
+[https://www.youtube.com/watch?v=1p6TsZW_HDk C'est quoi react (Youtube)]
+[[Category:React]]

« Max reacjsex » : différence entre les versions

« Max reacjsex » : différence entre les versions