Cum să vă conectați aplicația React la Firebase

Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Conform sondajului Stack Overflow din 2022, 21,14% dintre dezvoltatori folosesc Firebase, ceea ce o face a patra cea mai populară platformă cloud. Este o tehnologie în evoluție pentru integrarea perfectă a backend-ului.

Cu Firebase, puteți dezvolta o aplicație full-stack fără a scrie o singură linie de cod backend. Aflați cum să vă conectați aplicația React.js la Firebase astăzi și să construiți din mers.

Instalați pachetul Firebase

După crearea aplicației React, schimbați directorul în folderul rădăcină al proiectului și instalați pachetul Firebase rulând:

npm instalare baza de foc

Adăugați aplicația dvs. React la un proiect Firebase

Următorul pas este să creați un proiect Firebase și să-l conectați cu aplicația React. Du-te la Consola Firebase:

1. Clic Adăugați proiect pentru a începe un nou proiect Firebase.
2. Introduceți un nume de proiect, apoi faceți clic Continua.
3. Clic Continua pe pagina următoare.
4. Selectați contul Firebase din meniul drop-down sau faceți clic Creați un cont nou dacă nu ai deja unul.
5. În cele din urmă, faceți clic Creați proiect.
6. Clic Continua odată ce procesul se încheie.
7. Apoi, faceți clic pe pictograma Web () în partea din stânga sus a paginii următoare pentru a configura Firebase pentru web.
8. Introduceți o poreclă pentru aplicația dvs. în câmpul furnizat. Apoi apasa Înregistrați aplicația.
9. Copiați codul generat și păstrați-l pentru următorul pas (discutat în secțiunea următoare).
10. Clic Continuați la consolă.
11. Există multe opțiuni pe pagina următoare. Derulați în jos și selectați Cloud Firestore deoarece trebuie doar să configurați o bază de date în acest caz.
12. Apoi, faceți clic Creați o bază de date.
13. Clic Următorul. Selectați locația Firestore preferată din meniul drop-down.
14. Apoi apasa Permite pentru a crea o bază de date Firestore.

Inițializați Firebase în aplicația dvs. React

Creați un folder nou în proiectul dvs src director. Puteți apela acest lucru firebase_setup. Apoi, creați un firebase.js fișierul din acel folder. Apoi lipiți codul generat mai devreme în acest fișier.

Pentru moment, puteți stoca obiectul de configurare (firebaseConfig) în interiorul unui .env fişier. Dar luați în considerare utilizarea unui sistem mai sigur mod de a masca secretele React in productie. Datele pe care le stocați într-un .env fișierul se poate scurge cu ușurință în versiunea aplicației dvs.

De exemplu, pentru a introduce cheia secretă Firebase a aplicației dvs. în .env fişier:

REACT_APP_apiKey = yourFirebaseAccessKey

Astfel, puteți regla fin codul generat după cum urmează:

import { initializeApp } din „firebase/aplicație”;
import { getFirestore } din „@firebase/firestore”
const firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
găleată de depozitare: proces.env.REACT_APP_storageBucket,
mesajeSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
măsurareId: proces.env.REACT_APP_measurementId
};
const app = initializeApp (firebaseConfig);
exportconst firestore = getFirestore (aplicație)

Testați-vă conexiunea Firebase

Puteți testa conexiunea trimițând date fictive la Firestore. Începeți prin a crea un mânere folderul din interiorul proiectului dvs src director. Creați un handler de trimitere în interiorul acestui fișier. Puteți numi asta handlesubmit.js, de exemplu:

import { addDoc, colecție } din „@firebase/firestore”
import { firestore } din „../firebase_setup/firebase”
const handleSubmit = (date test) => {
const ref = colecție (firestore, "test_data") // Firebase creează acest lucru automat
lăsa date = {
 testData: testdata
 }
încerca {
 addDoc (ref, date)
 } captură(eroare) {
consolă.log (eroare)
 }
}
exportMod implicit handleSubmit

Apoi înăuntru App.js:

import './App.css';
import handleSubmit din './handles/handlesubmit';
import { useRef } din 'reacţiona';
funcţieApp() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dateRef.actual.valoare)
 dataRef.current.value = ""
 }
întoarcere (
<div className="App">
<form onSubmit={submithandler}>
<tip de intrare= "text" ref={dataRef} />
<tipul butonului = "Trimite">Salvați</button>
</form>
</div>
 );
}
exportMod implicit Aplicație;

Rulați aplicația React și încercați să trimiteți date prin formular. Actualizează consola bazei de date Firebase pentru a vedea informațiile trimise în colecția ta. Cu elementele de bază la locul lor, puteți explora multe altele lucruri pe care Firebase le poate face pentru a vedea cum să-l folosești cel mai bine.

Construiește din mers cu Firebase și React

Firebase este o soluție versatilă backend-as-a-service care vă permite să vă scalați aplicația în mod eficient. După ce vă conectați aplicația React, puteți profita de numeroasele sale funcții pentru a vă construi site-ul pe placul dvs.

De exemplu, setul de instrumente de autentificare Firebase este una dintre funcțiile pe care ați putea dori să le explorați.