El siguiente enfoque cubre cómo enviar datos a la base de datos en tiempo real de firebase usando react. Hemos utilizado el módulo firebase para lograrlo.
Creación de la aplicación React e instalación del módulo:
Paso 1: cree una aplicación React con el siguiente comando:
npx create-react-app myapp
Paso 2: después de crear la carpeta de su proyecto, es decir, myapp, acceda a ella con el siguiente comando:
cd myapp
Estructura del proyecto: La estructura de nuestro proyecto se verá así.
Paso 3: después de crear la aplicación ReactJS, instale el módulo Firebase con el siguiente comando:
npm install firebase@8.3.1 --save
Paso 4: Vaya a su panel de Firebase y cree un nuevo proyecto y copie sus credenciales.
const firebaseConfig = { apiKey: "your api key", authDomain: "your credentials", projectId: "your credentials", storageBucket: "your credentials", messagingSenderId: "your credentials", appId: "your credentials" };
Paso 5: Inicialice Firebase en su proyecto creando el archivo firebase.js con el siguiente código.
firebase.js
import firebase from 'firebase'; const firebaseConfig = { // Your Credentials }; firebase.initializeApp(firebaseConfig); var database = firebase.database(); export default database;
Paso 6: Ahora ve a tu sección de base de datos en tiempo real en el proyecto de firebase y actualiza tus reglas de seguridad. Aquí estamos en modo de prueba, por lo que permitimos que tanto la lectura como la escritura sean verdaderas. Después de actualizar el código que se muestra a continuación, haga clic en publicar.
Paso 7: Ahora implementa la parte principal. Aquí, vamos a utilizar un método llamado conjunto que envía datos a nuestra base de datos en tiempo real.
App.js
import {useState} from 'react'; import database from './firebase'; function App() { const [name , setName] = useState(); const [age , setAge] = useState(); // Push Function const Push = () => { database.ref("user").set({ name : name, age : age, }).catch(alert); } return ( <div className="App" style={{marginTop : 250}}> <center> <input placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)}/> <br/><br/> <input placeholder="Enter your age" value={age} onChange={(e) => setAge(e.target.value)}/> <br/><br/> <button onClick={Push}>PUSH</button> </center> </div> ); } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA