React

La popularité de React s’explique par :

• un modèle de composants qui passe à l’échelle
• un écosystème et une communauté énormes
• une forte demande sur le marché de l’emploi
• une excellente intégration avec l’outillage moderne

React est assez flexible pour de petits projets et assez robuste pour de grandes équipes produit.

React repose sur quelques principes clés :

• UI déclarative
• composition de composants
• flux de données unidirectionnel
• rendu prévisible

Ces principes facilitent la lecture, les tests et la maintenance.

React est souvent utilisé avec :

• TypeScript pour la robustesse
• bundlers (Vite / Webpack) ou frameworks (Next.js)
• patterns de state management
• rendu client et/ou rendu serveur

Selon le besoin, on peut faire du SPA, du SSR ou des approches hybrides.

React est présent dans de nombreux secteurs :

SaaS et plateformes B2B

Dashboards, analytics et outils internes utilisent souvent React pour une UX riche.

Exemple : un petit composant

type Props = { name: string };

export function Hello({ name }: Props) {
  return <div>Bonjour, {name}</div>;
}

E‑commerce

React alimente des pages produit, paniers et checkouts avec une forte réutilisation.

Apps grand public

Feeds, players et personnalisation nécessitent souvent une gestion d’état complexe.

Plateformes développeurs

Consoles, portails d’admin et docs interactives reposent fréquemment sur React.

React est l’une des compétences front-end les plus demandées. Postes courants :

• Développeur Frontend (React)
• Développeur Full‑Stack
• UI Engineer
• Développeur JavaScript / TypeScript

React est souvent associé à TypeScript, aux tests, et à une stack backend.

Apprendre React permet de :

• construire des UIs modernes orientées composants
• travailler avec des patterns et outils de production
• accéder à un large marché de l’emploi

C’est une compétence durable, très utilisée dans les équipes produit.

React encourage :

• UI déclarative et composition
• composants petits et réutilisables
• flux de données clair et mises à jour prévisibles

Cette philosophie aide à faire grandir un codebase UI en équipe.

Caractéristiques principales :

• JSX/TSX
• hooks (state et effects)
• composition plutôt qu’héritage
• intégration avec SSR/SSG

React se combine généralement avec un routeur et une stratégie de data fetching.

Un compteur avec state

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Compteur : {count}
    </button>
  );
}

Rendre une liste

type Item = { id: string; label: string };

export function List({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id}>{it.label}</li>
      ))}
    </ul>
  );
}

Gérer un input

import { useState } from "react";

export function NameForm() {
  const [name, setName] = useState("");
  return (
    <label>
      Nom
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </label>
  );
}

• React DOM : pour le web
• React Native : pour le mobile (écosystème séparé)
• Frameworks SSR : patterns de rendu côté serveur

Selon le contexte (web, mobile, server-first), l’écosystème autour de React change.

Le cœur de React est petit, mais l’écosystème est vaste. On retrouve souvent :

• routing
• data fetching et cache
• tests
• bibliothèques UI

Avoir une stack cohérente autour de React est important pour la maintenabilité.