Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:framework:react [2023/03/16 02:40] – jcheron
+++ web:framework:react [2024/04/10 09:40] (Version actuelle) – jcheron
@@ Ligne 22: / Ligne 22: @@
 ===== Composants =====
 <WRAP info>
-En React, tout est composant, et les composants peuvent être créés à partir de fonctions, ou de classes.
+En React, tout est composant, et les composants peuvent être créés à partir de fonctions (JS), ou de classes (ES6 ou TypeScript).
 </WRAP>
 ==== Fonctions ====
@@ Ligne 69: / Ligne 69: @@
 La classe Hello déclare explicitement une propriété de nom **message** de type **string**.
-=== Utilisation ===
+==== Utilisation ====
 Utilisation de **Hello** dans l'**App**, et initialisation en JSX de la prop **message** avec l'attribut **message** :
@@ Ligne 87: / Ligne 87: @@
 </sxh>
+===== Props et state =====
+Sur un composant React :
+  * Les propriétés sont accessibles avec l'objet **props** passé en paramètre (du constructeur ou de la fonction)
+  * Ces propriétés sont initialisées en JSX/HTML via les attributs de l'élément.
+  * Elles sont immutables (en lecture seule).
+  * Il est nécessaire d'utiliser l'objet **state** pour modifier l'état d'un composant.
+==== Exemple classe TypeScript ====
+<sxh javascript;title:components/hello.tsx>
+import React from "react";
+export default class Hello extends React.Component<{message:string},{msg: string}> {
+    constructor(props: {message:string}) {
+        super(props);
+        this.state = {msg: props.message};
+    }
+    handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({msg: event.target.value})
+    }
+  render() {
+    return (
+        <>
+          <h1>{this.state.msg}</h1>
+          <input value={this.state.msg} onChange={this.handleChange}/>
+        < />
+    );
+  }
+}
+</sxh>
+==== Exemple fonction JavaScript ====
+<sxh javascript;title:components/hola.js>
+import {useState} from "react";
+export default function Hola(props){
+    const [message, setMessage] = useState(props.message);
+    const handleChange = (e) => {
+        setMessage(e.target.value);
+    }
+    return (
+      <>
+        <h1>{message}</h1>
+        <input type="text" value={message} onChange={handleChange}/>
+      < />
+    );
+}
+</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>
+===== Composants =====
+  * [[https://react-hook-form.com/|React-hook-form]]
+  * [[https://tanstack.com/query/v3/|React-query]]