Aprende a integrar la base de datos de Firestore con tu aplicación de React, usando reactfire.
Configura tu app
Configura tu aplicación con las dependencias y estructuras necesarias para poder integrar React y Firebase.
Crear proyecto de React
Para comenzar, necesitas un proyecto de React configurado, si ya tienes uno puedes saltar este paso, si no, puedes usar una de las siguientes opciones:
- Iniciar un proyecto de React en Stackblitz
- Usar el generador de create-react-app
- Iniciar un proyecto en codesandbox
Configurar Firebase y reactfire
Instala las dependencias firebase
y reactfire
, para instalar el SDK de JavaScript para Firebase y la librería que integra Firebase con React respectivamente.
npm install reactfirenext firebase
Para poder seguir este tutorial necesitas una cuenta de Google y registrar un proyecto en la consola de Firebase.
Habilita Firestore en tu proyecto de Firebase
Para habilitar Firestore en tu proyecto de Firebase, selecciona la opción Database en el menú lateral de la consola de Firebase.
Si tienes experiencia con las reglas de seguridad para la base de datos en Firestore, selecciona la opción Empezar con el modo bloqueo
, si no, selecciona la opción Empezar con el modo de prueba
, asegúrate de cambiar tus reglas de seguridad al modo bloqueo antes de lanzar a producción.
Puedes hacer click en Iniciar colección
para crear una colección y asignarle datos iniciales que puedan servirte para validar que tu código está leyendo los datos correctamente.
Integra reactfire con tu app de React
reactfire
es una librería que integra el SDK de Firebase con la arquitectura basada en componentes de React.
Esta librería provee de hooks para conectar tus componentes de React con los servicios de Firebase, usa React context para proveer de la conexión a Firebase a cualquier componente dentro de <FirebaseAppProvider>
, usa <Suspense>
para colocar un fallback mientras tus componentes conectados a React cargan, entre otras cosas.
Configura tu aplicación de Firebase en React
Para poder usar Firebase con React, primero debes agregar un nuevo proyecto en la consola de Firebase de tu proyecto. Encontrarás la opción haciendo clic en Project Overview en el menú lateral de tu aplicación, justo debajo del nombre de tu proyecto hay una opción Añadir aplicación que puedes usar para añadir la aplicación.
Asegúrate de elegir la opción que dice Web identificado por un ícono con los caracteres </>
.
En la siguiente pantalla, agregarás un nombre para tu app, recuerda que múltiples proyectos de código pueden usar el mismo proyecto de FIrebase, este nombre te ayudará a identificar esta app de otras que pudieran compartir el mismo proyecto de Firebase.
Luego de hacer clic en Registrar aplicación aparecerá un bloque de código que puedes usar para integrar Firebase en cualquier cliente de JavaScript. Para nuestro proyecto con react sólo es necesario que copies el objeto firebaseConfig
.
Copia y pega este objeto en un archivo de JavaScript, asegúrate de exportarlo para luego utilizarlo en otras partes de tu aplicación de React.
export default {
apiKey: "AIzaSyA4v0E23-dZK9HXskasdrfsaZJNLS34FGQ",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://projectId.firebaseio.com",
projectId: "albumes-facilito-react",
storageBucket: "aprojectId.appspot.com",
messagingSenderId: "12356789101,
appId: "1:123456789101:web:3123be123456a123a456789"
};
Integrear reactfire con tu componente root
Para que todos tus componentes puedan conectarse a los servicios de Firebase, es importante que sean hijos del componente FirebaseAppProvider
de reactfire
, es por eso que se recomienda que tu componente root, normalmente App
esté dentro de FirebaseAppProvider
, de manera que todos los demás componentes de tu app también lo estén:
render(
(
<FirebaseAppProvider>
<App/>
</FirebaseAppProvider>
)
document.getElementById('root')
);
FirebaseAppProvider
espera recibir el objeto firebaseConfig
como un prop, para obtener las credenciales que le permitan conectarse a Firebase.
import firebaseConfig from './firebaseConfig'; //Este es el archivo que creaste con anterioridad que contiene las credenciales de Firebase
render(
(
<FirebaseAppProvider firebaseConfig={ firebaseConfig }>
<App/>
</FirebaseAppProvider>
)
document.getElementById('root')
);
Cuando conectes tus componentes de React con Firebase, éstos suspenderán su render hasta que la información de Firebase esté lista, esto puede provocar errores en el render de tu aplicación. Para solucionarlo, React provee de una API llamada Suspense que te permite mostrar un componente de cargado cuando tus demás componentes no están listos:
import firebaseConfig from './firebaseConfig'; //Este es el archivo que creaste con anterioridad que contiene las credenciales de Firebase
render(
(
<FirebaseAppProvider firebaseConfig={ firebaseConfig }>
<Suspense fallback={<p>Cargando...</p>}>
<App/>
</Suspense>
</FirebaseAppProvider>
)
document.getElementById('root')
);
Luego de seguir estos pasos, tu aplicación debe estar propiamente integrada con reactfire
y lista para usar alguno de los servicios de Firebase.
Cómo conectar tus componentes con Firestore
Una vez que tu componente FirebaseAppProvider
está configurado, cualquier hijo de este componente puede usar el hook useFirebaseApp
para conectarse a Firebase.
useFirebaseApp
Vamos a partir de un componente funcional vacío como el siguiente:
import React from 'react';
export default (props) => {
return(
<div></div>
)
}
Dentro usaremos el hook useFirebaseApp
para obtener la instancia de Firebase a partir de la cual podremos, entre otras cosas, conectarnos a Firestore:
export default (props) => {
const firebase = useFirebaseApp(); //Sólo funciona en componentes dentro de FirebaseAppProvider
return(
<div></div>
)
}
Conexión a Firestore
El SDK de Firebase está dividido en secciones dependiendo del servicio que quieras usar, de manera que no tienes que importar librerías que no necesites. Para usar el API de Firestore con el SDK de JavaScript de Firebase, impórtalo del paquete de Firebase que instalamos al principio del tutorial:
import React from 'react';
import 'firebase/firestore';
export default (props) => {
return(
<div></div>
)
}
Para consultar datos, de la base de datos de Firestore, podemos usar useFirestoreCollection
para consultar múltiples documentos de una colección o useFirestoreDoc
para consultar un documento en específico. En ambos casos necesitamos la referencia que Firebase guarda ya sea para la colección o para los documentos.
Puedes obtener la referencia de una colección o un documento, usando la instancia de firebase que obtuviste con useFirebaseApp
.
export default (props) => {
const firebase = useFirebaseApp(); //Sólo funciona en componentes dentro de FirebaseAppProvider
const videosRef = firebaseApp
.firestore()
.collection('videos'); // Obtiene la referencia de la colección videos en Firestore
return(
<div></div>
)
}
En este ejemplo, estás por obtener todos los documentos de la colección videos
, para hacerlo pasarás la referencia obtenida antes, al hook useFirestoreCollection
:
/* Ignoramos el resto del componente por brevedad */
const videosRef = firebaseApp
.firestore()
.collection('videos'); // Obtiene la referencia de la colección videos en Firestore
const videos = useFirestoreCollection(videosRef); // Retorna un QuerySnapshot
El resultado de la consulta, que está almacenado en videos
se actualizará automáticamente cada vez que un nuevo registro sea añadido o eliminado de la colección en la base de datos.
Para leer la información de los documentos, debes iterar los elementos dentro del arreglo docs
del resultado que retorna useFirestoreCollection
, para cada elemento ejecuta el método data
que devuelve el contenido de cada documento:
/* Ignoramos el resto del componente por brevedad */
const videosRef = firebaseApp
.firestore()
.collection('videos'); // Obtiene la referencia de la colección videos en Firestore
const videos = useFirestoreCollection(videosRef).docs.map(
d => ({id: d.id, ...d.data()})
);
Ahora puedes mostrar, la información de cada documento en tu componente con JSX:
import React from 'react';
import { useFirebaseApp, useFirestoreCollection } from 'reactfire';
import 'firebase/firestore';
export default (props) => {
const firebaseApp = useFirebaseApp();
const videosRef = firebaseApp
.firestore()
.collection('videos');
const videos = useFirestoreCollection(videosRef).docs.map(d => ({id: d.id, ...d.data()}));
return(
<ul>
{
videos.map(
(video) => <li key={video.id}>{video.title}</li>
)
}
</ul>
)
}
Recursos adicionales
Bootcamp Ciencia de Datos
12 semanas de formación intensiva en los conocimientos, fundamentos, y herramientas que necesitas para ser científico de datos