Différences

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

--- web:javascript:react:toc [2019/06/27 20:36] – [Démarrer] sgariepy
+++ web:javascript:react:toc [2023/10/03 21:20] (Version actuelle) – [React avec TypeScript] sgariepy
@@ Ligne 1: / Ligne 1: @@
 ====== React avec TypeScript ======
-React est une librairie JavaScript pour créer des interfaces Web.
+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 167: / Ligne 172: @@
-====== Stateful Function Components ======
+====== Élements ======
+====== Components ======
+===== Function Components =====
+===== Stateful Function Components =====
+===== Class Components =====
+Les composants construits en classe doivent toujours appeler le constructeur de base avec les ''props'' (eg. ''super(props);'').
+===== Higher Order Component =====
+===== Méthodes du cycle de vie d'un composant =====
+====== Fetch data ======
+<code javascript>
+const result = await fetch(`/api/articles/${articleName}/add-comment`, {
+  method: 'post',
+  body: JSON.stringify({ username, text: commentText }),
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+const body = await result.json();
+setArticleInfo(body);
+</code>
+====== Gestion des erreurs ======
+  * [[https://reactjs.org/docs/error-boundaries.html|Error Boundaries]]
+====== 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);
+</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>
-====== Higher Order Component ======
+====== Références et sources ======
+  * [[https://github.com/sudheerj/reactjs-interview-questions#what-is-shallow-renderer-in-react-testing|React Interview Questions & Answers]]