Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

Menggunakan kombinasi React dan Firebase, Anda dapat menghasilkan aplikasi super responsif. Jika Anda sudah terbiasa dengan React, mempelajari cara mengintegrasikan Firebase adalah langkah bagus berikutnya.

Untuk memahami dasar-dasar penanganan data Firebase, Anda harus mempelajari cara memasangkan database Firestore dengan React untuk membuat aplikasi CRUD. Dengan menggunakan pengetahuan itu, Anda dapat mulai membuat aplikasi full-stack yang dapat diskalakan dengan sedikit atau nol kode backend.

Hubungkan Aplikasi React Anda ke Firebase Firestore

Jika Anda belum melakukannya, buka konsol Firebase dan sambungkan Firestore ke proyek React Anda.

Prosesnya mudah jika sudah membuat aplikasi React Anda.

Selanjutnya, buat yang baru firebase_setup direktori di dalam proyek Anda src map. Membuat firebase.js file di dalam folder ini. Rekatkan kode konfigurasi yang akan Anda dapatkan saat membuat proyek Firebase di dalam file baru:

instagram viewer 
impor { initializeApp } dari "firebase/aplikasi";
impor {getFirestore} dari "@firebase/firestore"
const firebaseConfig = {
kunci API: proses.env.REACT_APP_apiKey,
authDomain: proses.env.REACT_APP_authDomain,
projectId: proses.env.REACT_APP_projectId,
storageBucket: proses.env.REACT_APP_storageBucket,
messagingSenderId: proses.env.REACT_APP_messagingSenderId,
appId: proses.env.REACT_APP_appId,
pengukuranId: proses.env.REACT_APP_measurementId
};
const aplikasi = initializeApp (firebaseConfig);
eksporconst firestore = getFirestore (aplikasi)

Itu firestore variabel menyimpan lingkungan Firebase Firestore Anda. Anda akan menggunakan ini di seluruh aplikasi saat membuat permintaan API.

Meskipun kode ini menggunakan metode .env untuk menyembunyikan informasi konfigurasi, ada yang lebih baik cara menyimpan rahasia di React.

Sekarang, instal firebase Dan uuid pustaka di aplikasi React Anda. Meskipun uuid bersifat opsional, Anda dapat menggunakannya sebagai pengidentifikasi unik untuk setiap dokumen yang diposting ke database Firestore.

npm Install firebase uuid

Inilah demonstrasi dari apa yang akan Anda buat dengan React dan Firestore:

Tulis Data ke Database Firestore

Anda dapat menggunakan setDoc atau addDoc metode untuk menambahkan dokumen ke Firebase. Itu addDoc Keuntungan metode ini adalah menginstruksikan Firebase untuk menghasilkan ID unik untuk setiap record.

Untuk memulai, impor dependensi berikut ke App.js:

impor './App.css';
impor { useEffect, useState } dari 'reaksi';
impor { addDoc, koleksi, setDoc, deleteDoc, doc, kueri, onSnapshot } dari "firebase/firestore";
impor { toko api } dari './firebase_setup/firebase';
impor {v4 sebagai uuidv4 } dari 'uuid';

Sebelum melanjutkan, lihat struktur DOM dan status yang digunakan tutorial ini:

fungsiAplikasi() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(PALSU)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
const [id, setId] = useState([])
kembali (
<div namakelas="Aplikasi">
<membentuk>
<jenis masukan= "teks" nilai={detail} onChange={handledatachange} />
 {
 Apakah Pembaruan? (
<>
<button onClick={handlesubmitchange} type = "kirim">Memperbarui</button>
<tombol onClick={() => { setisUpdate (salah); setDetail("")}}>
 X
</button>
</>
 ): (<tombol onClick={submithandler} type="kirim">Menyimpan</button>)
 }
</form>


{info.peta((data, indeks)=>
<div key={ids[indeks]} className='wadah data' id='wadah data'>
<p namakelas='data' id='data' data-id ={ids[indeks]} key={ids[indeks]}>{data}</P>
<tombol namakelas='tombol hapus' id='tombol hapus' onClick={handledelete}>
Menghapus
</button>


<tombol namakelas='tombol perbarui' id='tombol perbarui' onClick={handleupdate}>
 Sunting
</button>
</div>
 )}
</div>
 );
}
eksporbawaan Aplikasi;

Selanjutnya, buat penangan pengiriman untuk menulis data ke database Firestore. Ini adalah sebuah onSubmit peristiwa. Jadi, Anda akan menggunakannya di tombol kirim.

Selain itu, buat pengendali perubahan. Acara ini mendengarkan perubahan di bidang formulir dan meneruskan input ke dalam array (file detail larik dalam hal ini). Ini masuk ke database.

const handledatachange = (e) => {
setDetail(e.target.nilai)
 };
const submithandler = (e) => {
e.preventDefault()
 const ref = koleksi (firestore, "test_data")


membiarkan data = {
 uuid: uuidv4(),
 testData: detail
 }


mencoba {
 addDoc (referensi, data)
 } menangkap(salah) {
menghibur.log (salah)
 }
setDetail("")
 }

Meskipun Firebase secara otomatis menghasilkan ID dokumen (kecuali jika Anda mencegahnya), kolom UUID juga berfungsi sebagai pengidentifikasi unik untuk setiap dokumen.

Baca Data Dari Database Firestore

Ambil data dari database Firestore di dalam useEffect hook menggunakan metode kueri Firestore:

 gunakanEfek(() => {
const getData = asinkron () => {
const data = menunggu kueri (koleksi (firestore, "test_data"));
onSnapshot (data, (querySnapshot) => {
const databaseInfo = [];
const dataId = []


querySnapshot.untuk setiap((dok) => {
info database.dorongan(dokter.data().testData);
dataId.dorongan(dokter.pengenal)
 });


setId (dataId)
 setInfo (databaseInfo)
 });
 }
getData()
 }, [])

Kode di atas menggunakan kueri Firebase untuk mendapatkan cuplikan data yang dikirimkan ke Firestore menggunakan onSnapshot fungsi.

Snapshot memungkinkan aplikasi Anda mendengarkan perubahan di backend. Itu memperbarui klien secara otomatis setiap kali seseorang menulis ke database.

Itu setInfo negara mengambil data di setiap dokumen. Anda akan memetakan melalui ini (the info array) saat merender ke DOM.

Itu setId status melacak semua ID dokumen (diteruskan sebagai ID Himpunan). Anda dapat menggunakan setiap ID untuk menjalankan kueri Hapus dan Perbarui pada setiap dokumen. Anda kemudian dapat meneruskan setiap ID dokumen sebagai atribut DOM sambil memetakan melalui info Himpunan.

Inilah penggunaan status dalam DOM (seperti yang ditunjukkan pada cuplikan kode sebelumnya):

Perbarui Data yang Ada di Firestore

Menggunakan setDoc metode untuk memperbarui dokumen atau bidang dalam dokumen.

Tentukan dua penangan untuk tindakan pembaruan. Satu menangani tombol kirim untuk data yang diedit (handlesubmitchange), sedangkan yang lainnya untuk tombol yang menulis ulang data ke kolom input untuk diedit (handleupdate):

const handleupdate = (e) => {
 setisPerbarui(BENAR)
setDetail(e.target.parentNode.anak-anak[0].textContent)
setdocId(e.target.parentNode.anak-anak[0].getAttribute(&kutipan;data-id&kutipan;))
};
const handlesubmitchange = asinkron (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'test_data', docId);


const updatedata = menunggu {
 testData: detail
 };


menunggusetDoc(docRef, perbaharui data, { menggabungkan:BENAR })
 .lalu (konsol.log("Data berhasil diubah"))
setisPerbarui(PALSU)
 setDetail("") 
}

Seperti yang ditunjukkan pada cuplikan kode sebelumnya, inilah rendering DOM untuk tindakan pembuatan dan pembaruan:

Itu handleupdate function menargetkan setiap ID dokumen di DOM menggunakan jalur simpulnya. Ini menggunakan ini untuk menanyakan setiap dokumen dari database untuk membuat perubahan. Tombol Edit menggunakan fungsi ini.

Jadi isUpdate (dilacak oleh setisUpdate negara) kembali BENAR ketika pengguna mengklik tombol Edit. Tindakan ini memunculkan tombol Perbarui, yang mengirimkan data yang diedit saat pengguna mengkliknya. Ekstra X tombol menutup tindakan edit saat diklik—dengan pengaturan isUpdate ke PALSU.

Jika isUpdate adalah PALSU, DOM mempertahankan tombol Simpan awal sebagai gantinya.

Hapus Data Dari Firestore

Anda dapat menghapus data yang ada dari Firestore menggunakan hapusDok metode. Seperti yang Anda lakukan untuk tindakan Perbarui, ambil setiap dokumen menggunakan ID uniknya dengan menargetkan atribut DOM menggunakan jalur node:

const handledelete = asinkron (e) => {
 const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("data-id"));
menunggu hapusDoc (docRef)
 .maka(() => {
menghibur.catatan(`${e.target.parentNode.children[0].textContent} telah berhasil dihapus.`)
 })
 .menangkap(kesalahan => {
menghibur.log (kesalahan);
 })
}

Lewati fungsi di atas ke tombol Hapus. Ini menghapus data dari database dan DOM saat pengguna mengkliknya.

Pasangkan Firebase Dengan Framework Frontend Terbaik Anda

Firebase membantu Anda menulis lebih sedikit kode saat Anda membuat kueri data langsung dari sisi klien. Selain Bereaksi, ini mendukung kerangka kerja JavaScript lainnya, termasuk Angular.js, Vue.js, dan banyak lainnya.

Sekarang setelah Anda melihat cara kerjanya dengan React, Anda mungkin juga ingin belajar memasangkannya dengan Angular.js.