Incorporer des données avec les hooks

Incorporer des données avec les hooks | Med Learning

Leçon 1

Les Hooks et useState

Les Hooks ont été ajoutés à React dans la version 16.8. Ils permettent aux composants fonction d'accéder à l'état et aux autres fonctionnalités de React. Pour cette raison, les composants classe ne sont généralement plus nécessaires. Les classes ne seront cependant pas supprimées de React.

On reprend l'exemple Message du chapitre 6, cette fois avec un composant fonction AutreMessage : après le clic, « Bien venu visiteur » devient « votre inscription est effectuée » et le bouton « inscription » devient « merci ».

src/components/AutreMessage.js

jsx

import React, { useState } from "react";
export default function AutreMessage() {
  const [message, setMessage] = useState("Bien venu visiteur");
  const [btnMessage, setBtnMessage] = useState("inscription");
  function inscription() {
    setMessage("votre inscription est effectuée");
    setBtnMessage("merci");
  }
  return (
    <div>
      <h2>{message}</h2>
      <button onClick={() => inscription()}>{btnMessage}</button>
    </div>
  );
}

src/App.js

jsx

import React from 'react'
import AutreMessage from './components/AutreMessage';
export default function App() {
  return (
    <div>
      <AutreMessage/>
    </div>
  );
}

src/index.js

jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root=ReactDOM.createRoot(document.getElementById("root"))
root.render(<App/>);

Cette fois, le composant App est dans son propre fichier src/App.js.

L'explication du code

On importe le hook : import React, { useState } from "react";
const [message, setMessage] = useState("Bien venu visiteur");

Classe (chapitre 6)	Fonction avec useState
`this.state = { message: "Bien venu visiteur" }`	`const [message, setMessage] = useState("Bien venu visiteur")`
`this.state.message`	`message`
`this.setState({ message: "…" })`	`setMessage("…")`

Pour le bouton, on peut utiliser une fonction fléchée onClick={() => inscription()} ou une fonction callback onClick={inscription}.

Vidéo · À regarder

Apprendre React en 1 heure - Cours complet débutant

Comment Coder · YouTube

Regarde de 35:58 à 53:5317 min 55 s

Ouvrir sur YouTube à 35:58

Vidéo · À regarder

Apprendre React.js en 1 heure

Melvynx · YouTube

Regarde de 47:00 à 51:004 min

Ouvrir sur YouTube à 47:00

Leçon 2

useEffect

Deuxième argument	L'effet s'exécute…	Équivalent classe
rien	après chaque rendu	`componentDidMount` + `componentDidUpdate`
`[]`	une seule fois, après le premier rendu	`componentDidMount`
`[prop1, prop2]`	après le premier rendu, puis quand `prop1` ou `prop2` change

Leçon 3

Charger les données d'une API avec useEffect

Leçon 4

Construire ses propres Hooks

Vidéo · À regarder

Apprendre React : Créer un hook personnalisé

Grafikart · YouTube

Regarde de 0:00 à la fin

Ouvrir sur YouTube à 0:00

Leçon 5

Les TP hooks

Travaux pratiques

TP 4 · Le jeu de Dé en fonction

Exercices

Exercice 11.1

Quiz useEffect (support officiel)

1Question 1 : useEffect(() => console.log('TEST!'), []) dans App. Combien de logs, et quand ?
2Question 2 : même effet avec [], et l'utilisateur clique trois fois sur le bouton qui change count. Combien de logs ?
3Question 3 : l'effet a maintenant [count], trois clics. Combien de logs ?
4useState(0) renvoie…
5Le nom d'un hook personnalisé commence par…
6On peut appeler un hook dans un if.

0/6 répondues

Exercice 11.2

Le minuteur

Exercice 11.3

Le hook useFetch

L'essentiel du chapitre

À retenir

Hooks (React 16.8) : état et fonctionnalités de React dans les fonctions ; les classes ne sont plus nécessaires mais restent.
const [valeur, setValeur] = useState(initiale) : setValeur change la valeur et réaffiche ; ne jamais modifier la variable directement ; onClick={f} et non onClick={f()}.
useEffect(fonction, deps) : après le rendu. Rien = après chaque rendu ; [] = une fois ; [a, b] = quand a ou b change ; la fonction renvoyée = nettoyage au démontage.
API : fetch/axios dans useEffect(…, []), résultat dans un état.
Hook personnalisé : fonction useXxx dans src/hooks, qui utilise des hooks et renvoie des valeurs ; chaque composant a son propre état.
Règles : hooks au premier niveau, seulement dans des fonctions composants ou d'autres hooks.

Écriture	Résultat après la saisie
`useEffect(function(){document.title=nom+" "+prenom;},[nom,prenom])`	le titre change quand le nom ou le prénom change
`useEffect(function(){document.title=nom+" "+prenom;},[nom])`	le titre change seulement quand le nom change (modifier le prénom ne le met pas à jour)
`useEffect(function(){document.title=nom+" "+prenom;},[])`	le titre est calculé une seule fois, au premier rendu (« --- --- »)
`useEffect(function(){document.title=nom+" "+prenom+" "+age;})`	le titre change à chaque mise à jour de `nom`, `prenom` ou `age`

Compteur.js (départ)

jsx

import React, { useState } from "react";
export default function Compteur(){
  const [valeur,setValeur]=useState(0)
  return(
    <div>
      <h1>compteur: {valeur}</h1>
      <input type="button" value="incrementer"/>
      <input type="button" value="decrementer"/>
    </div>
  )
}

Avec des fonctions déclarées

jsx

export default function Compteur(){
  const [valeur,setValeur]=useState(0)
  function incrementer(){
    setValeur(valeur+1)
  }
  function decrementer(){
    setValeur(valeur-1)
  }
  return(
    <div>
      <h1>compteur: {valeur}</h1>
      <input type="button" value="incrementer" onClick={incrementer}/>
      <input type="button" value="decrementer" onClick={decrementer}/>
    </div>
  )
}

Compteur.js

jsx

import React, { useEffect, useState } from "react";
export default function Compteur(){
  const [valeur,setValeur]=useState(0)
  function incrementer(){setValeur(valeur+1)}
  function decrementer(){setValeur(valeur-1)}
  useEffect(()=>{console.log(valeur)})
  return(
    <div>
      <h1>compteur: {valeur}</h1>
      <input type="button" value="incrementer" onClick={incrementer}/>
      <input type="button" value="decrementer" onClick={decrementer}/>
    </div>)
}

src/components/Salutation.js

jsx

import React ,{useEffect, useState} from "react";
export default function Salutation(props){
  const [nom,setNom]=useState("Rami")
  function changeNom(e){
    setNom(e.target.value)
  }
  useEffect(()=>{document.title=nom;},[nom])
  return(
    <div>
      <input type="text" value={nom} onChange={changeNom}></input>
      <h2>Salutation</h2>
      <p>salut {nom} </p>
    </div>
  )
}

App.js

jsx

import React, { useEffect, useState } from "react";
//import usePosts from './hooks/usePosts'
export default function App(){
  const [posts,setPosts]=useState([])
  useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res=>res.json())
      .then(response=>setPosts(response))
  },[])
  return (<div>
    <h1>liste des posts à partir d'un API</h1>
    <ul>
      {posts.map(post=>{
        return (<li key={post.id}>{post.title}</li>)
      })}
    </ul>
  </div>)
}

src/hooks/usePosts.js

jsx

import React,{useState,useEffect} from "react";
function usePosts(){
  const [posts,setPosts]=useState([])
  useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res=>res.json())
      .then(response=>setPosts(response))
  },[])
  return posts
}
export default usePosts

src/App.js

jsx

import React from "react";
import usePosts from "./hooks/usePosts";
export default function App(){
  const posts=usePosts()
  return (<div>
    <h1>liste des posts à partir d'un API</h1>
    <ul>
      {posts.map(post=>{
        return (<li key={post.id}>{post.title}</li>)
      })}
    </ul>
  </div>)
}

src/index.css

css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.App { background-color: #f1daefa6; color: #333; min-height: 100vh; }
.title { color:#333; font-size: 42px; font-weight: 300; margin: 0; padding: 32px; text-align: center; }
.container {
  background-color: rgb(250, 238, 238);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  margin: 10px auto 16px;
  max-width: 500px;
}
.container .title { font-weight: 300; }
.container .list { padding: 16px; text-align: center; }

src/components/Form.js (à compléter)

jsx

import React, { useState } from "react";
export default function Form(){
  const [nom,setNom]=useState('')
  const [prenom,setPrenom]=useState('')
  function handlerOnChangeNom(event){
  }
  function handlerOnChangePrenom(event){
  }
  function handlerSubmit(event){
  }
  return(
    <div className="container">
      <form onSubmit={handlerSubmit}>
        <div className="list">
          <h2 className="title">Formulaire Inscription</h2>
          <div>
            <label>Nom:</label><input type="text" onChange={handlerOnChangeNom} value={nom}/>
          </div>
          <div>
            <label>Prenom:</label><input type="text" onChange={handlerOnChangePrenom} value={prenom}/>
          </div>
          <div>
            <input type="submit" value="submit"/>
          </div>
        </div>
      </form>
    </div>
  )
}

src/App.js

jsx

import React from "react";
import Form from "./components/Form";
import '../src/index.css'
export default function App(){
  return (
    <div className="App">
      <Form/>
    </div>
  )
}

src/components/ListArticle.js (à compléter)

jsx

import React, { useState } from "react";
export default function ListArticle(){
  const [id,setId]=useState(0)
  const [designation,setDesignation]=useState('')
  const [prix,setPrix]=useState(0)
  const [articles,setArticles]=useState([])
  function handlerAddArticle(){
  }
  function handlerOnChangeId(event){
  }
  function handlerOnChangeDesignation(event){
  }
  function handlerOnChangePrix(event){
  }
  return(
    <div className="container">
      <div className="list">
        <h2 className="title">Ajout d'un Article</h2>
        <div>
          <label>Id:</label><input type="text" onChange={handlerOnChangeId} value={id}/>
        </div>
        <div>
          <label>designation:</label><input type="text" onChange={handlerOnChangeDesignation} value={designation}/>
        </div>
        <div>
          <label>prix:</label><input type="text" onChange={handlerOnChangePrix} value={prix}/>
        </div>
        <div>
          <input type="button" value="Ajouter" onClick={handlerAddArticle}/>
        </div>
        <div>
          <h3>liste Articles</h3>
          <ul>
          </ul>
        </div>
      </div>
    </div>
  )
}

src/components/Coordonnee.js (à compléter)

jsx

import React, { useEffect, useState } from "react";
export default function Coordonnee(){
  const [x,setX]=useState(0)
  const [y,setY]=useState(0)
  useEffect(()=>{
    window.addEventListener("mousemove",handleMouseMove)
    return(()=>{window.removeEventListener("mousemove",handleMouseMove)})
  },[])
  function handleMouseMove(event){
    // --------
  }
  return(
    <div className="container">
      <h4 className="title">recuperation des coordonnes de la souris</h4>
      <h5> coordonnes x:--- y: ----</h5>
    </div>
  )
}

Salutation.js

jsx

import React ,{useEffect, useState} from "react";
export default function Salutation(props){
  const [nom,setNom]=useState("---")
  const [prenom,setPrenom]=useState("---")
  const [age,setAge]=useState(0)
  function changeNom(e){
    setNom(e.target.value)
  }
  function changePrenom(e){
    setPrenom(e.target.value)
  }
  function changeAge(e){
    setAge(e.target.value)
  }
  useEffect(function(){document.title=nom+" "+prenom;},[nom,prenom])
  return(
    <div>
      <label>nom:</label>
      <input type="text" value={nom} onChange={changeNom}></input>
      <label>prénom:</label>
      <input type="text" value={prenom} onChange={changePrenom}></input>
      <label>age:</label>
      <input type="text" value={age} onChange={changeAge}></input>
      <h2>Salutation</h2>
      <p>salut {nom} {prenom} vote age est:{age}</p>
    </div>
  )
}