Marmits Wiki

« Max reacjsex » : différence entre les versions

← Modification précédente
 
(10 versions intermédiaires par le même utilisateur non affichées)
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.
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>
<span id="arborescence-des-fichiers-jsx"></span>
=== Arborescence des fichiers JSX ===
=== Arborescence des fichiers JSX ===
Ligne 90 : Ligne 90 :


<span id="exemple-de-srccomponentszonetexte.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 100 : Ligne 100 :
export default ZoneTexte;</syntaxhighlight>
export default ZoneTexte;</syntaxhighlight>
<span id="exemple-de-srccomponentszonenumerique.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 110 : Ligne 110 :
export default ZoneNumerique;</syntaxhighlight>
export default ZoneNumerique;</syntaxhighlight>
<span id="exemple-de-srccomponentsbouton.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 124 : 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> ===
=== <code>/src/components/CoordXY.jsx</code> ===


<syntaxhighlight lang="jsx" line copy>import React from 'react';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 140 : 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> ===
=== <code>/src/components/Geoloc.jsx</code> ===


<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
Ligne 166 : Ligne 166 :
export default Geoloc;</syntaxhighlight>
export default Geoloc;</syntaxhighlight>
<span id="exemple-de-srccomponentsetage.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 177 : Ligne 177 :
export default Etage;</syntaxhighlight>
export default Etage;</syntaxhighlight>
<span id="exemple-de-srccomponentscodeacces.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 188 : Ligne 188 :
export default CodeAcces;</syntaxhighlight>
export default CodeAcces;</syntaxhighlight>
<span id="exemple-de-srccomponentscodepos.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 199 : Ligne 199 :
export default CodePos;</syntaxhighlight>
export default CodePos;</syntaxhighlight>
<span id="exemple-de-srccomponentsville.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 210 : Ligne 210 :
export default Ville;</syntaxhighlight>
export default Ville;</syntaxhighlight>
<span id="exemple-de-srccomponentsadresse.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react';
Ligne 247 : Ligne 247 :
<span id="exemple-de-srccomponentszone.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 275 : Ligne 275 :
export default Zone;</syntaxhighlight>
export default Zone;</syntaxhighlight>
<span id="exemple-de-srccomponentsruetourep.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 286 : Ligne 286 :
export default RueToureP;</syntaxhighlight>
export default RueToureP;</syntaxhighlight>
<span id="exemple-de-srccomponentstou.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 297 : Ligne 297 :
export default Tou;</syntaxhighlight>
export default Tou;</syntaxhighlight>
<span id="exemple-de-srccomponentsrep.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 308 : Ligne 308 :
export default Rep;</syntaxhighlight>
export default Rep;</syntaxhighlight>
<span id="exemple-de-srccomponentsetablissement.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 319 : Ligne 319 :
export default Etablissement;</syntaxhighlight>
export default Etablissement;</syntaxhighlight>
<span id="exemple-de-srccomponentsformadresse.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 334 : Ligne 334 :
export default FormAdresse;</syntaxhighlight>
export default FormAdresse;</syntaxhighlight>
<span id="exemple-de-srccomponentspage.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 356 : Ligne 356 :
export default Page;</syntaxhighlight>
export default Page;</syntaxhighlight>
<span id="exemple-de-srccomponentsapplication.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 371 : Ligne 371 :
export default Application;</syntaxhighlight>
export default Application;</syntaxhighlight>
<span id="exemple-de-srcapp.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 386 : Ligne 386 :
export default App;</syntaxhighlight>
export default App;</syntaxhighlight>
<span id="exemple-de-srcindex.jsx"></span>
<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';
<syntaxhighlight lang="jsx" line copy>import React from 'react';
Ligne 400 : Ligne 400 :
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.


[[Category:Private]]
== '''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]]
Récupérée de "https://marmits.com/wiki/Max_reacjsex"