Blog

Tutoriel React : Guide du Débutant

Audrey Lopez

Audrey Lopez

13 June 2025

Tutoriel React : Guide du Débutant

Bienvenue, futur développeur React ! Vous avez fait un choix fantastique. React est une bibliothèque JavaScript puissante et populaire pour construire des interfaces utilisateur, et l'apprendre est un moyen sûr de renforcer vos compétences en développement web. Ce guide complet, étape par étape, vous mènera de zéro à héros, vous fournissant les connaissances pratiques dont vous avez besoin pour commencer à construire vos propres applications React en 2025. Nous nous concentrerons sur la pratique, pas seulement sur la lecture, alors préparez-vous à écrire du code !

💡
Vous voulez un excellent outil de test d'API qui génère une belle documentation d'API ?

Vous voulez une plateforme intégrée, tout-en-un, permettant à votre équipe de développeurs de travailler ensemble avec une productivité maximale ?

Apidog répond à toutes vos demandes et remplace Postman à un prix beaucoup plus abordable !
button

Mettons en place votre environnement de développement React

Avant de pouvoir commencer à construire d'incroyables interfaces utilisateur, nous devons mettre en place un espace de travail. Pensez-y comme à la préparation de votre atelier avant de commencer un nouveau projet.

Installer l'essentiel : Node.js et npm

Les applications React sont construites et gérées à l'aide de Node.js et de son gestionnaire de paquets, npm (Node Package Manager).

Pour commencer, rendez-vous sur le site officiel de Node.js et téléchargez la dernière version LTS (Long-Term Support). L'installateur est simple ; suivez simplement les instructions à l'écran. Une fois installé, vous aurez Node.js et npm prêts à l'emploi. Vous pouvez vérifier l'installation en ouvrant votre terminal ou invite de commande et en tapant :Bash

node -v
npm -v

Ces commandes devraient afficher respectivement les versions de Node.js et npm que vous avez installées.

Votre premier projet React avec Vite

Dans le passé, create-react-app était l'outil de prédilection pour démarrer un nouveau projet React. Cependant, le paysage du développement web moderne évolue rapidement, et en 2025, Vite est le choix recommandé pour son incroyable vitesse et son efficacité.

Pour créer un nouveau projet React avec Vite, ouvrez votre terminal et exécutez la commande suivante :Bash

npm create vite@latest my-first-react-app -- --template react

Décortiquons cette commande :

Une fois la commande terminée, vous aurez un nouveau répertoire portant le nom de votre projet. Naviguez dans ce répertoire :Bash

cd my-first-react-app

Ensuite, vous devez installer les dépendances du projet. Ce sont les autres paquets dont votre application React a besoin pour fonctionner correctement. Exécutez cette commande :Bash

npm install

Enfin, pour voir votre toute nouvelle application React en action, démarrez le serveur de développement :Bash

npm run dev

Votre terminal affichera une URL locale, généralement http://localhost:5173. Ouvrez cette URL dans votre navigateur web, et vous verrez l'application React par défaut créée par Vite. Félicitations, vous venez de configurer votre premier projet React !

Le cœur de React : Composants et JSX

Maintenant que vous avez une application React en cours d'exécution, plongeons dans les concepts fondamentaux qui rendent React si puissant : les composants et le JSX.

Qu'est-ce que les composants ?

À la base, une application React est une collection de pièces d'interface utilisateur réutilisables et autonomes appelées composants. Pensez à une page web construite avec des briques LEGO. Chaque brique est un composant, et vous pouvez les combiner pour créer des structures plus complexes.

Dans votre projet my-first-react-app, ouvrez le dossier src et vous trouverez un fichier nommé App.jsx. C'est le composant principal de votre application. Simplifions son contenu pour comprendre les bases :JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Bonjour, monde React !</h1>
      <p>C'est mon tout premier composant React.</p>
    </div>
  );
}

export default App;

Dans ce code :

Comprendre le JSX : JavaScript XML

Le JSX est une extension syntaxique pour JavaScript qui vous permet d'écrire du code similaire à du HTML dans1 vos fichiers JavaScript. Ce n'est pas réellement du HTML, mais cela rend l'écriture de code d'interface utilisateur beaucoup plus intuitive et lisible.

En coulisses, un outil appelé transpiler (dans notre cas, alimenté par Vite) convertit ce JSX en JavaScript ordinaire que les navigateurs peuvent comprendre.

Modifions notre App.jsx pour voir la puissance du JSX. Nous pouvons intégrer des expressions JavaScript directement dans notre JSX en utilisant des accolades {}.JavaScript

// src/App.jsx

function App() {
  const name = "Développeur Débutant";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Bonjour, {name} !</h1>
      <p>Bienvenue dans votre parcours React en {year}.</p>
    </div>
  );
}

export default App;

Enregistrez le fichier, et votre navigateur se mettra automatiquement à jour pour afficher le nouveau contenu. C'est une fonctionnalité de Vite appelée Hot Module Replacement (HMR), et cela offre une expérience de développement fantastique.

Créer votre premier composant personnalisé

Créons notre propre composant. Dans le dossier src, créez un nouveau fichier nommé Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>Ceci est un message d'accueil de mon composant personnalisé !</h2>
  );
}

export default Greeting;

Maintenant, utilisons ce nouveau composant Greeting à l'intérieur de notre composant App.jsx.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Importer le composant Greeting

function App() {
  const name = "Développeur Débutant";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Bonjour, {name} !</h1>
      <p>Bienvenue dans votre parcours React en {year}.</p>
      <Greeting /> {/* Utiliser le composant Greeting */}
    </div>
  );
}

export default App;

En important puis en utilisant <Greeting /> comme une balise HTML ordinaire, nous avons composé notre interface utilisateur à partir de plusieurs composants. C'est le bloc de construction fondamental des applications React.

Passer des données avec les Props

Notre composant Greeting est un peu statique. Que se passe-t-il si nous voulons saluer différentes personnes ? C'est là qu'interviennent les props (abréviation de propriétés). Les props sont la manière dont vous passez des données d'un composant parent à un composant enfant.

Rendre les composants dynamiques avec les Props

Modifions notre Greeting.jsx pour accepter une prop name.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Bonjour, {props.name} ! Ceci est un message d'accueil de mon composant personnalisé.</h2>
  );
}

export default Greeting;

Maintenant, dans App.jsx, nous pouvons passer une prop name à nos composants Greeting.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Vous verrez maintenant trois messages d'accueil différents, chacun avec un nom unique. Les props nous permettent de réutiliser des composants avec des données différentes, rendant notre interface utilisateur incroyablement flexible.

Une pratique JavaScript courante et moderne consiste à déstructurer l'objet props directement dans la liste des paramètres de la fonction. Refactorisons Greeting.jsx :JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Bonjour, {name} ! Ceci est un message d'accueil de mon composant personnalisé.</h2>
  );
}

export default Greeting;

Cela permet d'obtenir le même résultat mais avec un code plus propre et plus concis.

Gérer la mémoire des composants avec l'État (State)

Bien que les props soient excellentes pour passer des données dans l'arbre des composants, que se passe-t-il lorsqu'un composant doit se souvenir et gérer ses propres données ? C'est là que l'état (state) entre en jeu. L'état est une donnée gérée au sein d'un composant. Lorsque l'état d'un composant change, React re-rendra automatiquement ce composant pour refléter le nouvel état.

Introduction au Hook useState

Pour gérer l'état dans les composants fonctionnels, nous utilisons une fonction spéciale de React appelée Hook. Le Hook le plus fondamental est useState.

Construisons un simple composant compteur pour comprendre comment fonctionne useState. Créez un nouveau fichier dans votre dossier src appelé Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi
      </button>
    </div>
  );
}

export default Counter;

Décortiquons cela :

  1. count : La valeur actuelle de l'état.
  2. setCount : Une fonction que nous pouvons utiliser pour mettre à jour l'état count.

Maintenant, ajoutons ce composant Counter à notre App.jsx :JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Ma Super Application React</h1>
      <Counter />
    </div>
  );
}

export default App;

Vous devriez maintenant voir un compteur dans votre navigateur. Chaque fois que vous cliquez sur le bouton, le nombre augmente. React re-rend le composant Counter chaque fois que son état change.

Répondre aux actions de l'utilisateur : Gérer les événements

L'interactivité est au cœur des applications web modernes. React offre un moyen simple et cohérent de gérer les événements tels que les clics, les soumissions de formulaires et la saisie au clavier.

Nous avons déjà vu un gestionnaire d'événements de base dans notre composant Counter avec onClick. Explorons cela plus en détail en construisant un simple formulaire qui prend la saisie de l'utilisateur.

Créez un nouveau fichier de composant nommé NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Empêche le comportement de soumission de formulaire par défaut
    alert(`Bonjour, ${name} !`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom :
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Soumettre</button>
    </form>
  );
}

export default NameForm;

Analysons ce composant formulaire :

Ajoutez ce NameForm à votre App.jsx pour le voir en action.

Afficher des informations : Rendu conditionnel et listes

Les applications du monde réel doivent souvent afficher ou masquer du contenu en fonction de certaines conditions, et elles doivent fréquemment afficher des listes de données.

Afficher et masquer avec le rendu conditionnel

Créons un composant qui affiche un message différent selon qu'un utilisateur est connecté ou non. Créez un fichier nommé LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Bienvenue de retour !</h2>;
  }
  return <h2>Veuillez vous connecter.</h2>;
}

export default LoginMessage;

Nous pouvons également utiliser l'opérateur ternaire pour un rendu conditionnel plus concis.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Bienvenue de retour !</h2> : <h2>Veuillez vous connecter.</h2>}
    </div>
  );
}

export default LoginMessage;

Vous pouvez ensuite utiliser ce composant dans App.jsx et passer la prop isLoggedIn pour voir les différents messages.

Afficher des listes de données

Pour afficher une liste d'éléments, vous utiliserez généralement la méthode de tableau map(). Créons un composant pour afficher une liste de fruits. Créez un fichier nommé FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Pomme', 'Banane', 'Cerise', 'Datte'];

  return (
    <div>
      <h3>Mes fruits préférés :</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Ici, nous parcourons le tableau fruits et pour chaque fruit, nous retournons un élément <li>.

Vous remarquerez la prop key={index}. Lorsque vous affichez une liste d'éléments, React a besoin d'une key unique pour chaque élément afin de mettre à jour efficacement la liste lorsqu'elle change. Utiliser l'index du tableau comme clé est acceptable pour les listes simples et statiques. Cependant, pour les listes dynamiques où des éléments peuvent être ajoutés, supprimés ou réordonnés, il est préférable d'utiliser un ID unique provenant de vos données si disponible.

Ajouter du style à votre application

Une excellente application doit être esthétique. Il existe plusieurs façons de styliser vos composants React.

Feuilles de style CSS

La méthode la plus simple consiste à utiliser des fichiers CSS ordinaires. Dans le dossier src, vous trouverez un fichier App.css. Vous pouvez y ajouter vos styles.

Par exemple, pour styliser notre composant FruitList, vous pourriez ajouter ceci à App.css :CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Ensuite, dans votre FruitList.jsx, vous pouvez utiliser ces classes CSS.JavaScript

// src/FruitList.jsx
import './App.css'; // Assurez-vous d'importer le fichier CSS

function FruitList() {
  const fruits = ['Pomme', 'Banane', 'Cerise', 'Datte'];

  return (
    <div>
      <h3>Mes fruits préférés :</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Notez que nous utilisons className au lieu de class en JSX, car class est un mot-clé réservé en JavaScript.

Modules CSS

Pour les applications plus importantes, les Modules CSS offrent un moyen de limiter la portée des styles à un composant spécifique, évitant ainsi les conflits de styles. Un fichier de Module CSS est nommé avec l'extension .module.css.

Créons FruitList.module.css :CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Maintenant, dans FruitList.jsx, vous importez les styles comme un objet :JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Pomme', 'Banane', 'Cerise', 'Datte'];

  return (
    <div>
      <h3>Mes fruits préférés (Stylisés avec les Modules CSS) :</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite générera automatiquement des noms de classe uniques, garantissant que les styles de FruitList.module.css ne s'appliquent qu'au composant FruitList.

La plupart des applications web ont plusieurs pages. Pour gérer la navigation entre ces "pages" dans une application à page unique (SPA) comme celle construite avec React, nous utilisons une bibliothèque appelée React Router.

Configurer React Router

Tout d'abord, vous devez installer React Router :Bash

npm install react-router-dom

Créer vos pages

Créons deux composants de page simples : HomePage.jsx et AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Page d'accueil</h1>
      <p>Bienvenue sur la page d'accueil de notre incroyable application !</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>Page À propos</h1>
      <p>Ceci concerne notre incroyable application.</p>
    </div>
  );
}

export default AboutPage;

Configurer le Router

Maintenant, nous allons configurer nos routes dans App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Accueil</Link>
            </li>
            <li>
              <Link to="/about">À propos</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Décortiquons les nouveaux composants de React Router :

Maintenant, lorsque vous cliquez sur les liens "Accueil" et "À propos", le contenu changera sans rechargement complet de la page. Vous avez réussi à implémenter le routage côté client !

Aller plus loin : Le Hook useEffect

Le Hook useState sert à gérer l'état qui affecte directement ce qui est affiché. Mais qu'en est-il des effets secondaires, comme la récupération de données depuis une API, la mise en place d'abonnements ou la modification manuelle du DOM ? Pour cela, nous utilisons le Hook useEffect.

Le Hook useEffect s'exécute après chaque rendu par défaut. Voyons-le en action en créant un composant qui récupère des données depuis une fausse API.

Créez un nouveau fichier DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Cette fonction sera appelée après le rendu du composant
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Erreur lors de la récupération des données :', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Le tableau de dépendances vide est important !

  if (loading) {
    return <p>Chargement...</p>;
  }

  return (
    <div>
      <h3>Données récupérées :</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

La clé pour comprendre useEffect ici est le deuxième argument : le tableau de dépendances.

Ajoutez DataFetcher à votre App.jsx pour le voir récupérer et afficher les données lorsque le composant se charge.

Conclusion et prochaines étapes

Vous avez parcouru un long chemin ! Vous avez appris comment :

C'est une réalisation énorme, et vous avez maintenant une base solide sur laquelle bâtir. Le monde de React est vaste et passionnant. Voici quelques sujets que vous pourriez vouloir explorer ensuite :

La chose la plus importante que vous puissiez faire maintenant est de continuer à construire. La pratique est essentielle. Essayez de recréer un site web ou une application simple que vous utilisez quotidiennement. Mettez-vous au défi avec de nouvelles fonctionnalités. Plus vous codez, plus vous deviendrez confiant et compétent.

Bienvenue dans la communauté React. Bon codage !

💡
Vous voulez un excellent outil de test d'API qui génère une belle documentation d'API ?

Vous voulez une plateforme intégrée, tout-en-un, permettant à votre équipe de développeurs de travailler ensemble avec une productivité maximale ?

Apidog répond à toutes vos demandes et replaces Postman at a much more affordable price!
button

Pratiquez le Design-first d'API dans Apidog

Découvrez une manière plus simple de créer et utiliser des API

S'inscrire gratuitementTélécharger