Membina Aplikasi React Dikuasakan Firebase: Panduan Komprehensif untuk Pembangun

Firebase dan React ialah duo dinamik dalam dunia pembangunan web moden. Firebase memudahkan kerumitan bahagian belakang, manakala React menawarkan kecekapan bahagian hadapan yang tiada tandingan. Panduan ini meneroka cara untuk menyepadukan Firebase ke dalam aplikasi React langkah demi langkah, memberikan cerapan terperinci untuk pembangun.

Pengenalan

Dalam tutorial ini, kami akan mencipta aplikasi pengurusan tugasan masa nyata menggunakan Firebase dan React. Ciri utama termasuk:

Pengesahan: Pengesahan Firebase untuk log masuk/pendaftaran pengguna.
Pangkalan Data: Firestore untuk menyimpan tugas.
Pengehosan: Menggunakan apl di Firebase Hosting.

Prasyarat

Untuk mengikuti, pastikan anda mempunyai:

Pengetahuan asas tentang React dan Firebase.

Node.js dipasang.

Akaun Firebase (peringkat percuma berfungsi dengan baik).

Menyediakan Persekitaran

1. Mulakan Apl React

Mulakan dengan mencipta apl React:

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

1. Tambahkan Firebase pada Projek Anda

Pasang Firebase SDK:

npm pasang firebase

Buat projek Firebase:

Pergi ke Firebase Console.

Klik "Tambah Projek" dan ikut langkah.

Setelah dibuat, navigasi ke Tetapan Projek > Umum > Coretan SDK Firebase dan salin konfigurasi.

Menyepadukan Firebase ke dalam React

1. Sediakan Konfigurasi Firebase

Buat fail firebase.js dalam 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); 

Ciri Binaan

1. Pengesahan

Pengesahan Firebase memudahkan log masuk pengguna. Kami akan membuat borang pendaftaran dan log masuk.

Komponen Daftar

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;  

Komponen Log Masuk

Ikuti pendekatan yang serupa, tetapi gunakan signInWithEmailAndPassword untuk kefungsian log masuk.

1. Pangkalan Data Firestore Mari buat senarai tugasan masa nyata yang membolehkan pengguna menambah, mengedit dan memadamkan tugasan.

Menambah Tugasan

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;

Memaparkan Tugas

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;

Pengagihan dengan Firebase Hosting

1. Pasang Alat Firebase

npm install -g firebase-tools

1. Mulakan Pengehosan

Jalankan arahan berikut:

firebase login  
firebase init hosting 

Pilih projek anda.

Tetapkan direktori binaan untuk dibina.

1. Bina dan Pasang

npm run build
firebase deploy

Apl anda kini akan disiarkan secara langsung di Firebase Hosting!

Kesimpulan

Tahniah! Anda telah membina apl pengurusan tugas menggunakan Firebase dan React, lengkap dengan pengesahan, penyepaduan pangkalan data dan pengehosan. Penyepaduan lancar Firebase dengan React membolehkan aplikasi yang berkuasa dan berskala.

Sertai Revolusi Indie
Adakah anda bersedia untuk mempamerkan permainan anda? Begini cara anda boleh bermula:

? Lawati Pameran Permainan Indie: https://gladiatorsbattle.com/indie-games
? Ikuti kami di Twitter: https://x.com/GladiatorsBT

Kekal berhubung dengan kami:
? https://discord.gg/YBNF7KjGwx | https://gladiatorsbattle.com/

Mari jadikan dunia permainan indie tempat yang lebih baik—satu perlawanan pada satu masa. ?✨

Atas ialah kandungan terperinci Membina Aplikasi React Dikuasakan Firebase: Panduan Komprehensif untuk Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!