React est une bibliothèque JavaScript puissante, développée par Facebook, qui permet de créer des interfaces utilisateur dynamiques et interactives. Que vous soyez un débutant ou un développeur expérimenté, ce tutoriel vous guidera pour créer une première application React en vous familiarisant avec ses concepts fondamentaux.

Pourquoi Utiliser React ?

React est populaire pour plusieurs raisons :

• Component-Based : Les interfaces sont divisées en composants réutilisables.
• Virtuel DOM : React met à jour uniquement les parties nécessaires de la page, améliorant ainsi les performances.
• Écosystème Riche : React s’intègre avec d’autres outils comme Redux, React Router, et Next.js.

Pré-requis

Avant de commencer, vous devriez avoir une connaissance de base :

• De JavaScript (ES6+)
• Du HTML et du CSS

Configuration de l’Environnement

1. Installer Node.js

Téléchargez et installez Node.js pour exécuter JavaScript côté serveur et gérer les packages avec npm (ou yarn).

2. Créer une Application React

Utilisez l’outil create-react-app pour générer un projet de base :

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

Une fois la commande npm start exécutée, votre application sera accessible à http://localhost:3000.

Structure du Projet

Une application React typique contient plusieurs fichiers importants :

• public/ : Contient le fichier index.html qui est le point d’entrée pour l’application.
• src/ : Contient le code source, y compris les composants et styles.
• node_modules/ : Gère les dépendances installées.

Comprendre les Composants React

Les composants sont au cœur de React. Il en existe deux types principaux :

1. Composants Fonctionnels

Simples fonctions JavaScript qui retournent du JSX :

function Bienvenue() {
  return <h1>Bienvenue sur React!</h1>;
}
export default Bienvenue;

2. Composants Classiques

Créés avec des classes, mais de moins en moins utilisés depuis l’introduction des hooks :

import React, { Component } from 'react';

class Bienvenue extends Component {
  render() {
    return <h1>Bienvenue sur React!</h1>;
  }
}
export default Bienvenue;

Comprendre le JSX

JSX (JavaScript XML) est une syntaxe qui mélange HTML et JavaScript. Exemple :

const element = <h1>Bonjour, Monde!</h1>;

Le JSX est converti en JavaScript pur par Babel, ce qui le rend lisible par les navigateurs.

Ajouter des États avec les Hooks

Les hooks comme useState permettent de gérer l’état dans les composants fonctionnels :

import React, { useState } from 'react';

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

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

export default Compteur;

Gestion des Propriétés (Props)

Les props sont utilisées pour passer des données d’un composant parent à un composant enfant :

function Bienvenue(props) {
  return <h1>Bonjour, {props.nom}!</h1>;
}

export default function App() {
  return <Bienvenue nom="Alice" />;
}

Gestion des Événements

React simplifie la gestion des événements en utilisant des gestionnaires d’événements sous forme de fonctions :

function Bouton() {
  const handleClick = () => alert('Bouton cliqué!');

  return <button onClick={handleClick}>Cliquez-moi</button>;
}
export default Bouton;

Intégration de CSS

Vous pouvez appliquer des styles en ligne ou importer des fichiers CSS :

function StyledButton() {
  return <button style={{ color: 'white', backgroundColor: 'blue' }}>Stylé!</button>;
}

Ou en important un fichier CSS :

import './App.css';

function App() {
  return <h1 className="title">Bonjour React!</h1>;
}

Ajouter un Router (Navigation)

Pour gérer la navigation entre plusieurs pages, utilisez React Router :

npm install react-router-dom

Exemple de configuration :

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

Conclusion

Vous venez de découvrir les bases de React ! Cette bibliothèque offre une énorme flexibilité pour construire des applications modernes. Pour aller plus loin, explorez des concepts avancés comme :

• Redux ou Context API pour la gestion d’état globale.
• Next.js pour le rendu côté serveur.

Avec de la pratique, vous deviendrez rapidement un expert en développement React. Bonne programmation ! 🎉