⚛️ Aide-mémoire React

Telechargement de base vide

⚙️ Installation

npx create-react-app mon-app
cd mon-app
npm start

📦 Structure d’un composant

function Bonjour(props) {
  return <h1>Bonjour, {props.nom}!</h1>
}

export default Bonjour

🔁 useState

import { useState } from 'react'
const [compteur, setCompteur] = useState(0)
setCompteur(compteur + 1)

🎯 JSX

• Un seul élément parent
• className au lieu de class
• Utiliser { } pour insérer du JS
• Les événements : onClick, onChange

🧠 Props

function Salut({ nom }) {
  return <p>Salut {nom}!</p>
}

🔄 useEffect

import { useEffect } from 'react'
useEffect(() => {
  console.log("Composant monté")
  return () => console.log("Composant démonté")
}, [])

🧩 Composants imbriqués

function App() {
  return <Bienvenue nom="Jean" />
}

🧲 useMemo & useCallback

const valeurMemo = useMemo(() => calculLourd(x), [x])
const memoCallback = useCallback(() => faireAction(), [])

📋 Formulaires

const [texte, setTexte] = useState("")
<input value={texte} onChange={e => setTexte(e.target.value)} />

🧰 Outils utiles

• React Developer Tools : debug
• Vite, CRA : scaffolding
• React Router : navigation SPA
• Redux / Zustand : gestion d’état

🛠️ Fonctions React