Code Passport Back

React

Introduction

L'installation 😭

npm create vite@latest

Anatomie + Clean up

Composant 🧩

Correction 👀

1. Déclaration

2. Appel

👈 fragment

Class components ? 🥴

HTML 👉 JSX

👈

map

Boucle sur chaque fruit

Les events

Les props

2. Appel

1. Déclaration

💡 "react/prop-types": "off"

Children

1. Déclaration

2. Appel

Les hooks 🪝

useMachin()

👇

Les états 🧮

useState

1️⃣ déclaration

2️⃣ assignation

3️⃣ utilisation

Cas pratique ✍️

🧑‍💻 Créé un input qui permet de filtrer une liste d'éléments, générés à partir d'un tableau.

Correction 🤫

Bonus ✨

🧑‍💻 Gérer le cas d'un tableau vide

🧑‍💻 Toggle button

Les effets de bord 🔫

useEffect

useMyHook 😎

const {loading, products} = useProducts();

Child 👉 Parent

Parent

Child

useContext 😏

createContext, Provider, useContext

Correction 👀

Marcher sur l'eau et développer un logiciel à partir d'une spécification sont faciles si les deux sont gelés

- Edward V. Berard

NPM 😱

Le style en toute objectivité

(ou pas)

...au final, c'est juste du CSS 🤷

useCallback & useMemo

⚡️ meilleures perfs

🦟 moins de bugs

const data = useMemo(fn, deps);
const callback = useCallback(fn, deps);

Les onglets 🗂

Essaye d'obtenir ce résutat en utilisant correctement useCallback 👇

useRef

useReducer

TODO list ☑️

Écris le state de la TODO liste en utilisant le "Redux pattern".

⚠️ Exercice difficile

react-use 👍

There is a hook for that

- Gandhi

Cas pratique ✍️

👉

💩

😎

Clean code 🧼

1️⃣ Sépare ton code petits composants réutilisables

2️⃣ Simplifie la logique avec des hooks custom

3️⃣ Évite de passer trop de props (useContext)

4️⃣ Utilise useMemo et useCallback pour éviter les "re-render"