Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
React ve Firebase kombinasyonunu kullanarak süper duyarlı uygulamalar üretebilirsiniz. React'e zaten aşina iseniz, Firebase'i nasıl entegre edeceğinizi öğrenmek mükemmel bir sonraki adımdır.
Firebase'in veri işlemesinin temellerini anlamak için, bir CRUD uygulaması oluşturmak üzere Firestore veritabanını React ile nasıl eşleştireceğinizi öğrenmelisiniz. Bu bilgiyi kullanarak çok az veya sıfır arka uç koduyla ölçeklenebilir tam yığın uygulamalar oluşturmaya başlayabilirsiniz.
React Uygulamanızı Firebase Firestore'a Bağlayın
Henüz yapmadıysanız, Firebase konsoluna gidin ve Firestore'u React projenize bağlayın.
Zaten yaptıysanız işlem kolaydır React uygulamanızı oluşturdu.
Ardından, yeni bir firebase_setup projenizin içindeki dizin kaynak dosya. Oluşturmak firebase.js bu klasörün içindeki dosya. Bir Firebase projesi oluştururken alacağınız yapılandırma kodunu yeni dosyanın içine yapıştırın:
içe aktarmak { Uygulamayı başlat } itibaren "firebase/uygulama";
içe aktarmak {getFirestore} itibaren "@firebase/firestore"sabit firebaseConfig = {
apiKey: işlem.env.REACT_APP_apiKey,
authDomain: işlem.env.REACT_APP_authDomain,
proje kimliği: işlem.env.REACT_APP_projectId,
depolamaBucket: işlem.env.REACT_APP_storageBucket,
mesajlaşmaSenderId: işlem.env.REACT_APP_messagingSenderId,
uygulama kimliği: işlem.env.REACT_APP_appId,
ölçüm kimliği: işlem.env.REACT_APP_measurementId
};
sabit uygulama = Uygulamayı başlat (firebaseConfig);
ihracatsabit firestore = getFirestore (uygulama)
bu ateş deposu değişkeni, Firebase Firestore ortamınızı tutar. Bunu, API istekleri yaparken uygulama genelinde kullanacaksınız.
Bu kod, yapılandırma bilgilerini maskelemek için .env yöntemini kullansa da, daha iyi yöntemler vardır. React'te sır saklamanın yolları.
Şimdi, ateş üssü Ve uuid React uygulamanızdaki kitaplıklar. uuid isteğe bağlı olsa da, onu Firestore veritabanına gönderilen her belge için benzersiz bir tanımlayıcı olarak kullanabilirsiniz.
npm düzenlemek ateş üssü uuid
İşte React ve Firestore ile oluşturmak üzere olduğunuz şeyin bir gösterimi:
Firestore Veritabanına Veri Yazma
kullanabilirsiniz setDoc veya ek belge Firebase'e belge ekleme yöntemi. bu ek belge yöntemi, Firebase'e her kayıt için benzersiz bir kimlik oluşturma talimatı verme avantajına sahiptir.
Başlamak için aşağıdaki bağımlılıkları App.js'ye aktarın:
içe aktarmak './Uygulama.css';
içe aktarmak { useEffect, useState } itibaren 'tepki';
içe aktarmak { addDoc, koleksiyon, setDoc, deleteDoc, doc, sorgu, onSnapshot } itibaren "ateş üssü/yangın deposu";
içe aktarmak { yangın deposu } itibaren './firebase_setup/firebase';
içe aktarmak {v4 gibi uuidv4 } itibaren "sıvı";
Devam etmeden önce DOM yapısına ve bu öğreticinin kullandığı durumlara bakın:
işlevUygulama() {
sabit [bilgi, setInfo] = kullanımDevlet([])
sabit [isUpdate, setisUpdate] = useState(YANLIŞ)
const [docId, setdocId] = useState("")
const [detay, setDetail] = useState("")
sabit [ids, setIds] = useState([])geri dönmek (
<div sınıfıAdı="Uygulama">
<biçim>
<giriş türü= "metin" value={detail} onChange={handledatachange} />
{
Güncelleme mi? (
<>
<button onClick={handlesubmitchange} tür = "göndermek">Güncelleme</button>
<düğme onClick={() => { setisUpdate (yanlış); Ayrıntıları ayarla("")}}>
X
</button>
</>
): (<button onClick={submithandler} type="göndermek">Kaydetmek</button>)
}
</form>{info.map((veri, dizin)=>
<div key={ids[index]} className='veri kabı' kimlik='veri kabı'>
<p sınıfAdı='veri' kimlik='veri' data-id ={ids[index]} key={ids[index]}>{veri}</P>
<düğme className='silme düğmesi' kimlik='silme düğmesi' onClick={handledelete}>
Silmek
</button><düğme className='güncelleme düğmesi' kimlik='güncelleme düğmesi' onClick={handleupdate}>
Düzenlemek
</button>
</div>
)}
</div>
);
}
ihracatvarsayılan Uygulama;
Ardından, verileri Firestore veritabanına yazmak için bir gönderme işleyicisi oluşturun. Bu bir gönderildiğinde etkinlik. Yani onu gönder düğmesinde kullanacaksınız.
Ek olarak, bir değişiklik işleyici oluşturun. Bu olay, form alanındaki değişiklikleri dinler ve girdiyi bir diziye (diziye) iletir. detay dizi bu durumda). Bu veritabanına gider.
sabit handatatachange = (e) => {
ayrıntıları ayarla(e.hedef.değer)
};sabit gönderici = (e) => {
e.preventDefault()
const ref = koleksiyon (yangın deposu, "test verisi")izin vermek veri = {
uuid: uuidv4(),
testVeri: detay
}denemek {
addDoc (ref, veri)
} yakalamak(hata) {
konsol.log (hata)
}
Ayrıntıları ayarla("")
}
Firebase belge kimliklerini otomatik olarak oluştururken (siz engellemediğiniz sürece), UUID alanı aynı zamanda her belge için benzersiz bir tanımlayıcı görevi görür.
Firestore Veritabanından Verileri Oku
İçindeki Firestore veritabanından veri getir useEffect Firestore sorgu yöntemini kullanarak kancalayın:
useEffect(() => {
sabit getData = zaman uyumsuz () => {
sabit veri = beklemek sorgu (koleksiyon (firestore, "test_data"));onSnapshot (veri, (querySnapshot) => {
sabit veritabanıBilgisi = [];
sabit veri kimlikleri = []sorguSnapshot.her biri için((belge) => {
veritabanıBilgisi.itmek(doktor.veri().test verisi);
veri kimlikleri.itmek(doktor.İD)
});setId'ler (veri kimlikleri)
setInfo (veritabanıBilgisi)
});
}
getData()
}, [])
Yukarıdaki kod, Firestore'a gönderilen verilerin anlık görüntüsünü almak için Firebase sorgusunu kullanır. anlık görüntüde işlev.
Anlık görüntü, uygulamanızın arka uçtaki değişiklikleri dinlemesine olanak tanır. Birisi veritabanına her yazdığında istemciyi otomatik olarak günceller.
bu setInfo state her belgedeki verileri alır. Bunu haritalayacaksınız ( bilgi dizisi) DOM'a işlenirken.
bu setIds durum tüm belge kimliklerini izler (olarak geçirilen Kimlikler sıralamak). Her kimliği, her belgede Silme ve Güncelleme sorgularını çalıştırmak için kullanabilirsiniz. Daha sonra, her belge kimliğini bir DOM özniteliği olarak iletebilirsiniz. bilgi sıralamak.
İşte DOM içindeki durum kullanımı (önceki kod parçacığında gösterildiği gibi):
Firestore'da Mevcut Verileri Güncelleyin
Kullan setDoc bir belgeyi veya belgedeki bir alanı güncelleme yöntemi.
Güncelleme eylemi için iki işleyici tanımlayın. Biri, düzenlenen veriler için gönder düğmesini kullanır (işlemegönderimdeğişimi), diğeri ise verileri düzenlemek için giriş alanına yeniden yazan düğme içindir (işleme güncellemesi):
sabit tanıtıcı güncelleme = (e) => {
setisGüncelleme(doğru)
ayrıntıları ayarla(e.hedef.parentNode.çocuklar[0].Metin içeriği)
setdocId(e.hedef.parentNode.çocuklar[0].getAttribute(&alıntı;veri kimliği&alıntı;))
};sabit handsubmitchange = zaman uyumsuz (e) => {
e.preventDefault()
const docRef = doc (yangın deposu, 'test verisi', belge kimliği);sabit güncel veri = beklemek {
testVeri: detay
};beklemeksetDoc(belgeRef, veriyi güncelle, { birleştirmek:doğru })
.then (console.log("Veriler başarıyla değiştirildi"))
setisGüncelleme(YANLIŞ)
Ayrıntıları ayarla("")
}
Önceki kod parçacığında gösterildiği gibi, oluşturma ve güncelleme eylemleri için DOM oluşturma şu şekildedir:
bu işleme güncellemesi işlevi, düğüm yolunu kullanarak DOM'daki her belge kimliğini hedefler. Değişiklik yapması için veritabanındaki her belgeyi sorgulamak için bunu kullanır. Düzenle düğmesi bu işlevi kullanır.
Bu yüzden Güncelleme (takip edilen setisGüncelleme durum) döndürür doğru bir kullanıcı Düzenle düğmesini tıkladığında. Bu eylem, bir kullanıcı tıkladığında düzenlenen verileri gönderen Güncelle düğmesini getirir. Ekstra X düğmesi tıklandığında düzenleme eylemini kapatır—ayarlayarak Güncelleme ile YANLIŞ.
Eğer Güncelleme dır-dir YANLIŞ, DOM bunun yerine ilk Kaydet düğmesini korur.
Firestore'dan Verileri Sil
Kullanarak Firestore'daki mevcut verileri silebilirsiniz. silDoc yöntem. Güncelleme eylemi için yaptığınız gibi, düğüm yolunu kullanarak DOM özniteliğini hedefleyerek her belgeyi benzersiz kimliğini kullanarak alın:
sabit elele = zaman uyumsuz (e) => {
const docRef = doc (yangın deposu, 'test verisi', e.target.parentNode.children[0].getAttribute("veri kimliği"));
beklemek silDoc (docRef)
.sonra(() => {
konsol.kayıt(`${e.target.parentNode.children[0].Metin içeriği} başarıyla silindi.`)
})
.yakalamak(hata => {
konsol.log (hata);
})
}
Yukarıdaki işlevi Sil düğmesine iletin. Bir kullanıcı tıkladığında verileri veritabanından ve DOM'dan kaldırır.
Firebase'i En İyi Ön Uç Çerçevenizle Eşleştirin
Firebase, verileri doğrudan istemci tarafından sorgularken daha az kod yazmanıza yardımcı olur. React'in yanı sıra Angular.js, Vue.js ve diğerleri dahil olmak üzere diğer JavaScript çerçevelerini destekler.
Artık React ile nasıl çalıştığını gördüğünüze göre, onu Angular.js ile eşleştirmeyi de öğrenmek isteyebilirsiniz.
