Front-end · 6 mondes · 18 étapes

React

Composants, état, effets : des interfaces web qui réagissent, rendues pour de vrai.

Progression

0 %

0/18 étapes terminées

Mode 7

Réviser vite, retenir longtemps

Des fiches express pour relire l'essentiel en deux minutes, des cartes mémoire qui reviennent au bon moment, et un jeu chronométré pour ancrer le vocabulaire.

« Résume les concepts les plus importants dans un guide clair et concis qui m'aide à réviser rapidement et à mémoriser les idées clés sans complexité inutile. »

Codey

Fiches express

L'essentiel, semaine par semaine

Semaine 1

3 points

JSX et composants

  • className, accolades, un parent unique.
  • Un composant = une fonction en majuscule.
  • Condition : ? : ou &&.
function Titre() {  return <h1>Sys-Code</h1>;}

À retenir : L'interface est une fonction des données.

Semaine 2

3 points

Props et listes

  • Props en lecture seule, valeurs par défaut.
  • map + key pour les listes.
  • Trier une copie.
{lecons.map((l) => <li key={l.id}>{l.titre}</li>)}

À retenir : Les données descendent, jamais l'inverse.

Semaine 3

3 points

L'état et les événements

  • useState pour ce qui change.
  • État minimal, le reste se calcule.
  • Jamais de mutation.
const [panier, setPanier] = useState([]);setPanier((p) => [...p, article]);

À retenir : On remplace l'état, on ne le modifie pas.

Semaine 4

3 points

Les formulaires

  • value + onChange.
  • onSubmit + preventDefault.
  • checked pour les cases.
<input value={pseudo} onChange={(e) => setPseudo(e.target.value)} />

À retenir : L'état est la seule source de vérité du formulaire.

Semaine 5

3 points

Les effets

  • useEffect pour l'extérieur.
  • Des dépendances exactes.
  • Toujours un nettoyage.
useEffect(() => {  const id = setTimeout(() => setFiltre(recherche), 300);  return () => clearTimeout(id);}, [recherche]);

À retenir : Ce qu'un effet ouvre, son nettoyage le ferme.

Semaine 6

3 points

Des composants qui tiennent

  • État partagé dans le parent commun.
  • Hooks personnalisés pour la logique.
  • useReducer pour centraliser.
const [taches, dispatch] = useReducer(reducteur, []);dispatch({ type: "cocher", id });

À retenir : Une source de vérité, des pièces simples autour.