React¶

Générer un projet en React¶

Il y a plusieurs Générateur d’applications React qui permettent de générer la structure de base recommandée en JavaScript ou TypeScript.

Voici comment générer l’application :

1. Situez vous dans le dossier où vous désirez créer l’application (le dossier de l’application sera automatiquement créé à la prochaine étape)
2. Exécutez la commande de création d’application :
   
   console

   npm create vite@latest 
   

3. Entrez le nom de votre projet :
   
   console

   > npx
   > "create-vite"
   │
   ◆  Project name:
   │  votre-nom-de-projet
   

4. Choisir React :
   
   console

   ◆  Select a framework:
   │  ○ Vanilla
   │  ○ Vue
   │  ● React
   │  ○ Preact
   │  ○ Lit
   │  ○ Svelte
   │  ○ Solid
   │  ○ Qwik
   │  ○ Angular
   │  ○ Marko
   │  ○ Others
   └
   

5. Choisir Typescript :
   
   console

   ◆  Select a variant:
   │  ● TypeScript
   │  ○ TypeScript + React Compiler
   │  ○ TypeScript + SWC
   │  ○ JavaScript
   │  ○ JavaScript + React Compiler
   │  ○ JavaScript + SWC
   │  ○ React Router v7 ↗
   │  ○ TanStack Router ↗
   │  ○ RedwoodSDK ↗
   │  ○ RSC ↗
   └
   

6. Choisir No :
   
   console

   ◆  Use rolldown-vite (Experimental)?:
   │  ○ Yes
   │  ● No
   └
   

7. Choisir Yes :
   
   console

   ◆  Install with npm and start now?
   │  ● Yes / ○ No
   └
   

Si vous avez des erreurs de modules dépréciés, vous pouvez les corriger en suivant les instructions de la section Module déprécié.

React Developer Tools¶

React Developer Tools est un plugiciel dans Chrome pour aider au débogage de vos applications React.

Pour l'installer : React Developer Tools pour Chrome

Programmer React avec des fonctions¶

Utiliser des fonctions au lieu des classes en React est la manière officielle de programmer dans cet environnement.

{!personnage_base/src/components/Personnage/Personnage.tsx!}

{!personnage_base/src/components/Personnage/Personnage.css!}

{!personnage_base/src/components/App/App.tsx!}

Passage de paramètres avec les props¶

1. Définir la liste des paramètres dans une interface
2. L’ajouter comme props à la fonction de la composante
3. Utiliser les paramètres lors de l’instanciation de la composante

{!personnage_base_props/src/components/Personnage/Personnage.tsx!}

{!personnage_base_props/src/components/App/App.tsx!}

Les hooks - useState¶

• Conserve l’état d’une variable
• Réagit lorsque la valeur change

{!personnage_base_useState/src/components/App/App.tsx!}

Hooks : useEffect¶

Faire des traitements de données seulement lors d’événements précis, comme le premier render ou lors de changement d’une autre variable.

{!personnage_base_useEffect/src/components/App/App.tsx!}