¿Cómo realizar búsqueda y envío con Firestore usando ReactJS?

En este artículo, aprenderemos cómo obtener datos de Firestore y mostrarlos dentro de una aplicación React. Firestore es una base de datos NoSQL desarrollada por Google como alternativa a la base de datos firebase. Ha sido diseñado para proporcionar una mejor experiencia de desarrollador y simplificar el proceso de desarrollo. Los siguientes pasos demuestran el proceso de creación de la aplicación.

Paso 1: Cree una nueva aplicación React. Usamos create-react-app para crear nuestra aplicación.

npx create-react-app gfgfirestore

Paso 2: Instale el paquete firebase en el proyecto usando npm.

npm install firebase@8.3.1 --save

Paso 3: cree un nuevo proyecto desde el panel de control de Firebase completando los detalles necesarios y verifique el formato de los datos que se almacenan en Firestore. En este ejemplo, tenemos un objeto en el que nombre , edad y curso inscrito son los campos en los que se almacenan los datos.

Paso 4: inicialice Firebase en el proyecto copiando las credenciales relevantes del panel de control de Firebase.

import firebase from 'firebase';
  
var firebaseConfig = {
    // Firebase credentials
  };
    
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
  
export default db;

Paso 5: cree una interfaz de usuario básica para agregar datos a la tienda.

import db from './firbase';
import {useState} from 'react';
  
const Firestore = () => {
    const [name  , Setname] = useState("");
    const [age , Setage] = useState("");
    const [course , Setcourse] = useState("");
    const sub = (e) => {
        e.preventDefault();
          
        // Add data to the store
        db.collection("data").add({
            Nane: name,
            Age: age,
            CourseEnrolled: course
        })
        .then((docRef) => {
            alert("Data Successfully Submitted");
        })
        .catch((error) => {
            console.error("Error adding document: ", error);
        });
    }
  
    return (
        <div>
            <center>
                <form style={{marginTop:"200px" }}
                  onSubmit={(event) => {sub(event)}}>
                    <input type="text" placeholder="your name"
                      onChange={(e)=>{Setname(e.target.value)}} />
                      <br/><br/>
                    <input type="number" placeholder="your age"
                      onChange={(e)=>{Setage(e.target.value)}}/>
                      <br/><br/>
                    <input type="text" placeholder="Course Enrolled"
                      onChange={(e)=>{Setcourse(e.target.value)}}/>
                      <br/><br/>
                    <button type="submit">Submit</button>
                </form>
            </center>
        </div>
    );
}
  
export default Firestore;

Producción:

• Enviar el formulario después de completar los detalles

• La vista de los datos que se agregan a la tienda.

Paso 6: cree una interfaz de usuario básica para mostrar los datos de la tienda. Vamos a utilizar el método get() para obtener los datos de la tienda. Luego, los datos se recorren y se utilizan en el 

// Import Firestore database
import db from './firbase';
import { useState } from 'react';
import './read.css';
  
const Read = () => {
  
    const [info , setInfo] = useState([]);
  
    // Start the fetch operation as soon as
    // the page loads
    window.addEventListener('load', () => {
        Fetchdata();
      });
  
    // Fetch the required data using the get() method
    const Fetchdata = ()=>{
        db.collection("data").get().then((querySnapshot) => {
             
            // Loop through the data and store
            // it in array to display
            querySnapshot.forEach(element => {
                var data = element.data();
                setInfo(arr => [...arr , data]);
                  
            });
        })
    }
      
    // Display the result on the page
    return (
        <div>
            <center>
            <h2>Student Details</h2>
            </center>
          
        {
            info.map((data) => (
            <Frame course={data.CourseEnrolled} 
                   name={data.Nane} 
                   age={data.Age}/>
            ))
        }
        </div>
  
    );
}
  
// Define how each display entry will be structured
const Frame = ({course , name , age}) => {
    console.log(course + " " + name + " " + age);
    return (
        <center>
            <div className="div">
                  
<p>NAME : {name}</p>
   
                  
<p>Age : {age}</p>
  
                  
<p>Course : {course}</p>
   
            </div>
        </center>
    );
}
  
export default Read;

Salida: En este ejemplo, cuatro registros que están presentes en la base de datos se muestran en nuestra aplicación.