React

NodeJS requis

Création du projet :

npx create-react-app my-app

Eventuellement avec le support typeScript :

npx create-react-app my-app --template typescript

Démarrage du serveur

cd my-app
npx start

Un composant peut être créé à partir d'une fonction :

function Hello() {
  return (
    <div>
      <h1>props.message</h1>
    </div>
  );
}

export default Hello;

Un composant peut être créé à partir d'une classe ES6 :

import React from "react";

class Hello extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}
export default Hello;

Un composant peut être créé à partir d'une classe TypeScript:

import React from "react";

export default class Hello extends React.Component<{message: string}> {
  render() {
    return (
      <h1>{this.props.message}</h1>
    );
  }
}

La classe Hello déclare explicitement une propriété de nom message de type string.

Utilisation de Hello dans l'App, et initialisation en JSX de la prop message avec l'attribut message :

import Hello from './hello';

function App() {
  return (
    <div className="App">
      <Hello message="Hello World!"/>
    </div>
  );
}

export default App;

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.

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}/>
        < />
    );
  }
}

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}/>
      < />
    );
}

// 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();
    }
}

'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;
};

• React-hook-form
• React-query