Erstellen einer Firebase-basierten React-Anwendung: Ein umfassender Leitfaden für Entwickler

Firebase und React sind ein dynamisches Duo in der modernen Webentwicklungswelt. Firebase vereinfacht die Backend-Komplexität, während React eine unübertroffene Frontend-Effizienz bietet. In diesem Leitfaden wird Schritt für Schritt erläutert, wie Firebase in eine React-Anwendung integriert wird, und Entwicklern detaillierte Einblicke geboten.

Einführung

In diesem Tutorial erstellen wir eine Echtzeit-Aufgabenverwaltungsanwendung mit Firebase und React. Zu den Hauptmerkmalen gehören:

Authentifizierung: Firebase-Authentifizierung für Benutzeranmeldung/-registrierung.
Datenbank: Firestore zum Speichern von Aufgaben.
Hosting: Bereitstellung der App auf Firebase Hosting.

Voraussetzungen

Um mitzumachen, stellen Sie sicher, dass Sie Folgendes haben:

Grundkenntnisse von React und Firebase.

Node.js installiert.

Ein Firebase-Konto (kostenlose Stufe funktioniert einwandfrei).

Einrichten der Umgebung

1. React App initialisieren

Beginnen Sie mit der Erstellung einer React-App:

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

1. Firebase zu Ihrem Projekt hinzufügen

Firebase SDK installieren:

npm install firebase

Erstellen Sie ein Firebase-Projekt:

Gehen Sie zur Firebase-Konsole.

Klicken Sie auf „Projekt hinzufügen“ und befolgen Sie die Schritte.

Navigieren Sie nach der Erstellung zu Projekteinstellungen > Allgemein > Firebase SDK-Snippet und kopieren Sie die Konfiguration.

Firebase in React integrieren

1. Firebase-Konfiguration einrichten

Erstellen Sie eine firebase.js-Datei in 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); 

Gebäudemerkmale

1. Authentifizierung

Firebase Authentication vereinfacht die Benutzeranmeldung. Wir erstellen ein Anmelde- und Anmeldeformular.

Anmeldekomponente

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;  

Anmeldekomponente

Verfolgen Sie einen ähnlichen Ansatz, verwenden Sie jedoch signInWithEmailAndPassword für die Anmeldefunktion.

1. Firestore-Datenbank Erstellen wir eine Echtzeit-Aufgabenliste, in der Benutzer Aufgaben hinzufügen, bearbeiten und löschen können.

Aufgaben hinzufügen

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;

Aufgaben anzeigen

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;

Bereitstellung mit Firebase Hosting

1. Firebase Tools installieren

npm install -g firebase-tools

1. Hosting initialisieren

Führen Sie die folgenden Befehle aus:

firebase login  
firebase init hosting 

Wählen Sie Ihr Projekt aus.

Legen Sie das Build-Verzeichnis auf build fest.

1. Erstellen und Bereitstellen

npm run build
firebase deploy

Ihre App ist jetzt auf Firebase Hosting verfügbar!

Fazit

Herzlichen Glückwunsch! Sie haben mit Firebase und React eine Aufgabenverwaltungs-App erstellt, komplett mit Authentifizierung, Datenbankintegration und Hosting. Die nahtlose Integration von Firebase mit React ermöglicht leistungsstarke, skalierbare Anwendungen.

Treten Sie der Indie-Revolution bei
Sind Sie bereit, Ihr Spiel zu präsentieren? So können Sie loslegen:

? Besuchen Sie den Indie Games Showcase: https://gladiatorsbattle.com/indie-games
? Folgen Sie uns auf Twitter: https://x.com/GladiatorsBT

Bleiben Sie mit uns in Verbindung:
? https://discord.gg/YBNF7KjGwx | https://gladiatorsbattle.com/

Lasst uns die Indie-Gaming-Welt zu einem besseren Ort machen – ein Spiel nach dem anderen. ?✨

Das obige ist der detaillierte Inhalt vonErstellen einer Firebase-basierten React-Anwendung: Ein umfassender Leitfaden für Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!