React avec Firebase : guide pratique

Pourquoi React avec Firebase : guide pratique ?

React est un framework JavaScript populaire pour la construction d'interfaces utilisateur réactives et modernes. Firebase, de son côté, est une plateforme de développement full-stack qui permet aux développeurs de créer des applications web et mobiles en utilisant seulement le langage JavaScript.

En combinant React avec Firebase, vous pouvez créer des applications web performantes, sécurisées et faciles à mettre à jour. Le contexte réel dans lequel cela devient utile est lorsque vous avez besoin d'une application qui nécessite une base de données dynamique, des notifications en temps réel et des fonctionnalités d'authentification robustes.

Un cas d'utilisation concret serait un site de blog where les utilisateurs peuvent publier des articles, commentaires et recevoir des notifications pour les nouveaux articles. Firebase faciliterait le stockage des articles, la gestion des utilisateurs et l'intégration des notifications en temps réel.

Prerequis

• Connaissances en JavaScript ES6+
• Familiarité avec React
• Node.js (version 14.x ou plus tard)
• npm (Node Package Manager) (v6.x ou plus tard)
• Firebase CLI (Command Line Interface)

Pour installer Firebase CLI, exécutez la commande suivante dans votre terminal :

npm install -g firebase-tools

Concepts fondamentaux

1. Firebase Project Creation

Avant de commencer à utiliser Firebase avec React, vous devez créer un projet Firebase.

firebase login
firebase init

Suivez les instructions pour créer un nouveau projet ou choisir un existant.

2. Authentication with Firebase

Firebase offre plusieurs méthodes d'authentification comme Google, Facebook, email/password, etc.

Création d'un utilisateur avec email et mot de passe

import firebase from 'firebase/app';
import 'firebase/auth';

const auth = firebase.auth();

function signIn(email, password) {
  return auth.signInWithEmailAndPassword(email, password);
}

function signUp(email, password) {
  return auth.createUserWithEmailAndPassword(email, password);
}

3. Realtime Database with Firebase

Firebase Realtime Database est une base de données NoSQL qui stocke les données en tant que JSON.

Écriture et lecture de données

import firebase from 'firebase/app';
import 'firebase/database';

const database = firebase.database();

function writeUserData(userId, name, email) {
  database.ref('users/' + userId).set({
    username: name,
    email: email
  });
}

function readUserData(userId) {
  return database.ref('users/' + userId).once('value').then((snapshot) => {
    const data = snapshot.val();
    return data;
  });
}

4. Firestore with Firebase

Firebase Firestore est une base de données relationnelle NoSQL à l'échelle mondiale.

Écriture et lecture de documents

import firebase from 'firebase/app';
import 'firebase/firestore';

const db = firebase.firestore();

function addDocument(collection, data) {
  return db.collection(collection).add(data);
}

function getDocuments(collection) {
  return db.collection(collection).get();
}

5. Cloud Functions with Firebase

Firebase Cloud Functions vous permet de déployer des fonctions JavaScript qui s'exécutent sur le cloud.

Création d'une fonction simple

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

Mise en pratique : projet fil rouge - Gestionnaire de tâches

Étape 1 : Configuration du projet React

Créez un nouveau projet React :

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

Étape 2 : Installation des dépendances Firebase

npm install firebase @react-firebase/auth @react-firebase/firestore

Étape 3 : Configuration de Firebase dans le projet React

Créez un fichier firebase-config.js pour stocker vos informations de configuration Firebase :

// firebase-config.js
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

export default firebaseConfig;

Étape 4 : Authentification avec Firebase

Créez un composant Auth.js pour gérer l'authentification :

// src/Auth.js
import React, { useState } from 'react';
import firebase from './firebase-config';

function Auth() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);

  const signIn = async () => {
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button onClick={signIn}>Sign In</button>
      {error && <p>{error}</p>}
    </div>
  );
}

export default Auth;

Étape 5 : Gestion des tâches avec Firebase

Créez un composant TaskManager.js pour gérer les tâches :

// src/TaskManager.js
import React, { useState, useEffect } from 'react';
import firebase from './firebase-config';

function TaskManager() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase.firestore().collection('tasks').onSnapshot((querySnapshot) => {
      const tasks = [];
      querySnapshot.forEach((doc) => {
        tasks.push({ id: doc.id, ...doc.data() });
      });
      setTasks(tasks);
    });

    return () => unsubscribe();
  }, []);

  const addTask = async () => {
    await firebase.firestore().collection('tasks').add({
      task,
      completed: false
    });
    setTask('');
  };

  return (
    <div>
      <input type="text" value={task} onChange={(e) => setTask(e.target.value)} placeholder="Add a new task" />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((t) => (
          <li key={t.id}>
            {t.task}
            <input type="checkbox" checked={t.completed} onChange={() => console.log('Toggle complete')} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskManager;

Étape 6 : Intégration des composants

Modifiez le fichier App.js pour intégrer les composants Auth et TaskManager :

// src/App.js
import React from 'react';
import Auth from './Auth';
import TaskManager from './TaskManager';

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged((authUser) => {
      setUser(authUser);
    });
  }, []);

  if (!user) return <Auth />;

  return (
    <div>
      <h1>Task Manager</h1>
      <TaskManager />
    </div>
  );
}

export default App;

Erreurs frequentes et debugging

1. firebase.auth().currentUser is null

Le problème est que vous essayez d'accéder à l'utilisateur courant avant qu'il ne soit authentifié.

// ❌ Mauvais
const user = firebase.auth().currentUser;

// ✅ Correct
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user);
  } else {
    console.log('No user is signed in');
  }
});

2. Task not found

Lorsque vous essayez d'accéder à un document qui n'existe pas, Firebase retourne une erreur.

// ❌ Mauvais
const doc = db.collection('tasks').doc('nonExistentId').get();

// ✅ Correct
db.collection('tasks')
  .doc('nonExistentId')
  .get()
  .then((doc) => {
    if (doc.exists) {
      console.log(doc.data());
    } else {
      console.log('No such document!');
    }
  });

3. Uncaught TypeError: Cannot read property 'set' of undefined

Vous essayez d'utiliser la méthode set sur une collection qui n'existe pas.

// ❌ Mauvais
db.collection('users').doc(user.uid).set({
  name: 'John Doe'
});

// ✅ Correct
if (!firebase.firestore().collection('users').doc(user.uid).exists) {
  db.collection('users').doc(user.uid).set({
    name: 'John Doe'
  });
} else {
  console.log('User already exists');
}

Pour aller plus loin

1. Authentification avec Google et Facebook : Intégrez des méthodes d'authentification sociales pour une meilleure expérience utilisateur.
2. Notifications Firebase : Ajoutez des notifications push pour informer les utilisateurs de nouvelles tâches.
3. Cloud Functions avancées : Créez des fonctions pour gérer les tâches asynchrones et complexe.

Défi pratique

Implémentez une fonction Firebase Cloud Function qui envoie un email d'invitation à un nouveau projet à tous les membres de l'équipe.

Ce guide vous permet de démarrer avec la combinaison de React et Firebase pour créer des applications modernes et performantes.