Création d'une application React basée sur Firebase : un guide complet pour les développeurs

Firebase et React forment un duo dynamique dans le monde moderne du développement Web. Firebase simplifie les complexités du backend, tandis que React offre une efficacité frontale inégalée. Ce guide explique étape par étape comment intégrer Firebase dans une application React, fournissant des informations détaillées aux développeurs.

Présentation

Dans ce tutoriel, nous allons créer une application de gestion de tâches en temps réel à l'aide de Firebase et React. Les principales fonctionnalités incluent :

Authentification : authentification Firebase pour la connexion/l'inscription des utilisateurs.
Base de données : Firestore pour stocker les tâches.
Hébergement : Déploiement de l'application sur Firebase Hosting.

Prérequis

Pour suivre, assurez-vous d'avoir :

Connaissance de base de React et Firebase.

Node.js installé.

Un compte Firebase (le niveau gratuit fonctionne très bien).

Configuration de l'environnement

1. Initialiser l'application React

Commencez par créer une application React :

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

1. Ajoutez Firebase à votre projet

Installer le SDK Firebase :

npm installer Firebase

Créez un projet Firebase :

Accédez à la console Firebase.

Cliquez sur « Ajouter un projet » et suivez les étapes.

Une fois créé, accédez à Paramètres du projet > Général > Extrait du SDK Firebase et copiez la configuration.

Intégrer Firebase dans React

1. Configurer la configuration de Firebase

Créez un fichier firebase.js dans src/:

import { initializeApp } from "firebase/app";  
import { getAuth } from "firebase/auth";  
import { getFirestore } from "firebase/firestore";  

const firebaseConfig = {  
  apiKey: "YOUR_API_KEY",  
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",  
  projectId: "YOUR_PROJECT_ID",  
  storageBucket: "YOUR_PROJECT_ID.appspot.com",  
  messagingSenderId: "YOUR_SENDER_ID",  
  appId: "YOUR_APP_ID"  
};  

const app = initializeApp(firebaseConfig);  
export const auth = getAuth(app);  
export const db = getFirestore(app); 

Caractéristiques du bâtiment

1. Authentification

L'authentification Firebase simplifie la connexion des utilisateurs. Nous allons créer un formulaire d'inscription et de connexion.

Composant d'inscription

import React, { useState } from "react";  
import { auth } from "../firebase";  
import { createUserWithEmailAndPassword } from "firebase/auth";  

function SignUp() {  
  const [email, setEmail] = useState("");  
  const [password, setPassword] = useState("");  

  const handleSignUp = async () => {  
    try {  
      await createUserWithEmailAndPassword(auth, email, password);  
      alert("User Registered Successfully");  
    } catch (error) {  
      alert(error.message);  
    }  
  };  

  return (  
    <div>  
      <h2>Sign Up</h2>  
      <input  
        type="email"  
        placeholder="Email"  
        value={email}  
        onChange={(e) => setEmail(e.target.value)}  
      />  
      <input  
        type="password"  
        placeholder="Password"  
        value={password}  
        onChange={(e) => setPassword(e.target.value)}  
      />  
      <button onClick={handleSignUp}>Sign Up</button>  
    </div>  
  );  
}  

export default SignUp;  

Composant de connexion

Suivez une approche similaire, mais utilisez signInWithEmailAndPassword pour la fonctionnalité de connexion.

1. Base de données Firestore Créons une liste de tâches en temps réel où les utilisateurs peuvent ajouter, modifier et supprimer des tâches.

Ajout de tâches

import { db } from "../firebase";  
import { collection, addDoc } from "firebase/firestore";  

function AddTask() {  
  const [task, setTask] = useState("");  

  const handleAddTask = async () => {  
    try {  
      await addDoc(collection(db, "tasks"), {  
        name: task,  
        completed: false,  
      });  
      setTask("");  
    } catch (error) {  
      console.error("Error adding document: ", error);  
    }  
  };  

  return (  
    <div>  
      <input  
        type="text"  
        placeholder="Add Task"  
        value={task}  
        onChange={(e) => setTask(e.target.value)}  
      />  
      <button onClick={handleAddTask}>Add Task</button>  
    </div>  
  );  
}  

export default AddTask;

Affichage des tâches

import { useEffect, useState } from "react";  
import { db } from "../firebase";  
import { collection, onSnapshot } from "firebase/firestore";  

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

  useEffect(() => {  
    const unsubscribe = onSnapshot(collection(db, "tasks"), (snapshot) => {  
      setTasks(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));  
    });  
    return () => unsubscribe();  
  }, []);  

  return (  
    <ul>  
      {tasks.map((task) => (  
        <li key={task.id}>{task.name}</li>  
      ))}  
    </ul>  
  );  
}  

export default TaskList;

Déploiement avec Firebase Hosting

1. Installer les outils Firebase

npm install -g firebase-tools

1. Initialiser l'hébergement

Exécutez les commandes suivantes :

firebase login  
firebase init hosting 

Sélectionnez votre projet.

Définissez le répertoire de build sur build.

1. Construire et déployer

npm run build
firebase deploy

Votre application sera désormais disponible sur Firebase Hosting !

Conclusion

Félicitations ! Vous avez créé une application de gestion de tâches à l'aide de Firebase et React, avec authentification, intégration de base de données et hébergement. L'intégration transparente de Firebase avec React permet des applications puissantes et évolutives.

Rejoignez la révolution indépendante
Êtes-vous prêt à présenter votre jeu ? Voici comment commencer :

? Visitez la vitrine des jeux indépendants : https://gladiatorsbattle.com/indie-games
? Suivez-nous sur Twitter : https://x.com/GladiatorsBT

Restez connecté avec nous :
? https://discord.gg/YBNF7KjGwx | https://gladiatorsbattle.com/

Faisons du monde du jeu indépendant un meilleur endroit, un jeu à la fois. ?✨

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!