React pour débutants : créer sa première application

React, standard du développement front-end

React est devenu le framework front-end le plus utilisé dans l’industrie. Développé initialement par Facebook (Meta), open source, il structure la construction d’interfaces complexes en composants réutilisables. Son écosystème riche (Next.js, React Query, React Hook Form…) couvre la plupart des besoins du développement web moderne. Ce tutoriel propose une prise en main progressive pour créer votre première application.

Les prérequis

Avant React, maîtrisez : HTML, CSS, JavaScript moderne (fonctions fléchées, destructuration, modules, async/await), TypeScript optionnellement mais recommandé. Sans ces bases, React paraît magique mais reste opaque. Investissez quelques semaines dans les fondamentaux si nécessaire.

Les concepts fondamentaux

Un composant React est une fonction qui retourne du JSX (syntaxe HTML-like dans du JavaScript). Les composants se composent les uns avec les autres pour former l’application complète. Les props (propriétés) passent des données du parent vers les enfants. L’état (state) gère les données qui changent et provoque le re-rendu quand modifié.

function Button({label, onClick}) { return {label}; }. Ce composant affiche un bouton configurable via les props.

Créer un projet React

La méthode moderne utilise Vite : npm create vite@latest my-app — –template react-ts. Cette commande crée un projet React avec TypeScript. Entrez dans le dossier (cd my-app), installez les dépendances (npm install), lancez le serveur de développement (npm run dev).

Le serveur redémarre automatiquement à chaque modification de fichier, avec rechargement à chaud (HMR) qui préserve l’état des composants.

La structure du projet

src/ contient le code source. App.tsx est le composant racine. main.tsx monte l’application dans le DOM. public/ contient les fichiers statiques. index.html est le template HTML. Familiarisez-vous avec cette structure avant de modifier.

Votre premier composant

Créez un fichier src/components/Greeting.tsx :

function Greeting({name}: {name: string}) {
  return <h1>Bonjour, {name} !</h1>;
}
export default Greeting;

Importez-le dans App.tsx et utilisez-le : <Greeting name= »Aminata » />. Le composant s’affiche avec le nom passé en prop.

L’état avec useState

Le hook useState gère l’état local d’un composant. Exemple d’un compteur :

import {useState} from 'react';

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

À chaque clic, setCount met à jour l’état et React re-rend le composant avec la nouvelle valeur.

Les événements

Les événements React suivent une syntaxe camelCase : onClick, onChange, onSubmit. Les handlers reçoivent un objet événement dont on peut extraire les informations.

function Input() { const [value, setValue] = useState( »); return <input value={value} onChange={(e) => setValue(e.target.value)} />; }. Ce pattern de « controlled component » fait de l’état React la source de vérité.

Le rendu conditionnel

Afficher du contenu selon une condition utilise le JavaScript classique dans le JSX : {isLoggedIn ? <Dashboard /> : <LoginForm />}. L’opérateur && pour un rendu conditionnel simple : {error && <Alert type= »error »>{error}</Alert>}.

Les listes

Afficher un tableau de données utilise map : {users.map(user => <UserCard key={user.id} user={user} />)}. L’attribut key doit être unique et stable : préférez un identifiant au index du tableau.

useEffect pour les effets de bord

useEffect exécute du code après le rendu : requêtes API, abonnements, minuteries. Le tableau de dépendances contrôle quand l’effet se réexécute.

useEffect(() => {
  fetch('/api/users').then(r => r.json()).then(setUsers);
}, []); // vide = une seule fois au montage

Attention aux boucles infinies si les dépendances incluent une valeur modifiée par l’effet.

Les hooks personnalisés

Un hook personnalisé extrait une logique réutilisable dans une fonction qui utilise d’autres hooks. Exemple : useLocalStorage qui synchronise un état avec localStorage. Cette abstraction rend le code plus DRY et testable.

Le contexte

Context évite le « prop drilling » (passer des props à travers plusieurs niveaux). Créez un contexte avec createContext, fournissez une valeur avec un Provider, consommez-la avec useContext. Utile pour le thème, l’utilisateur connecté, les préférences.

Le routage avec React Router

Pour une application avec plusieurs pages, React Router gère la navigation. BrowserRouter englobe l’application, Routes et Route définissent les correspondances URL/composants, Link crée des liens qui ne rechargent pas la page. Les paramètres d’URL s’extraient avec useParams.

Les formulaires

Les formulaires simples se gèrent avec useState. Pour les formulaires complexes (validation, erreurs, soumission), React Hook Form simplifie considérablement : registrer les champs, valider avec Zod ou Yup, soumettre avec gestion automatique.

Récupérer des données

fetch natif fonctionne mais TanStack Query (anciennement React Query) apporte : cache automatique, re-fetch intelligent, loading/error states, invalidation. Pour toute application qui consomme des API, c’est un gain de productivité significatif.

const {data, isLoading, error} = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(r => r.json())
});

Les styles dans React

Plusieurs approches coexistent. CSS classique avec classes (className au lieu de class). CSS Modules pour éviter les conflits globaux. Tailwind CSS très populaire. CSS-in-JS (Styled Components, Emotion). Chaque approche a ses partisans ; Tailwind s’impose progressivement.

Le déploiement

Vercel, Netlify rendent le déploiement trivial pour les applications React : connectez votre dépôt GitHub, chaque push déclenche un déploiement automatique. Pour un hébergement traditionnel, npm run build génère les fichiers statiques à placer sur n’importe quel serveur.

Next.js, l’étape suivante

Next.js est un meta-framework construit sur React. Il ajoute : rendu côté serveur (SSR) pour le SEO, routage basé sur la structure de fichiers, optimisations automatiques des images et polices, déploiement simple via Vercel. Pour une application destinée à être indexée par les moteurs de recherche, Next.js est souvent le choix recommandé.

Les erreurs courantes du débutant

Muter directement l’état (user.name = ‘X’ au lieu de setUser({…user, name: ‘X’})). Oublier les keys dans les listes. Boucles infinies d’useEffect. Confondre props et state. Créer des composants trop gros. Ces erreurs se dissipent avec la pratique.

Les ressources pour progresser

La documentation officielle react.dev a été entièrement refondue et est excellente. Les cours de Josh W Comeau, les chaînes YouTube comme Web Dev Simplified, les projets sur frontendmentor.io pour pratiquer. Un apprentissage solide demande 2 à 4 mois de pratique régulière.

Conclusion : investissement structurant

Apprendre React ouvre des opportunités professionnelles considérables : l’écosystème est omniprésent dans l’industrie. La prise en main demande de la rigueur mais les concepts sont accessibles avec une base JavaScript solide. Construisez plusieurs projets complets (todo app, app météo, clone Twitter simple) pour ancrer les apprentissages. Chaque projet consolide les acquis et révèle de nouvelles nuances.