3USD tu primer mes de Premium 馃槺 Canjear promo No me interesa

notifications Notificaciones

Marcar todas como le铆das

Ver m谩s

lightbulb_outline

C贸mo integrar Firebase con React

timer 5 Min.

remove_red_eye 3571

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