Cómo conectar su aplicación React a Firebase

Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.

Según la encuesta Stack Overflow de 2022, el 21,14 % de los desarrolladores utilizan Firebase, lo que la convierte en la cuarta plataforma en la nube más popular. Es una tecnología en evolución para integrar el backend sin problemas.

Con Firebase, puede desarrollar una aplicación de pila completa sin escribir una sola línea de código de back-end. Aprenda a conectar su aplicación React.js con Firebase hoy y construya sobre la marcha.

Instalar el paquete de Firebase

Después creando tu aplicación React, cambie el directorio a la carpeta raíz de su proyecto e instale el paquete Firebase ejecutando:

npm instalar base de fuego

Agregue su aplicación React a un proyecto de Firebase

El siguiente paso es crear un proyecto de Firebase y vincularlo con su aplicación React. Ve a la

1. Hacer clic Agregar proyecto para iniciar un nuevo proyecto de Firebase.
2. Ingrese un nombre de proyecto, luego haga clic en Continuar.
3. Hacer clic Continuar en la página siguiente.
4. Seleccione su cuenta de Firebase del menú desplegable o haga clic en Crea una cuenta nueva si aún no tienes uno.
5. Finalmente, haga clic en Crear proyecto.
6. Hacer clic Continuar una vez que se completa el proceso.
7. A continuación, haga clic en el icono Web () hacia la esquina superior izquierda de la siguiente página para configurar Firebase para la web.
8. Ingrese un apodo para su aplicación en el campo proporcionado. Luego haga clic Registrar aplicación.
9. Copie el código generado y guárdelo para el siguiente paso (discutido en la siguiente sección).
10. Hacer clic Continuar a la consola.
11. Hay muchas opciones en la página siguiente. Desplácese hacia abajo y seleccione Tienda de fuego en la nube ya que solo necesita configurar una base de datos en este caso.
12. A continuación, haga clic en Crear base de datos.
13. Hacer clic Próximo. Seleccione su ubicación preferida de Firestore en el menú desplegable.
14. Luego haga clic Permitir para crear una base de datos de Firestore.

Inicialice Firebase en su aplicación React

Crea una nueva carpeta dentro de tu proyecto origen directorio. Puede llamar a este firebase_setup. A continuación, cree un base de fuego.js archivo dentro de esa carpeta. Luego pegue el código generado anteriormente en este archivo.

Por ahora, puede almacenar el objeto de configuración (firebaseConfig) dentro de un .env archivo. Pero considere usar un sistema más seguro manera de enmascarar los secretos de React en producción. Los datos que almacena en un .env El archivo puede filtrarse fácilmente en la compilación de su aplicación.

Por ejemplo, para ingresar la clave secreta de Firebase de su aplicación en el .env archivo:

REACT_APP_apiKey = suFirebaseAccessKey

Por lo tanto, puede ajustar el código generado de la siguiente manera:

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)

Pruebe su conexión de Firebase

Puede probar la conexión enviando datos ficticios a Firestore. Comience por crear un manejas carpeta dentro de su proyecto origen directorio. Cree un controlador de envío dentro de este archivo. Puedes llamar a esto handlesubmit.js, por ejemplo:

importar { addDoc, colección } de "@firebase/firestore"
importar { depósito de fuego } de "../firebase_setup/firebase"
constante handleSubmit = (datos de prueba) => {
constante ref = colección (firestore, "test_data") // Firebase crea esto automáticamente
dejar datos = {
 datos de prueba: datos de prueba
 }
intentar {
 addDoc (ref, datos)
 } atrapar(Error) {
consola.log (error)
 }
}
exportarpor defecto manejarEnviar

luego adentro Aplicación.js:

importar './Aplicación.css';
importar manejarEnviar de './identificadores/administradorsubmit';
importar { usarRef } de 'reaccionar';
funciónaplicación() {
constante referencia de datos = referencia de uso ()
constante controlador de envío = (e) => {
mi.preventDefault()
manejarEnviar(referencia de datos.actual.valor)
 ref.datos.valor.actual = ""
 }
devolver (
<div className="aplicación">
<formulario onSubmit={enviar manejador}>
<tipo de entrada = "texto" ref={referencia de datos} />
<tipo de botón = "entregar">Ahorrar</button>
</form>
</div>
 );
}
exportarpor defecto aplicación;

Ejecute su aplicación React e intente enviar datos a través del formulario. Actualice la consola de la base de datos de Firebase para ver la información enviada en su colección. Con los conceptos básicos en su lugar, puede explorar muchos otros cosas que Firebase puede hacer para ver la mejor manera de usarlo.

Crea sobre la marcha con Firebase y React

Firebase es una solución versátil de back-end como servicio que le permite escalar su aplicación de manera efectiva. Una vez que conecta su aplicación React, puede aprovechar sus muchas funciones para crear su sitio web a su gusto.

Por ejemplo, el kit de herramientas de autenticación de Firebase es una de las características que quizás desee explorar.