DEV Community

loading...
Cover image for Como usar Firestore y React JS

Como usar Firestore y React JS

nelsonher019 profile image Nelson Adonis Hernandez Updated on ・1 min read

Para este ejemplo usaremos reactfire que es un libreria que nos facilita utilizar firebase en React JS

Lo primero sera importar el hook useFirestore

Ejemplo:

import React, { Fragment, useEffect } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();

  return (
    <Fragment>
    <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}
Enter fullscreen mode Exit fullscreen mode

Ahora lo mas tipico es que nosotros vamos hacer consultas para esto usaremos el hook useEffect.

Ahora porque de ultimo retornamos la constante subscriber? Es para que nuestra hook no sea infinito useEffect

//Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);
Enter fullscreen mode Exit fullscreen mode

Nuestro ejemplo quedaría de la siguiente manera

import React, { Fragment, useEffect, useState } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();
  const [Categorias, setCategorias] = useState([]);

  //Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);

  return (
    <Fragment>
         <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}

Enter fullscreen mode Exit fullscreen mode

Discussion (1)

pic
Editor guide
Collapse
ferueda profile image
Felipe Rueda

Buenísimo, me encanta Firebase! No conocía la librería reactfire, le echaré una mirada