web:framework:react [SlamWiki 2.1]

Lien vers cette vue comparative

--- web:framework:react [2023/03/17 00:42] – [Exemple classe TypeScript] jcheron
+++ web:framework:react [2025/08/12 02:35] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 137: / Ligne 137: @@
 </sxh>
+==== Http Wrapper ====
+<sxh javascript>
+// This is a wrapper for the fetch API
+export default class AppHttp {
+    static async get(url, options) {
+        const response = await fetch(url, options);
+        return await response.json();
+    }
+    static async post(url, body, options) {
+        const response = await fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(body),
+            ...options
+        });
+        return await response.json();
+    }
+    static async put(url, body, options) {
+        const response = await fetch(url, {
+            method: 'PUT',
+            body: JSON.stringify(body),
+            ...options
+        });
+        return await response.json();
+    }
+    static async delete(url, options) {
+        const response = await fetch(url, {
+            method: 'DELETE',
+            ...options
+        });
+        return await response.json();
+    }
+}
+</sxh>
+==== Contexte ====
+<sxh ts>
+'use client';
+import React, {createContext, ReactNode, useContext, useState} from 'react';
+interface DemoContextType {
+    data: number;
+    setData: (d:number)=>void;
+}
+const DemoContext = createContext<DemoContextType | undefined>(undefined);
+export const demoProvider: React.FC<{ children: ReactNode }> = ({children}) => {
+    const [data, setData] = useState<number>(0);
+    return (
+        <DemoContext.Provider value={{data, setData}}>
+            {children}
+        </DemoContext.Provider>
+    );
+};
+export const useDemo = (): DemoContextType => {
+    const context = useContext(demoContext);
+    if (!context) {
+        throw new Error('usedemo must be used within a DemoProvider');
+    }
+    return context;
+};
+</sxh>
+===== Hooks React =====
+Les hooks React sont des fonctions introduites à partir de React 16.8 permettant d'utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels (basés sur une fonction et non une classe).
+==== Hooks de base ====
+===== useState =====
+Permet de gérer un état local dans un composant fonctionnel.
+<sxh js>
+import { useState } from "react";
+function Counter() {
+  const [count, setCount] = useState(0); // Déclare un état `count`
+  return (
+    <button onClick={() => setCount(count + 1)}>Compteur : {count}</button>
+  );
+}
+</sxh>
+===== useEffect =====
+Permet d'exécuter des effets secondaires dans un composant.
+Exemples :
+  *  appels API,
+  * écouteurs d’événements,
+  * manipulation du DOM...
+<sxh js>
+import { useState, useEffect } from "react";
+function Timer() {
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval); // Nettoyage de l'effet
+  }, []); // Dépendances vides = effet exécuté une seule fois au montage
+  return <p>Temps écoulé : {seconds} sec</p>;
+}
+</sxh>
+===== useContext =====
+Permet d'utiliser un contexte global sans avoir à passer des props manuellement à chaque niveau.
+<sxh js>
+import { useContext, createContext } from "react";
+const ThemeContext = createContext("light");
+function ThemedButton() {
+  const theme = useContext(ThemeContext); // Récupère la valeur du contexte
+  return <button style={{ background: theme === "dark" ? "#333" : "#ddd" }}>
+    Thème : {theme}
+  </button>;
+}
+</sxh>
+===== Composants =====
+  * [[https://react-hook-form.com/|React-hook-form]]
+  * [[https://tanstack.com/query/v3/|React-query]]