« Max reacjsex » : différence entre les versions

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

<span id="exemple-de-srccomponentszonetexte.jsx"></span>

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

export default ZoneTexte;</syntaxhighlight>

<span id="exemple-de-srccomponentszonenumerique.jsx"></span>

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

export default ZoneNumerique;</syntaxhighlight>

<span id="exemple-de-srccomponentsbouton.jsx"></span>

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

export default Bouton;</syntaxhighlight>

<span id="exemple-de-srccomponentscoordxy.jsx"></span>

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

export default CoordXY;</syntaxhighlight>

<span id="exemple-de-srccomponentsgeoloc.jsx"></span>

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

export default Geoloc;</syntaxhighlight>

<span id="exemple-de-srccomponentsetage.jsx"></span>

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

export default Etage;</syntaxhighlight>

<span id="exemple-de-srccomponentscodeacces.jsx"></span>

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

export default CodeAcces;</syntaxhighlight>

<span id="exemple-de-srccomponentscodepos.jsx"></span>

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

export default CodePos;</syntaxhighlight>

<span id="exemple-de-srccomponentsville.jsx"></span>

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

export default Ville;</syntaxhighlight>

<span id="exemple-de-srccomponentsadresse.jsx"></span>

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

<span id="exemple-de-srccomponentszone.jsx"></span>

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

export default Zone;</syntaxhighlight>

<span id="exemple-de-srccomponentsruetourep.jsx"></span>

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

export default RueToureP;</syntaxhighlight>

<span id="exemple-de-srccomponentstou.jsx"></span>

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

export default Tou;</syntaxhighlight>

<span id="exemple-de-srccomponentsrep.jsx"></span>

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

export default Rep;</syntaxhighlight>

<span id="exemple-de-srccomponentsetablissement.jsx"></span>

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

export default Etablissement;</syntaxhighlight>

<span id="exemple-de-srccomponentsformadresse.jsx"></span>

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

export default FormAdresse;</syntaxhighlight>

<span id="exemple-de-srccomponentspage.jsx"></span>

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

export default Page;</syntaxhighlight>

<span id="exemple-de-srccomponentsapplication.jsx"></span>

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

export default Application;</syntaxhighlight>

<span id="exemple-de-srcapp.jsx"></span>

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

export default App;</syntaxhighlight>

<span id="exemple-de-srcindex.jsx"></span>

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

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.

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 :

<span id="simulation-de-lapi"></span>

=== Simulation de l’API ===