React Uygulamanızı Firebase'e Nasıl Bağlarsınız?

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.

2022 Stack Overflow anketine göre, geliştiricilerin yüzde 21,14'ü Firebase kullanıyor ve bu da onu dördüncü en popüler bulut platformu yapıyor. Arka ucu sorunsuz bir şekilde entegre etmek için gelişen bir teknolojidir.

Firebase ile tek bir arka uç kodu yazmadan tam yığın bir uygulama geliştirebilirsiniz. React.js uygulamanızı bugün Firebase'e nasıl bağlayacağınızı öğrenin ve hareket halindeyken derleyin.

Firebase Paketini Kurun

Sonrasında React uygulamanızı oluşturma, dizini projenizin kök klasörüne değiştirin ve aşağıdakileri çalıştırarak Firebase paketini kurun:

npm düzenlemek ateş üssü

React Uygulamanızı Bir Firebase Projesine Ekleyin

Sonraki adım, bir Firebase projesi oluşturmak ve bunu React uygulamanıza bağlamaktır. Gitmek Firebase konsolu:

1. Tıklamak proje ekle yeni bir Firebase projesi başlatmak için.
2. Bir proje adı girin ve ardından Devam etmek.
3. Tıklamak Devam etmek sonraki sayfada.
4. Açılır menüden Firebase hesabınızı seçin veya tıklayın Yeni bir hesap oluştur zaten sahip değilseniz.
5. Son olarak tıklayın proje oluştur.
6. Tıklamak Devam etmek süreç tamamlandığında.
7. Ardından, Web simgesini () web için Firebase'i kurmak üzere sonraki sayfanın sol üst kısmına doğru.
8. Sağlanan alana uygulamanız için bir takma ad girin. Sonra tıklayın Uygulamayı kaydet.
9. Oluşturulan kodu kopyalayın ve sonraki adım için saklayın (bir sonraki bölümde ele alınmıştır).
10. Tıklamak Konsola devam et.
11. Aşağıdaki sayfada birçok seçenek var. Aşağı kaydırın ve seçin Bulut Firestore çünkü bu durumda sadece bir veritabanı kurmanız gerekiyor.
12. Sonra, tıklayın Veritabanı yarat.
13. Tıklamak Sonraki. Açılır menüden tercih ettiğiniz Firestore konumunu seçin.
14. Sonra tıklayın Olanak vermek bir Firestore veritabanı oluşturmak için.

Firebase'i React Uygulamanızda Başlatın

Projenizin içinde yeni bir klasör oluşturun kaynak dizin. Bunu firebase_setup olarak adlandırabilirsiniz. Ardından, bir firebase.js bu klasörün içindeki dosya. Ardından, daha önce oluşturulan kodu bu dosyaya yapıştırın.

Şimdilik, yapılandırma nesnesini (firebaseConfig) bir içinde saklayabilirsiniz. .env dosya. Ancak daha güvenli bir React sırlarını maskelemenin yolu üretimde. içinde sakladığınız veriler .env dosya, uygulama derlemenizde kolayca sızdırabilir.

Örneğin, uygulamanızın Firebase gizli anahtarını .env dosya:

REACT_APP_apiKey = FirebaseErişimAnahtarınız

Böylece, oluşturulan kodda aşağıdaki gibi ince ayar yapabilirsiniz:

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)

Firebase Bağlantınızı Test Edin

Sahte verileri Firestore'a göndererek bağlantıyı test edebilirsiniz. oluşturarak başlayın kolları projenizin içindeki klasör kaynak dizin. Bu dosyanın içinde bir gönderme işleyicisi oluşturun. bunu arayabilirsin handsubmit.js, örneğin:

içe aktarmak { addDoc, koleksiyon } itibaren "@firebase/firestore"
içe aktarmak { yangın deposu } itibaren "../firebase_setup/firebase"
sabit handleSubmit = (test verileri) => {
sabit ref = koleksiyon (firestore, "test_data") // Firebase bunu otomatik olarak oluşturur
izin vermek veri = {
 test Verisi: test verisi
 }
denemek {
 addDoc (ref, veri)
 } yakalamak(hata) {
konsol.log (hata)
 }
}
ihracatvarsayılan işlemeGönder

Sonra içeride Uygulama.js:

içe aktarmak './Uygulama.css';
içe aktarmak işlemeGönder itibaren './handles/handlesubmit';
içe aktarmak {kullanımRef} itibaren 'tepki';
işlevUygulama() {
sabit dataRef = useRef()
sabit gönderici = (e) => {
e.preventDefault()
işlemeGönder(veriRef.akım.değer)
 dataRef.current.value = ""
 }
geri dönmek (
<div sınıfıAdı="Uygulama">
<form onSubmit={gönderici}>
<giriş türü= "metin" ref={dataRef} />
<düğme türü = "göndermek">Kaydetmek</button>
</form>
</div>
 );
}
ihracatvarsayılan Uygulama;

React uygulamanızı çalıştırın ve form aracılığıyla veri göndermeyi deneyin. Koleksiyonunuzdaki gönderilen bilgileri görmek için Firebase veritabanı konsolunu yenileyin. Temel bilgiler yerine getirildiğinde, diğer birçok şeyi keşfedebilirsiniz. Firebase'in yapabileceği şeyler en iyi nasıl kullanılacağını görmek için.

Firebase ve Tepki ile Hareket Halinde Derleyin

Firebase, uygulamanızı etkili bir şekilde ölçeklendirmenizi sağlayan çok yönlü bir hizmet olarak arka uç çözümüdür. React uygulamanızı bağladıktan sonra, web sitenizi beğeninize göre oluşturmak için birçok özelliğinden yararlanabilirsiniz.

Örneğin, Firebase kimlik doğrulama araç seti, keşfetmek isteyebileceğiniz özelliklerden biridir.