---
title: "Formulario de contacto con React + Firebase"
description: "Vamos a crear un formulario de contacto hecho con ReactJS y almacenaremos las solicitudes de contacto en Firebase Database."
author: "Oscar Barajas Tavares"
language: "es"
canonical: "https://gndx.dev/blog/formulario-de-contacto-con-react-firebase/"
datePublished: "2017-12-08T00:00:00.000Z"
dateModified: "2017-12-08T00:00:00.000Z"
categories: ["others"]
tags: ["firebase","reactJS","recursos","javascritpt"]
---

# Formulario de contacto con React + Firebase

> Vamos a crear un formulario de contacto hecho con ReactJS y almacenaremos las solicitudes de contacto en Firebase Database.

Vamos a crear un formulario de contacto hecho con ReactJS y almacenaremos las solicitudes de contacto en Firebase Database.

**¿Que es Firebase Realtime Database?**

Es un servicio que almacena y sincroniza los datos con nuestra base de datos NoSQL alojada en la nube. Los datos se sincronizan con todos los clientes en tiempo real y se mantienen disponibles cuando tu app está sin conexión.

Una de las grandes cualidades de [Firebase RealTime Database](https://firebase.google.com/products/database/?hl=es-419) es que trabaja sin conexión, el SDK de Firebase RealTime Database almacena en disco los datos y cuando se restablece la conexión el cliente recibe los datos faltantes y sincroniza con el estado actual del servidor. (Característica que me encanta).

Nuestro proyecto ejemplo está construido con "[create-React-app](https://github.com/facebookincubator/create-react-app)", así que vamos a omitir toda la configuración inicial y nos enfocaremos en trabajar en el archivo "App.js" donde crearemos el formulario.

**Configurar Firebase dentro de nuestro proyecto en React**

Para usar _Firebase RealTime Database_ en nuestra aplicacion React debemos importar la libreria de "_Firebase_" la cual instalaremos dentro de nuestro proyecto desde el npm con el siguiente comando:

    npm install --save firebase

Vamos a nuestra "_[Consola de Firebase](https://console.firebase.google.com)_" elegimos o creamos un proyecto y en la opcion de "Agregar Firebase a tu app web" copiamos la configuracion que incluye el apiKey, authDomain, projectId, databaseURL, storageBucket necesarios para conectarnos con el servicio.

Creamos un archivo dentro de "src/" y lo llamaremos "Firebase.js" donde añadiremos nuestra configuración de la siguiente manera:

Creando nuestro formulario de contacto dentro de nuestro archivo App.js

Te dejo el repositorio con el proyecto: [react-form-firebase](https://github.com/gndx/react-form-firebase)

Demo del formulario: [https://gndx-projects.firebaseapp.com/](https://gndx-projects.firebaseapp.com/)

---

Fuente canónica: [https://gndx.dev/blog/formulario-de-contacto-con-react-firebase/](https://gndx.dev/blog/formulario-de-contacto-con-react-firebase/)
Autor: [Oscar Barajas Tavares](https://gndx.dev/about/)