1. Composants : Les briques de base

Les composants sont au cœur de toutes les applications React. Ce sont des fonctions JavaScript qui renvoient du JSX (et non du HTML contrairement à ce qu’on pourrait croire). Qu'est-ce que JSX ? Il s'agit d'une syntaxe qui ressemble à du HTML, mais qui est en réalité du JavaScript déguisé. Chaque partie visible de votre interface – boutons, pages, formulaires – peut être un composant. Un des avantages majeurs : vous pouvez réutiliser ces composants facilement, comme si vous assembliez un projet avec des Lego.

Pour accélérer le développement et maintenir une cohérence dans votre application, vous pouvez utiliser des librairies de composants open source telles que Cuicui. Cuicui propose une collection de composants React prêts à l'emploi, vous permettant de gagner du temps et de vous concentrer sur la logique de votre application.

Exemple de composant simple :

import React from 'react';

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

export default Bonjour;

Utilisation du composant :

import React from 'react';
import Bonjour from './Bonjour';

function App() {
  return (
    <div>
      <Bonjour nom="Alice" />
      <Bonjour nom="Bob" />
    </div>
  );
}

export default App;

2. JSX et balises dynamiques avec les accolades

Imaginez ceci : au lieu de vous contenter d'afficher du texte statique, vous pouvez injecter des valeurs JavaScript directement dans vos balises JSX à l’aide des accolades. Besoin d’intégrer une donnée qui change en fonction des événements de l'utilisateur ? Placez-la simplement entre deux accolades. Un exemple typique : mettre à jour le nombre de « likes » en temps réel avec la variable likes.

Exemple avec des valeurs dynamiques :

import React, { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <p>Nombre de likes : {likes}</p>
      <button onClick={() => setLikes(likes + 1)}>Like</button>
    </div>
  );
}

export default LikeButton;

Et si vous avez besoin d'ajouter des styles, au lieu d’écrire des blocs CSS externes, vous pouvez styliser les éléments directement en passant un objet JavaScript dans les accolades.

Exemple de styles en ligne :

import React from 'react';

function BoiteStylisée() {
  const style = {
    backgroundColor: 'lightblue',
    padding: '20px',
    borderRadius: '5px'
  };

  return <div style={style}>Ceci est une boîte stylisée</div>;
}

export default BoiteStylisée;

3. Fragments : Empilez vos composants avec fluidité

Avec React, vous ne pouvez retourner qu'un seul élément parent d’une fonction composant. Si vous essayez de retourner plusieurs éléments, vous risquez une belle erreur. Plutôt que d'envelopper le tout dans un div inutile, utilisez un React Fragment. Cela vous permet d'empiler plusieurs éléments sans alourdir votre DOM.

Exemple avec React Fragment :

import React from 'react';

function Liste() {
  return (
    <>
      <li>Élément 1</li>
      <li>Élément 2</li>
      <li>Élément 3</li>
    </>
  );
}

export default Liste;

Utilisation dans un composant parent :

import React from 'react';
import Liste from './Liste';

function App() {
  return (
    <ul>
      <Liste />
    </ul>
  );
}

export default App;

4. Props : Passer des données entre composants

Vous vous demandez comment transmettre des informations entre vos composants ? C’est là que les props entrent en jeu. Les props, ce sont juste des propriétés qu’on passe d’un composant parent à un composant enfant.

Exemple de passage de props :

import React from 'react';

function Profil(props) {
  return (
    <div>
      <h2>{props.nom}</h2>
      <p>{props.description}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Profil nom="Alice" description="Développeuse front-end" />
      <Profil nom="Bob" description="Designer UX" />
    </div>
  );
}

export default App;

Vous pouvez également passer des enfants entiers (composants) dans d'autres composants via le children prop. C’est idéal pour les structures de mise en page où tous les enfants partagent une disposition commune.

Exemple avec children :

import React from 'react';

function Carte(props) {
  return (
    <div className="carte">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Carte>
      <h3>Titre de la carte</h3>
      <p>Contenu de la carte</p>
    </Carte>
  );
}

export default App;

5. La clé du Key Prop : Identifiez vos éléments

Lorsque vous effectuez une boucle sur plusieurs éléments dans un tableau (généralement avec .map()), React utilise le key prop pour savoir quels éléments doivent être réaffichés lorsqu’il y a des changements. Assurez-vous qu’ils sont uniques ! Sinon, attendez-vous à voir un bon petit warning dans la console.

Exemple avec key prop :

import React from 'react';

function ListeDeTaches(props) {
  return (
    <ul>
      {props.taches.map((tache) => (
        <li key={tache.id}>{tache.description}</li>
      ))}
    </ul>
  );
}

function App() {
  const taches = [
    { id: 1, description: 'Apprendre React' },
    { id: 2, description: 'Construire une application' },
    { id: 3, description: 'Partager avec la communauté' },
  ];

  return <ListeDeTaches taches={taches} />;
}

export default App;

6. La magie du rendu React et du Virtual DOM

À chaque fois que l’état (state) de votre application change, React ne va pas rafraîchir toute la page comme le ferait du bon vieux HTML. Non, il utilise son Virtual DOM pour comparer ce qui a changé, puis il fait les ajustements minimaux nécessaires dans le DOM réel. C’est pour cela que React est super rapide.

Exemple illustrant le Virtual DOM :

Imaginons que vous avez un compteur qui se met à jour. Avec React, seul l'élément affichant le compteur est mis à jour dans le DOM réel, pas toute la page.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

export default Compteur;

7. Gestion des événements : Rendre vos interfaces réactives

Les utilisateurs adorent cliquer, taper, glisser. Comment le gérer élégamment dans React ? Avec les événements intégrés comme onClick, onChange, onSubmit. Ajoutez simplement ces événements comme props à vos éléments (boutons, formulaires…), et React fera le reste en déclenchant des fonctions selon vos besoins.

Exemple de gestion d'événements :

import React, { useState } from 'react';

function Formulaire() {
  const [texte, setTexte] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Vous avez soumis : ${texte}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={texte} onChange={handleChange} />
      <button type="submit">Soumettre</button>
    </form>
  );
}

export default Formulaire;

8. State : L'état de votre interface

Le state est fondamental pour gérer les données dynamiques dans votre application React. Vous ne pouvez pas simplement utiliser des variables JavaScript comme vous le feriez habituellement. Utilisez plutôt le hook useState pour initialiser une donnée. Ensuite, modifiez-la avec la fonction setState dédiée, ce qui déclenchera un nouveau rendu de votre composant.

Cela est particulièrement utile pour les composants contrôlés. Par exemple, vous pouvez contrôler ce que l'utilisateur tape dans un champ de formulaire, en stockant cette valeur dans l'état et en la mettant à jour à chaque modification.

Exemple avec useState :

import React, { useState } from 'react';

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

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

  return (
    <div>
      <input type="text" value={valeur} onChange={handleChange} />
      <p>Vous avez tapé : {valeur}</p>
    </div>
  );
}

export default ChampDeTexte;

9. Les Hooks : La force des fonctions React

React dispose de plusieurs hooks puissants pour gérer tout ce qu'il y a de plus complexe, de l'état aux effets secondaires. Voici les hooks que vous utiliserez le plus souvent :

• useState : Gérer l’état d’un composant.

• useEffect : Gérer les effets secondaires (comme les appels API au chargement d’un composant).

• useRef : Permet de manipuler directement le DOM.

En plus de ceux-ci, vous trouverez les hooks comme useContext pour rendre vos données accessibles à plusieurs composants ou encore useMemo pour améliorer les performances en évitant des re-rendus inutiles.

Pour une gestion de la productivité optimale lors du développement, vous pouvez utiliser des outils comme Modul, un outil de productivité tout-en-un qui facilite l'organisation de vos projets React.

Exemple avec useEffect :

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

function DonneesAPI() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/donnees')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Le tableau vide indique que l'effet s'exécute une seule fois après le premier rendu

  if (!data) {
    return <div>Chargement...</div>;
  }

  return (
    <div>
      <h1>Données de l'API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DonneesAPI;

10. Composants purs : Gardez-les simples

Dans le développement React, un composant pur signifie que si vous lui donnez les mêmes entrées, il renverra toujours la même sortie. Il ne doit pas modifier d’autres variables et doit se limiter à renvoyer du JSX. Garder vos composants purs vous protège des comportements inattendus.

Exemple de composant pur :

import React from 'react';

function Addition(props) {
  return <div>Résultat : {props.a + props.b}</div>;
}

export default Addition;

11. Mode Strict et bonnes pratiques en développement

Le Strict Mode de React vous aide en développement. Rien de compliqué ici : c’est simplement un composant que vous pouvez utiliser pour envelopper votre app principale, et il vous détectera les éventuelles mauvaises pratiques en vous notifiant lors du développement.

Exemple d'utilisation du Strict Mode :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

12. Effets et gestion externe

Parfois, vous devez sortir de React, parler avec des API externes ou manipuler le DOM. Le hook useEffect est parfait pour ces scénarios. Que vous fassiez une requête HTTP avec Fetch ou que vous modifiiez directement un élément du DOM avec un ref, c'est ici que tout se passe.

Exemple de manipulation du DOM avec useRef :

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focus}>Focus sur l'input</button>
    </div>
  );
}

export default FocusInput;

13. Portails : Quand les composants ne trouvent pas leur place

Les portails vous permettent de rendre des composants là où vous voulez. Très pratique pour les modales ou menus déroulants, par exemple, quand les styles parentaux font obstacle.

Exemple de portail :

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <h1>Bienvenue</h1>
      <Modal>
        <p>Ceci est une modale.</p>
      </Modal>
    </div>
  );
}

export default App;

Assurez-vous d'avoir un élément avec l'ID modal-root dans votre index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>
</html>

14. Suspense : Gérez le chargement avec élégance

Le Suspense Component est là pour gérer les composants ou les données qui prennent du temps à se charger. Plutôt que d’afficher une page vide, Suspense vous permet de définir un affichage temporaire comme un spinner de chargement avant d’avoir l’info finale.

Exemple avec Suspense et lazy :

import React, { Suspense, lazy } from 'react';

const ComposantLent = lazy(() => import('./ComposantLent'));

function App() {
  return (
    <div>
      <h1>Bienvenue</h1>
      <Suspense fallback={<div>Chargement...</div>}>
        <ComposantLent />
      </Suspense>
    </div>
  );
}

export default App;

15. Gérer les erreurs avec les Boundary Errors

Il est presque inévitable qu’à un moment donné, une erreur viendra casser votre application. Avec React, vous pouvez préparer une Error Boundary pour attraper ces erreurs et afficher un message agréable à vos utilisateurs au lieu de tout planter.

Exemple d'Error Boundary :

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Met à jour l'état pour afficher l'UI de secours
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Vous pouvez aussi enregistrer l'erreur dans un service de rapport
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Quelque chose s'est mal passé.</h2>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Utilisation de l'Error Boundary :

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ComposantPotentiellementErroné from './ComposantPotentiellementErroné';
function App() {
  return (
    <ErrorBoundary>
      <ComposantPotentiellementErroné />
    </ErrorBoundary>
  );
}

export default App;

Conclusion

React est rempli de concepts puissants, mais une fois que vous les maîtrisez, vous êtes prêt à créer des applications incroyablement dynamiques et interactives. Pour enrichir votre développement, n'hésitez pas à utiliser des librairies de composants comme Cuicui et à optimiser votre flux de travail avec des outils de productivité tels que Modul.

Si vous souhaitez approfondir davantage ces notions, n'hésitez pas à suivre une formation complémentaire pour découvrir encore plus d’outils et de techniques avancées !

Maintenant que nous avons fait le tour des concepts clés, vous êtes équipé pour embarquer dans vos projets React avec confiance. Vous voyez ? Ce n'est pas si compliqué avec un peu de pratique.