React avec Supabase : guide pratique

Pourquoi React avec Supabase : guide pratique ?

Contexte réel : pourquoi un dev a besoin de ca au quotidien Le développement moderne nécessite souvent la manipulation et l'analyse de données dans des applications web. C'est là que Supabase entre en jeu. Supabase est une base de données SQL avec des extensions Postgres, qui offre des fonctionnalités avancées comme l'autentification, les Webhooks et les triggers. React, quant à lui, est un framework JavaScript populaire pour construire des interfaces utilisateur réactives et interactives.

Un cas d'usage concret en 2-3 phrases Imaginez une application de gestion de projet simple où les utilisateurs peuvent créer, lire, mettre à jour et supprimer des tâches. Avec React et Supabase, vous pouvez construire cette application en une seule page, offrant une expérience utilisateur fluide tout en stockant et en récupérant les données dans la base de données.

Prerequis

• Connaissances nécessaires :

  • JavaScript ES6+
  • Connaissance de React
  • Compréhension de base de l'API HTTP
  • Connaissance de bases en SQL (optionnel, pour une meilleure compréhension du fonctionnement interne de Supabase)

• Outils à installer :

  • Node.js v14+ (npm)
  • Code editor (VSCode recommandé)
  • Terminal

Concepts fondamentaux

1. Création d'une application React

Créez un nouveau projet React en utilisant Create React App :

npx create-react-app react-supabase-todo
cd react-supabase-todo
npm start

Cela créera une nouvelle application React et lancera le serveur de développement.

2. Installation de Supabase Client

Ajoutez le client Supabase à votre projet :

npm install @supabase/supabase-js

3. Configuration de Supabase

Créez un compte sur Supabase et créez une nouvelle base de données. Ensuite, téléchargez le fichier .env.example dans votre projet React et renommez-le en .env. Remplacez les valeurs par celles de votre projet Supabase :

REACT_APP_SUPABASE_URL=https://your-project-id.supabase.co
REACT_APP_SUPABASE_ANON_KEY=your-anon-key

4. Connexion à Supabase

Créez un fichier supabase.js dans le répertoire src pour initialiser la connexion à Supabase :

// src/supabase.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;

const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default supabase;

5. Utilisation des hooks React pour interagir avec Supabase

Créez un fichier useSupabase.js pour créer des hooks personnalisés :

// src/useSupabase.js
import { useEffect, useState } from 'react';
import supabase from './supabase';

const useSupabase = (query) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data: resultData, error: err } = await query;

        if (err) {
          setError(err.message);
        } else {
          setData(resultData);
        }
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [query]);

  return { data, loading, error };
};

export default useSupabase;

Mise en pratique : projet fil rouge

Étape 1 : Création de l'application

Créez un fichier App.js pour la structure de votre application :

// src/App.js
import React from 'react';
import { useState } from 'react';
import supabase from './supabase';
import useSupabase from './useSupabase';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [taskText, setTaskText] = useState('');

  const fetchTasks = useSupabase(supabase.from('tasks').select('*'));

  useEffect(() => {
    if (fetchTasks.data) {
      setTasks(fetchTasks.data);
    }
  }, [fetchTasks.data]);

  const addTask = async () => {
    if (!taskText.trim()) return;

    try {
      await supabase
        .from('tasks')
        .insert([{ text: taskText, completed: false }]);
      setTaskText('');
    } catch (error) {
      console.error(error.message);
    }
  };

  const toggleComplete = async (id) => {
    try {
      await supabase
        .from('tasks')
        .update({ completed: !taskText.completed })
        .eq('id', id);
    } catch (error) {
      console.error(error.message);
    }
  };

  const deleteTask = async (id) => {
    try {
      await supabase.from('tasks').delete().eq('id', id);
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      <input
        type="text"
        value={taskText}
        onChange={(e) => setTaskText(e.target.value)}
        placeholder="Nouvelle tâche..."
      />
      <button onClick={addTask}>Ajouter</button>

      {fetchTasks.loading ? (
        <p>Chargement...</p>
      ) : fetchTasks.error ? (
        <p>{fetchTasks.error}</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id}>
              <span
                onClick={() => toggleComplete(task.id)}
                style=textDecoration: task.completed ? 'line-through' : ''
              >
                {task.text}
              </span>
              <button onClick={() => deleteTask(task.id)}>Supprimer</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

Étape 2 : Création de la base de données

Connectez-vous à votre projet Supabase et créez une nouvelle table tasks avec les champs suivants :

• id (SERIAL PRIMARY KEY)
• text (VARCHAR NOT NULL)
• completed (BOOLEAN DEFAULT FALSE)

Étape 3 : Exécution du projet

Assurez-vous que le serveur de développement React est en cours d'exécution :

npm start

Votre application devrait maintenant afficher une liste de tâches, avec des champs pour ajouter et supprimer des tâches.

Erreurs fréquentes et debugging

1. "Uncaught SyntaxError: Unexpected token"

Code incorrect :

const tasks = [
  { id: 1, text: 'Faire les courses', completed: false },
  { id: 2, text: 'Nettoyer la maison', completed: true }
];

Code correct :

const tasks = [
  { id: 1, text: 'Faire les courses', completed: false },
  { id: 2, text: 'Nettoyer la maison', completed: true }
];

2. "Failed to load resource: the server responded with a status of 403 (Forbidden)"

Code incorrect :

const query = supabase.from('tasks').select('*');

Code correct :

const query = supabase.auth.user() ? supabase.from('tasks').select('*') : null;

3. "TypeError: Cannot read property 'map' of null"

Code incorrect :

{ tasks.map((task) => (
  <li key={task.id}>
    {task.text}
  </li>
))}

Code correct :

{ fetchTasks.data ? tasks.map((task) => (
  <li key={task.id}>
    {task.text}
  </li>
)) : null }

Pour aller plus loin

1. Ajout d'authentification utilisateurs

Supabase offre une intégration facile pour l'authentification des utilisateurs. Vous pouvez utiliser les hooks useAuth et useSession pour ajouter une authentification basique à votre application.

2. Gestion des erreurs plus complexes

Ajoutez des notifications utilisateur pour informer sur les succès et les échecs des opérations de base de données.

3. Optimisation du rendu

Utilisez des techniques comme React.memo et la mémoïsation pour améliorer le rendu de votre application en évitant les re-rendus inutiles.

Défi pratique : Ajoutez une fonctionnalité d'édition des tâches dans l'application. Utilisez un champ input texte pour permettre aux utilisateurs de modifier le contenu d'une tâche existante et mettez à jour la base de données en conséquence.