web:javascript:react:toc
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
web:javascript:react:toc [2019/07/08 22:48] – sgariepy | web:javascript:react:toc [2023/10/03 21:20] (Version actuelle) – [React avec TypeScript] sgariepy | ||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
React est une librairie JavaScript pour créer des interfaces Web. [[https:// | React est une librairie JavaScript pour créer des interfaces Web. [[https:// | ||
+ | |||
+ | ===== Librairies ===== | ||
+ | |||
+ | * [[web: | ||
+ | |||
====== Avantages ====== | ====== Avantages ====== | ||
Ligne 186: | Ligne 191: | ||
Les composants construits en classe doivent toujours appeler le constructeur de base avec les '' | Les composants construits en classe doivent toujours appeler le constructeur de base avec les '' | ||
- | ====== Higher Order Component ====== | + | ===== Higher Order Component ===== |
+ | |||
+ | |||
+ | ===== Méthodes du cycle de vie d'un composant ===== | ||
+ | |||
+ | |||
+ | ====== Fetch data ====== | ||
+ | |||
+ | <code javascript> | ||
+ | const result = await fetch(`/ | ||
+ | method: ' | ||
+ | body: JSON.stringify({ username, text: commentText }), | ||
+ | headers: { | ||
+ | ' | ||
+ | }, | ||
+ | }); | ||
+ | |||
+ | const body = await result.json(); | ||
+ | setArticleInfo(body); | ||
+ | </ | ||
Ligne 193: | Ligne 218: | ||
* [[https:// | * [[https:// | ||
+ | |||
+ | |||
+ | ====== Hooks ====== | ||
+ | |||
+ | Les hooks permet de ne pas avoir besoin de créer des composants de classes, ces derniers ayant pour désavantage de complexifier le code. | ||
+ | |||
+ | ===== useState ===== | ||
+ | |||
+ | Utilisation de base: | ||
+ | |||
+ | <code javascript> | ||
+ | const [state, setState] = useState(initialState); | ||
+ | setState(newState); | ||
+ | </ | ||
+ | ===== useEffect ===== | ||
+ | |||
+ | -> [[https:// | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | useEffect(() => { | ||
+ | // Équivalent à componentDidMount | ||
+ | window.addEventListener(' | ||
+ | return () => { | ||
+ | // Équivalent à componentWillUnmount | ||
+ | window.removeEventListener(' | ||
+ | } | ||
+ | }, []) | ||
+ | </ | ||
+ | ===== useRef ===== | ||
+ | |||
+ | <code javascript> | ||
+ | import React, { useRef } from ' | ||
+ | |||
+ | const ImageToggle = ({ primaryImg, secondaryImg }) => { | ||
+ | const imageRef = useRef(null); | ||
+ | |||
+ | return ( | ||
+ | <img | ||
+ | onMouseOver={() => imageRef.current.src = secondaryImg} | ||
+ | onMouseOut={() => imageRef.current.src = primaryImg} | ||
+ | src={primaryImg} | ||
+ | alt="" | ||
+ | /> | ||
+ | ); | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====== Références et sources ====== | ||
+ | |||
+ | * [[https:// | ||
web/javascript/react/toc.txt · Dernière modification : 2023/10/03 21:20 de sgariepy