Skip to content
Learni
Voir tous les tutoriels
Développement Frontend

Comment créer une application React en 2026

18 minBEGINNER
ReactDébutantFrontend
Read in English

Introduction

React reste en 2026 le framework frontend le plus populaire pour construire des interfaces utilisateur réactives. Ce tutoriel vous apprend à créer une application complète dès le premier jour. Vous allez installer un projet, créer des composants réutilisables, gérer l'état local et réagir aux interactions utilisateur. Chaque étape est accompagnée de code prêt à copier-coller. À la fin, vous disposerez d'une petite application de compteur interactive qui servira de base à tous vos futurs projets React.

Prérequis

  • Node.js 20 ou supérieur installé
  • Connaissances basiques de JavaScript et HTML
  • Un éditeur de code (VS Code recommandé)

Initialiser le projet avec Vite

terminal
npm create vite@latest mon-app-react -- --template react-ts
cd mon-app-react
npm install
npm run dev

Vite offre un démarrage ultra-rapide et une configuration minimale. Le template react-ts inclut déjà TypeScript, ce qui est recommandé en 2026 pour une meilleure expérience de développement.

Structure du projet

Après l'installation, explorez le dossier src. Le fichier principal est src/main.tsx qui monte l'application React dans le DOM. Le composant racine se trouve dans src/App.tsx.

Créer le composant principal

src/App.tsx
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Mon Premier Compteur React</h1>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Incrémenter
      </button>
      <button onClick={() => setCount(0)} style={{ marginLeft: '10px' }}>
        Réinitialiser
      </button>
    </div>
  );
}

export default App;

Ce composant utilise le hook useState pour gérer un compteur. Chaque clic met à jour l'interface automatiquement grâce au système de réactivité de React.

Extraire un composant réutilisable

src/components/Counter.tsx
import React from 'react';

interface CounterProps {
  count: number;
  onIncrement: () => void;
  onReset: () => void;
}

function Counter({ count, onIncrement, onReset }: CounterProps) {
  return (
    <div>
      <p>Valeur actuelle : {count}</p>
      <button onClick={onIncrement}>+1</button>
      <button onClick={onReset} style={{ marginLeft: '8px' }}>Reset</button>
    </div>
  );
}

export default Counter;

Créer des composants petits et focalisés améliore la lisibilité. Les props sont typées avec une interface TypeScript pour éviter les erreurs.

Utiliser le composant Counter

src/App.tsx
import { useState } from 'react';
import Counter from './components/Counter';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Application React 2026</h1>
      <Counter 
        count={count} 
        onIncrement={() => setCount(count + 1)} 
        onReset={() => setCount(0)} 
      />
    </div>
  );
}

export default App;

Le composant parent gère l'état et le transmet via des props. Cette architecture unidirectionnelle est un principe fondamental de React.

Ajouter un effet de bord

src/App.tsx
import { useState, useEffect } from 'react';
import Counter from './components/Counter';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Compteur : ${count}`;
  }, [count]);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Application React 2026</h1>
      <Counter 
        count={count} 
        onIncrement={() => setCount(count + 1)} 
        onReset={() => setCount(0)} 
      />
    </div>
  );
}

export default App;

useEffect permet d'exécuter du code après le rendu. Ici, nous mettons à jour le titre de la page à chaque changement du compteur.

Ajouter du style moderne

src/index.css
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #2563eb;
}

Un style simple et cohérent rend l'application professionnelle. Les styles globaux sont appliqués automatiquement via l'import dans main.tsx.

Bonnes pratiques

  • Toujours typer les props avec TypeScript
  • Extraire la logique dans des hooks personnalisés quand elle se répète
  • Garder les composants petits et concentrés sur une seule responsabilité
  • Utiliser des noms de variables explicites
  • Tester les composants avec React Testing Library

Erreurs courantes à éviter

  • Modifier directement l'état au lieu d'utiliser le setter
  • Oublier de déclarer les dépendances dans useEffect
  • Créer des composants trop volumineux
  • Ne pas utiliser les clés uniques dans les listes

Pour aller plus loin

Approfondissez vos connaissances avec nos formations complètes sur React, TypeScript et les architectures modernes. Découvrez nos formations