Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
Usando la combinación de React y Firebase, puede producir aplicaciones súper receptivas. Si ya está familiarizado con React, aprender a integrar Firebase es un excelente próximo paso.
Para comprender los conceptos básicos del manejo de datos de Firebase, debe aprender a emparejar su base de datos Firestore con React para crear una aplicación CRUD. Con ese conocimiento, puede comenzar a crear aplicaciones de pila completa escalables con poco o ningún código de back-end.
Conecte su aplicación React a Firebase Firestore
Si aún no lo ha hecho, vaya a Firebase console y conecte Firestore a su proyecto React.
El proceso es fácil si ya ha creó su aplicación React.
A continuación, haga una nueva firebase_setup directorio dentro de su proyecto origen carpeta. Crear un base de fuego.js archivo dentro de esta carpeta. Pegue el código de configuración que obtendrá al crear un proyecto de Firebase dentro del nuevo archivo:
importar {iniciarAplicación} de "base de fuego/aplicación";
importar {getFirestore} de "@firebase/firestore"constante firebaseConfig = {
Clave API: proceso.env.REACT_APP_apiKey,
authDomain: proceso.env.REACT_APP_authDomain,
Projecto ID: proceso.env.REACT_APP_proyectoId,
cubo de almacenamiento: proceso.env.REACT_APP_storageBucket,
mensajeríaSenderId: proceso.env.REACT_APP_messagingSenderId,
ID de aplicación: proceso.env.REACT_APP_appId,
ID de medida: proceso.env.REACT_APP_medidaId
};
constante aplicación = initializeApp (firebaseConfig);
exportarconstante firestore = getFirestore (aplicación)
El tienda de fuego variable contiene su entorno de Firebase Firestore. Lo usará en toda la aplicación mientras realiza solicitudes de API.
Aunque este código usa el método .env para enmascarar la información de configuración, hay mejores formas de almacenar secretos en React.
Ahora, instale el base de fuego y uuid bibliotecas en su aplicación React. Si bien uuid es opcional, puede usarlo como un identificador único para cada documento publicado en la base de datos de Firestore.
npm instalar base de fuego uuid
Aquí hay una demostración de lo que está a punto de construir con React y Firestore:
Escribir datos en la base de datos de Firestore
Puedes usar el establecerdoc o addDoc método para agregar documentos a Firebase. El addDoc El método tiene la ventaja de que le indica a Firebase que genere una identificación única para cada registro.
Para comenzar, importe las siguientes dependencias en App.js:
importar './Aplicación.css';
importar { usarEfecto, usarEstado } de 'reaccionar';
importar { addDoc, colección, setDoc, deleteDoc, doc, query, onSnapshot } de "base de fuego/almacén de fuego";
importar { depósito de fuego } de './firebase_setup/firebase';
importar {v4 como uuidv4 } de 'uuid';
Antes de continuar, observe la estructura DOM y los estados que utiliza este tutorial:
funciónaplicación() {
constante [info, setInfo] = useState([])
constante [isUpdate, setisUpdate] = useState(FALSO)
const [docId, setdocId] = useState("")
const [detalle, establecerDetalle] = usarEstado("")
constante [ids, setIds] = useState([])devolver (
<div className="aplicación">
<forma>
<tipo de entrada = "texto" value={detalle} onChange={handledatachange} />
{
¿Actualizar? (
<>
<button onClick={handlesubmitchange} tipo = "entregar">Actualizar</button>
<botón onClick={() => { setisUpdate (falso); establecerDetalle("")}}>
X
</button>
</>
): (<button onClick={submithandler} type="entregar">Ahorrar</button>)
}
</form>{info.map((datos, índice)=>
<clave div={ids[índice]} className='contenedor de datos' identificación ='contenedor de datos'>
<p className='datos' identificación ='datos' id-datos ={ids[índice]} clave={ids[índice]}>{datos}</pag>
<botón className='boton de detele' identificación ='boton borrar' onClick={manejareliminar}>
Borrar
</button><botón className='boton de actualizacion' identificación ='boton de actualizacion' onClick={manejaractualización}>
Editar
</button>
</div>
)}
</div>
);
}
exportarpor defecto aplicación;
A continuación, cree un controlador de envío para escribir datos en la base de datos de Firestore. Esto es un enEnviar evento. Así que lo usarás en el botón de enviar.
Además, cree un controlador de cambios. Este evento escucha los cambios en el campo de formulario y pasa la entrada a una matriz (el detalle matriz en este caso). Esto va a la base de datos.
constante handledatachange = (e) => {
conjuntoDetalle(mi.objetivo.valor)
};constante controlador de envío = (e) => {
mi.preventDefault()
const ref = colección (firestore, "datos de prueba")dejar datos = {
uuid: uuidv4(),
testData: detalle
}intentar {
addDoc (ref, datos)
} atrapar(Error) {
consola.log (error)
}
establecerDetalle("")
}
Si bien Firebase genera automáticamente ID de documentos (a menos que lo impida), el campo UUID también sirve como un identificador único para cada documento.
Leer datos de la base de datos de Firestore
Obtener datos de la base de datos de Firestore dentro del efecto de uso enganche usando el método de consulta de Firestore:
usarEfecto(() => {
constante obtenerDatos = asíncrono () => {
constante datos = esperar consulta (colección (firestore, "test_data"));onSnapshot (datos, (querySnapshot) => {
constante base de datosInfo = [];
constante identificadores de datos = []instantánea de consulta.para cada((doc) => {
base de datosInfo.empujar(doc.datos().datos de prueba);
identificadores de datos.empujar(doc.identificación)
});setIds (identificadores de datos)
setInfo (base de datos)
});
}
obtener datos()
}, [])
El código anterior usa la consulta de Firebase para obtener una instantánea de los datos enviados a Firestore usando el en Instantánea función.
Una instantánea permite que su aplicación escuche los cambios en el backend. Actualiza el cliente automáticamente cada vez que alguien escribe en la base de datos.
El setInfo state toma los datos de cada documento. Usted mapeará a través de esto (el información array) mientras se procesa en el DOM.
El setIds el estado rastrea todos los ID de documentos (pasados como el identificaciones formación). Puede usar cada ID para ejecutar las consultas Eliminar y Actualizar en cada documento. Luego puede pasar cada ID de documento como un atributo DOM mientras mapea a través del información formación.
Aquí está el uso del estado dentro del DOM (como se muestra en el fragmento de código anterior):
Actualizar datos existentes en Firestore
Utilizar el establecerdoc para actualizar un documento o un campo en un documento.
Defina dos controladores para la acción de actualización. Uno maneja el botón de enviar para los datos editados (manejarenviarcambio), mientras que el otro es para el botón que reescribe los datos en el campo de entrada para su edición (handleupdate):
constante handleupdate = (e) => {
setisActualizar(verdadero)
conjuntoDetalle(mi.objetivo.parentNode.niños[0].contenido del texto)
setdocId(mi.objetivo.parentNode.niños[0].getAttribute(&cita;identificación de datos&cita;))
};constante manejarenviarcambio = asíncrono (e) => {
mi.preventDefault()
const docRef = doc (firestore, 'datos de prueba', docId);constante datos actualizados = esperar {
testData: detalle
};esperarestablecerdoc(docRef, actualizar datos, { unir:verdadero })
.entonces (consola.log("Los datos cambiaron con éxito"))
setisActualizar(FALSO)
establecerDetalle("")
}
Como se muestra en el fragmento de código anterior, aquí está la representación DOM para las acciones de creación y actualización:
El handleupdate La función apunta a cada ID de documento en el DOM usando su ruta de nodo. Utiliza esto para consultar cada documento de la base de datos para realizar cambios. El botón Editar utiliza esta función.
Entonces esActualizar (seguido por el setisActualizar estado) regresa verdadero cuando un usuario hace clic en el botón Editar. Esta acción abre el botón Actualizar, que envía los datos editados cuando un usuario hace clic en él. El extra X El botón cierra la acción de edición cuando se hace clic, configurando esActualizar a FALSO.
Si esActualizar es FALSO, el DOM conserva el botón Guardar inicial en su lugar.
Eliminar datos de Firestore
Puede eliminar datos existentes de Firestore usando el borrarDoc método. Tal como lo hizo con la acción Actualizar, recupere cada documento usando su ID único apuntando a su atributo DOM usando la ruta del nodo:
constante manejarborrar = asíncrono (e) => {
const docRef = doc (firestore, 'datos de prueba', e.target.parentNode.children[0].getAttribute("identificación de datos"));
esperar eliminarDoc (docRef)
.entonces(() => {
consola.registro(`${e.target.parentNode.children[0].contenido del texto} se ha eliminado correctamente.`)
})
.atrapar(error => {
consola.log (error);
})
}
Pase la función anterior al botón Eliminar. Elimina los datos de la base de datos y el DOM cuando un usuario hace clic en él.
Combine Firebase con su mejor marco frontend
Firebase lo ayuda a escribir menos código mientras consulta datos directamente desde el lado del cliente. Además de React, es compatible con otros marcos de JavaScript, incluidos Angular.js, Vue.js y muchos otros.
Ahora que ha visto cómo funciona con React, es posible que también desee aprender a emparejarlo con Angular.js.
