notifications Notificaciones

Marcar todas como leídas

Ver más

lightbulb_outline

Cómo integrar Firebase con React

timer 5 Min.

remove_red_eye 427

calendar_today 22/10/19

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:

  1. Iniciar un proyecto de React en Stackblitz
  2. Usar el generador de create-react-app
  3. 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.

Captura de pantalla con la opción Database destacada 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.

Captura de pantalla con el asistente de configuración de Firestore

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.

Captura de pantall del formulario para registrar una nueva aplicación en la consola 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

Otros artículos del blog

Comunidad