React

Install party 🎉

yarn create vite

Anatomie + Clean up

Composant 🧩

Comment ça marche ? 🤔

React + JSX

HTML + JS

Class components ? 🥴

map

Boucle sur chaque fruit

Les events

Les props

  • JSX attributes -> props object

  • Destructuration

  • className

  • children

  • onSomething

Les hooks 🪝

useMachin()

👇

Immutaquoi ? 😵‍💫

#declaratif #pure-functions #fauxtionnel

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 🤫

Conditions

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

🧑‍💻 Toggle button

useEffect

https://dummyjson.com/products

useMyHook ?!

const {loading, products} = useProducts();

useContext

createContext, Provider, useContext

Correction 👀

NPM 😱

React router

  • ⚠️ breaking changes
  • createBrowserRouter
  • lazy loading
  • useParam()
  • <Link to="" />

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

Le style en toute objectivité

Raw CSS

Tailwind

Emotion

(ou pas)

🤩 simple

🤩 lisible

💩 pas générique

💩 long à écrire

🤩 simple

💩 illisible

💩 chiant à maintenir

🤩 générique

🤩 puissant

💩 difficile

🤷 minimal

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 👇

Correction 👀

useRef

useReducer

TODO list ☑️

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

⚠️ Exercice difficile

Correction 👀

react-use 👍

There is a hook for that

- Gandhi

Cas pratique ✍️

source

correction

👉

💩

😎

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"

Next.js

👉 Let's go 👈

Voir toutes les slides