React y Firestore: un tutorial completo—Parte 1
Saleh es un desarrollador web experimentado y utiliza su conocimiento y experiencia para guiar a las personas que quieren aprender programación web y nuevas tecnologías.
En este tutorial, aprenderemos cómo guardar y recuperar datos de Firestore, que es una base de datos Firebase NoSQL alojada en la nube. Guardaremos y recuperaremos datos de esta base de datos usando React JS.
Crear la base de datos de Firestore
Primero, debemos crear una nueva aplicación de Firebase y una base de datos de Firestore. Vaya a https://firebase.google.com/ y haga clic en Comenzar. Luego haga clic en agregar proyecto y complete los detalles requeridos.
Es posible que se le solicite que habilite Google Analytics en algún momento. No es necesario para este tutorial, así que siéntete libre de omitir este paso.
crear un proyecto
En su aplicación React junto al archivo js de su aplicación, cree un archivo llamado base de fuego.js. Esto contendrá nuestras claves API y credenciales.
Integrando Firebase en nuestra aplicación React
A continuación, necesitamos obtener el objeto webconfig de firebase. Vaya a la consola de Firebase y cree una nueva aplicación web haciendo clic en opción.
Crear una nueva aplicación web
Complete los detalles requeridos y luego haga clic en Registrar aplicación. A continuación, se le dará a usted firebaseconfig objeto. Copie estos datos, los usaremos en nuestro archivo firebase.js.
SDK
Luego, instale Firebase en su aplicación React usando el siguiente comando npm:
altitud y base de fuego
A continuación, en el tuyo base de fuego.js archivo, agregue el siguiente código:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "API_KEY",
authDomain: "AUTH_DOMAIN",
projectId: "PROJECT_ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "MESSAGING_SENDER_ID",
appId: "APP_ID"
}
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default db;En el código anterior, reemplace el objeto de configuración con el que copió anteriormente. En este archivo básicamente inicializamos Firebase y la base de datos de Firestore.
Crear la base de datos de Firestore
Vuelva a la consola de Firebase, cree una nueva base de datos de Firestore.
Desplácese hasta Continuar
Crear la base de datos de Firestore
Luego crea una nueva colección. Puedes llamar a esto como quieras. Llamémoslo «usuarios» por ahora. Luego cree un documento de prueba simple. Esto es básicamente un dato (un usuario individual en nuestro caso). También podemos configurar esto usando React más tarde.
Luego cambie los permisos para permitir lectura y escritura para que podamos ejecutar la aplicación en localhost.
Agregar datos a Firestore
Ahora veremos cómo agregar datos a nuestra base de datos de firestore. Primero en su archivo React, diga App.js, importe la base de datos desde el archivo firebase.js. Luego obtenga la colección de «usuarios» y luego cree un nuevo documento. Este nuevo documento puede ser el nombre de usuario o una identificación aleatoria, etc.
En nuestro caso, crearemos un nuevo documento llamado usuario1 y le agregaremos el nombre del usuario de esta manera:
import * as React from "react";
import db from "./firebase";
function App() {
const getData = async () => {
await db
.collection("users")
.doc("user1")
.set({ username: "John" });
};
getData();
return <div className="app"></div>;
}
export default App;Todo lo que hacemos aquí es crear un nuevo documento llamado usuario1 en la colección de «usuarios» y agregarle algunos datos.
getData() es una función asincrónica y de espera. Las palabras clave async y await permiten un comportamiento asincrónico basado en promesas. Cuando ejecutamos esta función y guardamos el archivo, los datos se agregarán a la base de datos.
Nota: el nombre del documento debe ser único, por lo que no podemos crear otro documento con el nombre usuario1.
Base de datos del almacén de incendios
Obtener datos de Firestore
Hay dos formas principales de lograr esto:
- Llame a un método para obtener los datos.
- Establecer un oyente para recibir eventos de cambio de datos
Veamos ambos métodos:
Método 1: Obtención de documentos
En este método, simplemente obtenemos un documento específico o varios documentos de una colección usando la función get(). Esto obtiene los datos una vez, lo que significa que no es en tiempo real. Si hay un cambio en la base de datos, deberá actualizar la página para verlos.
Aquí nuevamente usaremos una función de espera asíncrona y usaremos la función get () para obtener todos los documentos de la colección de «usuarios». La función get() devuelve un objeto y podemos recorrerlo y obtener los datos usando la función data() seguida del nombre del elemento.
import * as React from "react";
import db from "./firebase";
function App() {
const getData = async () => {
const docs = await db.collection("users").get();
docs.forEach((doc) => {
console.log(doc.data().username);
});
};
getData();
return <div className="app"></div>;
}
export default App;Como puede ver arriba, primero somos todos los documentos de la colección de usuarios. Luego recorremos el objeto para obtener el nombre de usuario de cada documento usando la función data().
Esto devolverá los nombres de usuario de todos los documentos en la función de usuarios.
También podemos obtener un único documento, por ejemplo usuario1 como tal. En este caso, no habría necesidad de usar una función forEach:
import * as React from "react";
import db from "./firebase";
function App() {
const getData = async () => {
const doc = await db
.collection("users")
.doc("user1")
.get();
console.log(doc.data().username);
};
getData();
return <div className="app"></div>;
}
export default App;Método 2: instantáneas
Puedes Estoy escuchando a un documento con el método onSnapshot(). Cuando se actualiza un documento, otra llamada actualiza la instantánea del documento. Esto significa que los datos se actualizan automáticamente y se muestran a los usuarios sin necesidad de actualizar la página.
Básicamente, usaremos la función onSnapshot en el la colección de usuarios. Cada una de las instantáneas resultantes contendrá una serie de documentos que podemos examinar como antes.
import * as React from "react";
import db from "./firebase";
function App() {
const getData = async () => {
const collection = db.collection("users");
collection.onSnapshot((querySnapShot) =>{
querySnapShot.forEach((doc) =>{
console.log(doc.data().username)
})
})
};
getData();
return <div className="app"></div>;
}
export default App;Conclusión
¡Aquí está!
Esperamos que hayas disfrutado este tutorial. En la siguiente parte, discutiremos cómo actualizar, eliminar y ordenar datos.
¡Gracias!
Este contenido es preciso y verdadero al leal saber y entender del autor y no pretende reemplazar el asesoramiento formal e individualizado de un profesional calificado.
