Debuter avec React

Pourquoi React ?

React est un framework JavaScript populaire pour construire des interfaces utilisateur interactives et réactives. Au quotidien, les développeurs utilisent React pour créer des applications web modernes qui offrent une expérience utilisateur fluide et performante. Un cas concret d'utilisation de React est lorsqu'un développeur a besoin de créer un site web dynamique avec des composants modulaires et réutilisables.

Prerequis

• Connaissances en JavaScript : React est basé sur JavaScript, donc une bonne compréhension des concepts de base (variables, fonctions, objets) est nécessaire.
• Principes d'objets et de tableaux : Comprendre comment travailler avec les objets et les tableaux en JavaScript est crucial pour utiliser React efficacement.
• Connaissances en HTML et CSS : Pour comprendre la structure et le style des composants React, une connaissance de base de HTML et CSS est nécessaire.

Outils à installer :

• Node.js (version recommandée >= 14.0)
• npm (Node Package Manager) : Généralement installé avec Node.js
• Code editor (ex: Visual Studio Code, WebStorm)

Concepts fondamentaux

Composants React

Les composants sont les blocks de construction de l'interface utilisateur en React. Ils sont des fonctions JavaScript qui renvoient des éléments JSX.

// Exemple d'un composant React simple
import React from 'react';

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

export default Greeting;

État (State)

L'état est un objet qui stocke les données d'un composant et permet de les mettre à jour.

// Exemple d'utilisation de l'état dans un composant React
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;

Props

Les props (properties) sont des valeurs passées d'un composant parent à un composant enfant.

// Exemple d'utilisation de props dans un composant React
import React from 'react';

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

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

export default App;

Cycle de vie des composants

React a un cycle de vie bien défini pour chaque composant. Les méthodes importantes dans le cycle de vie incluent componentDidMount, componentDidUpdate, et componentWillUnmount.

// Exemple de méthodes du cycle de vie en React
import React, { useEffect } from 'react';

function DataFetching() {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []);

  return <div>Data Fetching...</div>;
}

export default DataFetching;

Mise en pratique : projet fil rouge

Nous allons créer un mini-projet simple : un Gestionnaire de Tâches. Ce gestionnaire permettra aux utilisateurs d'ajouter, supprimer et afficher des tâches.

Étape 1 : Créer le projet React

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

Étape 2 : Installer Axios pour les requêtes HTTP

npm install axios

Étape 3 : Créer les composants

Task.js

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

function Task({ task, onDelete }) {
  return (
    <div>
      {task.name}
      <button onClick={() => onDelete(task.id)}>Supprimer</button>
    </div>
  );
}

export default Task;

TaskList.js

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

function TaskList({ tasks, onDelete }) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <Task task={task} onDelete={onDelete} />
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

AddTask.js

// src/components/AddTask.js
import React, { useState } from 'react';

function AddTask({ onAdd }) {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(name);
    setName('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Ajouter une tâche..."
      />
      <button type="submit">Ajouter</button>
    </form>
  );
}

export default AddTask;

Étape 4 : Mettre en place le state et les fonctions

App.js

// src/App.js
import React, { useState } from 'react';
import axios from 'axios';
import TaskList from './components/TaskList';
import AddTask from './components/AddTask';

function App() {
  const [tasks, setTasks] = useState([]);

  const fetchTasks = async () => {
    try {
      const response = await axios.get('https://api.example.com/tasks');
      setTasks(response.data);
    } catch (error) {
      console.error('Error fetching tasks:', error);
    }
  };

  useEffect(() => {
    fetchTasks();
  }, []);

  const addTask = async (name) => {
    try {
      const response = await axios.post('https://api.example.com/tasks', { name });
      setTasks([...tasks, response.data]);
    } catch (error) {
      console.error('Error adding task:', error);
    }
  };

  const deleteTask = async (id) => {
    try {
      await axios.delete(`https://api.example.com/tasks/${id}`);
      setTasks(tasks.filter(task => task.id !== id));
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  };

  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      <AddTask onAdd={addTask} />
      <TaskList tasks={tasks} onDelete={deleteTask} />
    </div>
  );
}

export default App;

Étape 5 : Exécuter le projet

npm start

Erreurs fréquentes et debugging

Erreur 1: "TypeError: Cannot read property 'map' of undefined"

Code incorrect :

<TaskList tasks={tasks} onDelete={deleteTask} />

Code correct :

<TaskList tasks={tasks || []} onDelete={deleteTask} />

Erreur 2: "Uncaught SyntaxError: Unexpected token '<'"

Code incorrect :

<div>
  <Task task={task} onDelete={onDelete} />
</div>

Code correct :

<div>
  <Task key={task.id} task={task} onDelete={onDelete} />
</div>

Erreur 3: "AxiosError: Request failed with status code 404"

Code incorrect :

const response = await axios.get('https://api.example.com/tasks');

Code correct :

const response = await axios.get('https://api.example.com/tasks');
if (!response.data) {
  throw new Error('No tasks found');
}
setTasks(response.data);

Pour aller plus loin

1. Comprendre les Hooks : Les hooks (useEffect, useState, useContext...) sont des fonctionnalités avancées de React qui permettent d'ajouter des capacités spécifiques à vos composants functionnels.
2. Utiliser Redux pour le gestionnaire d'état global : Pour gérer des états complexes et les partager entre plusieurs composants.
3. Optimisation des performances avec React.memo et useCallback : Améliorez la performance de votre application en évitant les rendus inutiles.

Défi pratique

Créez un mini-projet qui utilise une API pour récupérer une liste de livres et permettre aux utilisateurs de les afficher, ajouter, supprimer et modifier.