Exemples de Code avec ReactJS

Maîtrisez la création de composants interactifs et dynamiques avec React

Points Clés à Retenir

• Les composants sont le cœur de React, et peuvent être fonctionnels ou basés sur des classes.
• Les Hooks tels que useState et useEffect permettent de gérer l'état et les effets de bord dans les composants fonctionnels.
• React Router facilite la gestion du routage dans les applications à page unique.

Introduction à ReactJS

ReactJS est une bibliothèque JavaScript open-source développée par Facebook, utilisée pour construire des interfaces utilisateur interactives et dynamiques. Elle suit une architecture basée sur les composants, ce qui facilite la réutilisation de code et la gestion de l'état de l'application. React utilise JSX, une extension de syntaxe pour JavaScript qui permet de décrire la structure de l'interface de manière déclarative.

Concepts de Base de ReactJS

Composants Fonctionnels

Les composants fonctionnels sont des fonctions JavaScript qui acceptent des props en tant qu'argument et retournent des éléments React. Avec l'introduction des Hooks, les composants fonctionnels peuvent désormais gérer l'état et les effets de bord, ce qui les rend aussi puissants que les composants basés sur des classes.

Exemple de Composant Fonctionnel avec Hooks

import React, { useState } from 'react';

function Compteur() {
  const [compte, setCompte] = useState(0);

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

export default Compteur;
    

Composants de Classe

Avant l'introduction des Hooks, les composants basés sur des classes étaient le principal moyen de gérer l'état et les cycles de vie dans React. Bien que les composants fonctionnels soient désormais préférés pour leur simplicité, il est important de comprendre les composants de classe, car ils sont encore largement utilisés dans de nombreux projets existants.

Exemple de Composant de Classe

import React, { Component } from 'react';

class Horloge extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tic(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tic() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Bonjour, monde !</h1>
        <h2>Il est {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Horloge;
    

Props et State

Les props (propriétés) permettent de passer des données des composants parents aux composants enfants. Le state, quant à lui, est utilisé pour stocker des données internes au composant qui peuvent changer au fil du temps. La gestion appropriée des props et du state est cruciale pour créer des applications React efficaces et réactives.

Exemple d'Utilisation de Props

import React from 'react';

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

function App() {
  return (
    <div>
      <Bienvenue nom="Sara" />
      <Bienvenue nom="Cahal" />
      <Bienvenue nom="Edite" />
    </div>
  );
}

export default App;
    

Hooks : useState et useEffect

Les Hooks sont des fonctions introduites dans React 16.8 qui permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. useState est utilisé pour gérer l'état local dans les composants fonctionnels, tandis que useEffect permet de gérer les effets de bord tels que les abonnements ou les mises à jour du DOM.

Exemple de Hook useState

import React, { useState } from 'react';

function ListeTaches() {
  const [taches, setTaches] = useState([]);
  const [input, setInput] = useState('');

  const ajouterTache = () => {
    if (input.trim()) {
      setTaches([...taches, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={ajouterTache}>Ajouter Tâche</button>
      <ul>
        {taches.map((tache, index) => (
          <li key={index}>{tache}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListeTaches;
    

Exemple de Hook useEffect

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Vous avez cliqué ${count} fois`;
  }, [count]);

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

export default ExampleEffect;
    

Gestion des Formulaires avec React

La gestion des formulaires est une fonctionnalité essentielle dans de nombreuses applications web. React permet de créer des formulaires contrôlés où les entrées des utilisateurs sont gérées par l'état du composant, offrant ainsi un contrôle total sur les données saisies.

Exemple de Gestion de Formulaire Contrôlé

import React, { useState } from 'react';

function FormulaireNom() {
  const [valeur, setValeur] = useState('');

  const handleChange = (event) => {
    setValeur(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(\`Le nom a été soumis : \${valeur}\`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom :
        <input type="text" value={valeur} onChange={handleChange} />
      </label>
      <input type="submit" value="Envoyer" />
    </form>
  );
}

export default FormulaireNom;
    

Routage avec React Router

React Router est une bibliothèque standard pour gérer le routage dans les applications React à page unique. Elle permet de définir des routes et de naviguer entre différentes vues sans recharger la page, offrant ainsi une expérience utilisateur fluide.

Exemple Simple avec React Router

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Accueil() {
  return <h2>Page d'Accueil</h2>;
}

function Apropos() {
  return <h2>Page À Propos</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Accueil</Link>
          <Link to="/apropos">À Propos</Link>
        </nav>

        <Switch>
          <Route path="/" exact component={Accueil} />
          <Route path="/apropos" component={Apropos} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
    

Composants de Plus Haut Ordre (HOC)

Les Composants de Plus Haut Ordre sont des techniques avancées dans React pour réutiliser la logique des composants. Un HOC est une fonction qui prend un composant et retourne un nouveau composant enrichi avec des fonctionnalités supplémentaires.

Exemple de HOC avec Logging

import React from 'react';

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentWillMount() {
      console.log('Le composant va monter');
    }

    componentDidMount() {
      console.log('Le composant a monté');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
};

// Utilisation
const MonComposant = (props) => <div>Bonjour, {props.nom}</div>;
const ComposantAmeliore = withLogging(MonComposant);

export default ComposantAmeliore;
    

Exemples Pratiques

1. Compteur (Counter)

Ce composant illustre l'utilisation de useState pour gérer l'état d'un compteur.

import React, { useState } from 'react';

function Compteur() {
  const [compte, setCompte] = useState(0);

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

export default Compteur;
    

2. Horloge (Clock)

Un exemple de composant de classe qui affiche l'heure actuelle et met à jour l'heure toutes les secondes.

import React, { Component } from 'react';

class Horloge extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tic(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tic() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Bonjour, monde !</h1>
        <h2>Il est {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Horloge;
    

3. Liste de Tâches (Todo List)

Ce composant fonctionnel utilise des hooks pour gérer une liste de tâches.

import React, { useState } from 'react';

function ListeTaches() {
  const [taches, setTaches] = useState([]);
  const [input, setInput] = useState('');

  const ajouterTache = () => {
    if (input.trim()) {
      setTaches([...taches, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={ajouterTache}>Ajouter Tâche</button>
      <ul>
        {taches.map((tache, index) => (
          <li key={index}>{tache}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListeTaches;
    

4. Gestion de Formulaire

Un exemple de formulaire contrôlé où les entrées de l'utilisateur sont gérées par l'état du composant.

import React, { useState } from 'react';

function FormulaireNom() {
  const [valeur, setValeur] = useState('');

  const handleChange = (event) => {
    setValeur(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(\`Le nom a été soumis : \${valeur}\`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom :
        <input type="text" value={valeur} onChange={handleChange} />
      </label>
      <input type="submit" value="Envoyer" />
    </form>
  );
}

export default FormulaireNom;
    

Table Récapitulative des Composants Clés

Conclusion

ReactJS est une bibliothèque puissante qui permet de créer des interfaces utilisateur interactives et dynamiques grâce à une architecture basée sur les composants. Que vous choisissiez d'utiliser des composants fonctionnels ou de classe, la maîtrise des concepts tels que les props, le state, et les Hooks est essentielle pour développer des applications efficaces. De plus, des outils comme React Router et les Composants de Haut Niveau offrent des solutions avancées pour gérer le routage et la réutilisation de la logique dans vos projets React.

Références

freecodecamp.org

FreeCodeCamp - Exemples ReactJS

geeksforgeeks.org

GeeksforGeeks - Exemples ReactJS

tutorialspoint.com

TutorialsPoint - ReactJS