Différences

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

--- web:javascript:react:toc [2019/07/11 01:31] – [Hooks] 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://reactjs.org/docs/getting-started.html|Documentation officielle]]
+===== Librairies =====
+  * [[web:javascript:react:yup|yup]]
 ====== Avantages ======
@@ Ligne 218: / Ligne 223: @@
 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);
+</code>
+===== useEffect =====
+-> [[https://reactjs.org/docs/hooks-reference.html#useeffect|Documentation officielle]]
+<code javascript>
+useEffect(() => {
+  // Équivalent à componentDidMount
+  window.addEventListener('unhandledRejection', handler);
+  return () => {
+    // Équivalent à componentWillUnmount
+    window.removeEventListener('unhandledRejection', handler);
+  }
+}, [])
+</code>
+===== useRef =====
+<code javascript>
+import React, { useRef } from 'react';
+const ImageToggle = ({ primaryImg, secondaryImg }) => {
+  const imageRef = useRef(null);
+  return (
+    <img
+      onMouseOver={() => imageRef.current.src = secondaryImg}
+      onMouseOut={() => imageRef.current.src = primaryImg}
+      src={primaryImg}
+      alt="" ref={imageRef}
+    />
+  );
+};
+</code>
+====== Références et sources ======
+  * [[https://github.com/sudheerj/reactjs-interview-questions#what-is-shallow-renderer-in-react-testing|React Interview Questions & Answers]]