Utilizza Firebase per l'archiviazione dei dati di back-end e sviluppa app semplici con facilità.
I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Secondo il sondaggio Stack Overflow del 2022, il 21,14% degli sviluppatori utilizza Firebase, rendendola la quarta piattaforma cloud più popolare. È una tecnologia in evoluzione per integrare perfettamente il back-end.
Con Firebase, puoi sviluppare un'applicazione full-stack senza scrivere una singola riga di codice di backend. Scopri come connettere la tua applicazione React.js con Firebase oggi stesso e creare ovunque ti trovi.
Installa il pacchetto Firebase
Dopo creando la tua app React, cambia la directory nella cartella principale del tuo progetto e installa il pacchetto Firebase eseguendo:
npm installare base di fuoco
Aggiungi la tua app React a un progetto Firebase
Il passaggio successivo consiste nel creare un progetto Firebase e collegarlo alla tua app React. Vai al
Console Firebase:- Clic Aggiungi progetto per avviare un nuovo progetto Firebase.
- Immettere un nome per il progetto, quindi fare clic su Continua.
- Clic Continua nella pagina successiva.
- Seleziona il tuo account Firebase dal menu a discesa o fai clic su Creare un nuovo account se non ne hai già uno.
- Infine, fai clic Crea progetto.
- Clic Continua una volta completato il processo.
- Successivamente, fai clic sull'icona Web () in alto a sinistra della pagina seguente per configurare Firebase per il Web.
- Inserisci un nickname per la tua app nel campo fornito. Quindi fare clic Registra l'app.
- Copia il codice generato e conservalo per il passaggio successivo (discusso nella sezione seguente).
- Clic Continua alla console.
- Ci sono molte opzioni nella pagina seguente. Scorri verso il basso e seleziona CloudFirestore poiché in questo caso è sufficiente impostare un database.
- Quindi, fai clic Crea banca dati.
- Clic Prossimo. Seleziona la tua posizione Firestore preferita dal menu a discesa.
- Quindi fare clic Abilitare per creare un database Firestore.
Inizializza Firebase nella tua app React
Crea una nuova cartella all'interno del tuo progetto src directory. Puoi chiamare questo file firebase_setup. Quindi, crea un file firebase.js file all'interno di quella cartella. Quindi incolla il codice generato in precedenza in questo file.
Per ora, puoi archiviare l'oggetto di configurazione (firebaseConfig) all'interno di a .env file. Ma considera l'utilizzo di un file più sicuro modo per mascherare i segreti di React in produzione. I dati che memorizzi in un file .env file può facilmente trapelare nella build della tua app.
Se si utilizza l'opzione .env, aggiungere "REACT_APP" a ciascun nome di variabile all'interno .env. In caso contrario, la tua app non leggerà le stringhe. Inoltre, riavvia il tuo server React ogni volta che modifichi i dettagli nel file .env file.
Ad esempio, per inserire la chiave segreta Firebase della tua app nel file .env file:
REACT_APP_apiKey = la tuaFirebaseAccessKey
Pertanto, è possibile ottimizzare il codice generato come segue:
importare { inizializzaApp } da "firebase/app";
importare { getFirestore } da "@firebase/firestore"
cost firebaseConfig = {
apiKey: processi.env.REACT_APP_apiKey,
authDomain: processi.env.REACT_APP_authDomain,
ID progetto: processi.env.REACT_APP_projectId,
storageBucket: processi.env.REACT_APP_storageBucket,
messaggisticaSenderId: processi.env.REACT_APP_messagingSenderId,
appId: processi.env.REACT_APP_IDapp,
ID misurazione: processi.env.REACT_APP_measurementId
};
cost app = initializeApp (firebaseConfig);
esportarecost firestore = getFirestore (app)Metti alla prova la tua connessione Firebase
Puoi testare la connessione inviando dati fittizi a Firestore. Inizia creando un maniglie cartella all'interno del tuo progetto src directory. Crea un gestore di invio all'interno di questo file. Puoi chiamare questo handlesubmit.js, ad esempio:
importare { addDoc, collezione } da "@firebase/firestore"
importare { firestore } da "../firebase_setup/firebase"cost handleSubmit = (testdata) => {
cost ref = raccolta (firestore, "test_data") // Firebase lo crea automaticamentepermettere dati = {
testData: dati di test
}Tentativo {
addDoc (rif, dati)
} presa(errare) {
consolare.log (errore)
}
}
esportarepredefinito handleSubmit
Poi dentro App.js:
importare './App.css';
importare handleSubmit da './handles/handlesubmit';
importare { usoRif } da 'reagire';funzioneApp() {
cost dataRef = useRef()cost submithandler = (e) => {
e.preventPredefinito()
handleSubmit(datiRif.attuale.valore)
dataRef.current.value = ""
}ritorno (
<nomeclasse div="App">
<modulo onSubmit={submithandler}>
<tipo di input= "testo" ref={dataRef} />
<tipo di pulsante = "invia">Salva</button>
</form>
</div>
);
}
esportarepredefinito Applicazione;
Esegui la tua app React e prova a inviare i dati tramite il modulo. Aggiorna la console del database Firebase per visualizzare le informazioni inviate nella tua raccolta. Con le basi in atto, puoi esplorarne molte altre cose che Firebase può fare per vedere come usarlo al meglio.
Crea in movimento con Firebase e reagisci
Firebase è una versatile soluzione back-end-as-a-service che ti consente di ridimensionare la tua app in modo efficace. Una volta collegata la tua app React, puoi sfruttare le sue numerose funzionalità per creare il tuo sito web a tuo piacimento.
Ad esempio, il toolkit di autenticazione Firebase è una delle funzionalità che potresti voler esplorare.
