Cara Menghubungkan Aplikasi React Anda ke Firebase

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

Menurut survei Stack Overflow 2022, 21,14 persen developer menggunakan Firebase, menjadikannya platform cloud terpopuler keempat. Ini adalah teknologi yang berkembang untuk mengintegrasikan backend dengan mulus.

Dengan Firebase, Anda dapat mengembangkan aplikasi full-stack tanpa menulis satu baris pun kode backend. Pelajari cara menghubungkan aplikasi React.js Anda dengan Firebase hari ini dan mem-build di mana saja.

Instal Paket Firebase

Setelah membuat aplikasi React Anda, ubah direktori ke folder root proyek Anda dan instal paket Firebase dengan menjalankan:

npm Install firebase

Tambahkan Aplikasi React Anda ke Proyek Firebase

Langkah selanjutnya adalah membuat proyek Firebase dan menautkannya dengan aplikasi React Anda. Pergi ke Konsol Firebase:

1. Klik Tambahkan proyek untuk memulai proyek Firebase baru.
2. Masukkan nama proyek, lalu klik Melanjutkan.
3. Klik Melanjutkan di halaman berikutnya.
4. Pilih akun Firebase Anda dari dropdown atau klik Buat akun baru jika Anda belum memilikinya.
5. Terakhir, klik Buat proyek.
6. Klik Melanjutkan setelah proses selesai.
7. Selanjutnya, klik ikon Web () di kiri atas halaman berikut untuk menyiapkan Firebase untuk web.
8. Masukkan nama panggilan untuk aplikasi Anda di bidang yang tersedia. Lalu klik Daftarkan aplikasi.
9. Salin kode yang dihasilkan dan simpan untuk langkah berikut (dibahas di bagian berikut).
10. Klik Lanjutkan ke konsol.
11. Ada banyak pilihan di halaman berikutnya. Gulir ke bawah dan pilih Toko Api Awan karena Anda hanya perlu menyiapkan database dalam kasus ini.
12. Selanjutnya, klik Buat basis data.
13. Klik Berikutnya. Pilih lokasi Firestore pilihan Anda dari dropdown.
14. Lalu klik Memungkinkan untuk membuat database Firestore.

Inisialisasi Firebase di Aplikasi React Anda

Buat folder baru di dalam proyek Anda src direktori. Anda dapat memanggil firebase_setup ini. Selanjutnya, buat a firebase.js file di dalam folder itu. Kemudian rekatkan kode yang dihasilkan sebelumnya ke dalam file ini.

Untuk saat ini, Anda dapat menyimpan objek konfigurasi (firebaseConfig) di dalam a .env mengajukan. Tapi pertimbangkan untuk menggunakan yang lebih aman cara untuk menutupi rahasia React dalam produksi. Data yang Anda simpan di a .env file dapat dengan mudah bocor di build aplikasi Anda.

Misalnya, untuk memasukkan kunci rahasia Firebase aplikasi Anda di .env mengajukan:

REACT_APP_apiKey = FirebaseAccessKey Anda

Dengan demikian, Anda dapat menyempurnakan kode yang dihasilkan sebagai berikut:

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)

Uji Koneksi Firebase Anda

Anda dapat menguji koneksi dengan mengirimkan data dummy ke Firestore. Mulailah dengan membuat a pegangan folder di dalam proyek Anda src direktori. Buat penangan kirim di dalam file ini. Anda bisa menelepon ini handlesubmit.js, contohnya:

impor { addDoc, koleksi } dari "@firebase/firestore"
impor { toko api } dari "../firebase_setup/firebase"
const handleSubmit = (testdata) => {
const ref = koleksi (firestore, "test_data") // Firebase membuat ini secara otomatis
membiarkan data = {
 testData: testdata
 }
mencoba {
 addDoc (referensi, data)
 } menangkap(salah) {
menghibur.log (salah)
 }
}
eksporbawaan handleSubmit

Lalu di dalam Aplikasi.js:

impor './App.css';
impor handleSubmit dari './handles/handlesubmit';
impor { gunakanRef } dari 'reaksi';
fungsiAplikasi() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.saat ini.nilai)
 dataRef.current.value = ""
 }
kembali (
<div namakelas="Aplikasi">
<formulir onSubmit={submithandler}>
<jenis masukan= "teks" ref={dataRef} />
<jenis tombol = "kirim">Menyimpan</button>
</form>
</div>
 );
}
eksporbawaan Aplikasi;

Jalankan aplikasi React Anda dan coba kirimkan data melalui formulir. Muat ulang konsol basis data Firebase untuk melihat informasi yang dikirimkan dalam koleksi Anda. Dengan dasar-dasarnya, Anda dapat menjelajahi banyak hal lainnya hal-hal yang dapat dilakukan Firebase untuk melihat cara terbaik untuk menggunakannya.

Build on the Go With Firebase dan React

Firebase adalah solusi backend-as-a-service serbaguna yang memungkinkan Anda menskalakan aplikasi secara efektif. Setelah Anda menghubungkan aplikasi React Anda, Anda dapat memanfaatkan banyak fiturnya untuk membuat situs web sesuai keinginan Anda.

Misalnya, alat autentikasi Firebase adalah salah satu fitur yang mungkin ingin Anda jelajahi.