Comment débuter avec React : guide pour débutants

Introduction à React

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Développée par Facebook, elle est aujourd'hui maintenue par Meta et une large communauté. React permet de créer de grandes applications web dont les données changent sans recharger la page.

Dans ce guide, nous allons couvrir les bases de React et créer ensemble votre premier composant.

Pourquoi React ?

React présente plusieurs avantages qui en font un choix populaire pour le développement frontend :

• Architecture en composants : des briques réutilisables qui simplifient les interfaces complexes.
• DOM virtuel : React optimise les performances de rendu.
• Syntaxe déclarative : un code plus facile à comprendre et à déboguer.
• Communauté : un immense écosystème de bibliothèques et d'outils.

Configurer votre premier projet

Le plus simple pour démarrer est d'utiliser un outil qui prépare un projet avec une bonne configuration par défaut :

npx create-react-app mon-premier-app
cd mon-premier-app
npm start

Ouvrez ensuite http://localhost:3000 dans votre navigateur pour voir l'application tourner.

Créer votre premier composant

Un composant est un morceau d'interface réutilisable. Créons-en un qui affiche un message de bienvenue :

// src/components/Greeting.js
import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Bonjour, {props.name} !</h1>
      <p>Bienvenue dans React.</p>
    </div>
  );
}

export default Greeting;

Utilisez-le ensuite dans App.js :

// src/App.js
import Greeting from './components/Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="Monde" />
    </div>
  );
}

export default App;

Comprendre les props

Nous avons passé une prop name au composant Greeting. Les props (propriétés) permettent de transmettre des données d'un composant parent à un composant enfant.

Ajouter un état

Les props viennent de l'extérieur ; l'état, lui, est géré à l'intérieur du composant :

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Bonjour, {props.name} !</h1>
      <p>Vous avez cliqué {count} fois.</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi
      </button>
    </div>
  );
}

Conclusion

Nous avons vu comment configurer un projet, créer des composants, utiliser les props et gérer l'état. React offre bien plus — hooks, contexte, et tout un écosystème — que vous découvrirez au fil de vos projets.