Migrer de jQuery vers React

Pourquoi Migrer de jQuery vers React ?

La transition depuis jQuery vers React est une évolution majeure dans le développement web moderne, offrant des avantages inestimables en termes d'efficacité et de performance. En effet, à mesure que les applications web deviennent plus complexes et interagissent avec des serveurs asynchrones, jQuery commence à se montrer limité. React, grâce à son architecture basée sur le composant et sa gestion du rendu virtuel, offre une meilleure gestion de l'état et une performance supérieure.

Un cas d'usage concret est la construction d'une application web moderne qui nécessite des interactions dynamiques, des animations complexes, et un comportement utilisateur réactif. Par exemple, imaginez une application de gestion de projet où les utilisateurs peuvent ajouter, modifier et supprimer des tâches en temps réel.

Prerequis

• Connaissance avancée de JavaScript ES6+
• Familiarité avec la structure d'un composant React
• Compréhension de l'architecture basée sur le composant de React
• Experience avec les outils de développement front-end (IDE, terminal)

Outils à installer :

• Node.js (14.x ou plus)
• npm (5.6.x ou plus)
• Visual Studio Code (ou n'importe quel IDE préféré)

Concepts fondamentaux

Composants React

Les composants sont les blocs de base de React. Ils peuvent être vus comme des fonctions qui renvoient du JSX.

import React from 'react';

function Greeting(props) {
  return <h1>Bonjour {props.name}!</h1>;
}

export default Greeting;

Props

Les props sont un moyen de passer des données d'un composant parent à un composant enfant. Ils sont immuables.

<Greeting name="John" />

État (State)

L'état est un objet qui contient les données mutables d'un composant et qui déclenche une mise à jour de l'interface utilisateur lorsqu'il change.

import React, { useState } from 'react';

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

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

export default Counter;

Cycle de Vie des Composants

React fournit une série de méthodes de cycle de vie que vous pouvez utiliser pour effectuer des actions spécifiques à certaines étapes du lifecycle.

import React, { useEffect } from 'react';

function UserGreeting({ isLoggedIn }) {
  useEffect(() => {
    console.log('Component did mount');
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return (
    <h1>{isLoggedIn ? 'Bienvenue' : 'Connectez-vous'}</h1>
  );
}

export default UserGreeting;

Mise en pratique : projet fil rouge

Dans ce mini-projet, nous allons créer une application simple de gestionnaire de tâches. L'utilisateur pourra ajouter, modifier et supprimer des tâches.

Étape 1 : Création du Projet

npx create-react-app task-manager
cd task-manager
npm start

Étape 2 : Structure du Projet

Créez les fichiers suivants dans le dossier src :

• Task.js
• TaskList.js
• App.js

Étape 3 : Composant Task

// src/Task.js
import React from 'react';

const Task = ({ task, onDelete }) => {
  return (
    <li>
      {task.title}
      <button onClick={() => onDelete(task.id)}>Supprimer</button>
    </li>
  );
};

export default Task;

Étape 4 : Composant TaskList

// src/TaskList.js
import React, { useState } from 'react';
import Task from './Task';

const TaskList = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Tâche 1' },
    { id: 2, title: 'Tâche 2' }
  ]);

  const addTask = (title) => {
    setTasks([...tasks, { id: Date.now(), title }]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div>
      <ul>
        {tasks.map(task => (
          <Task key={task.id} task={task} onDelete={deleteTask} />
        ))}
      </ul>
      <button onClick={() => addTask('Nouvelle tâche')}>Ajouter une tâche</button>
    </div>
  );
};

export default TaskList;

Étape 5 : Composant App

// src/App.js
import React from 'react';
import TaskList from './TaskList';

function App() {
  return (
    <div className="App">
      <h1>Gestionnaire de Tâches</h1>
      <TaskList />
    </div>
  );
}

export default App;

Erreurs fréquentes et debugging

Erreur 1 : Mise à jour asynchrone

## ❌ Mauvais
this.setState({ count: this.state.count + 1 });

## ✅ Correct
this.setState(prevState => ({ count: prevState.count + 1 }));

Erreur 2 : Prop non défini

## ❌ Mauvais
const { title } = props;

## ✅ Correct
const title = props.title;

Erreur 3 : Effet de bord manquant

## ❌ Mauvais
useEffect(() => {
  console.log('Component did mount');
}, []);

## ✅ Correct
useEffect(() => {
  console.log('Component did mount');

  return () => {
    console.log('Component will unmount');
  };
}, []);

Pour aller plus loin

1. Gestion de l'état global avec Redux

   • Lien vers le guide officiel de Redux : Redux

2. Utilisation d'API asynchrones avec Axios

   • Lien vers la documentation d'Axios : Axios

3. Optimisation des performances avec React.memo et useMemo

   • Documentation officielle de React sur les performances : React Performance

Défi pratique

Créez une application simple d'un blog où les utilisateurs peuvent ajouter, modifier et supprimer des articles. Utilisez les concepts suivants :

• Composants fonctionnels
• État local avec useState
• Gestion des props
• Cycle de vie des composants

Ce tutoriel vous aide à comprendre le pourquoi et comment migrer de jQuery vers React, en passant par la mise en pratique d'un mini-projet complet. N'hésitez pas à explorer davantage les concepts avancés pour profiter pleinement des capacités de React!