react firebase crud realtime database

https://firebase.google.com/docs/database/web/start?authuser=0
https://youtu.be/azdwN_4IDKA
https://create-react-app.dev/docs/adding-bootstrap/#using-a-custom-theme

terminal

npx create-react-app xxx-app-name
cd xxx-app-name
code .

vscode

npm i firebase
npm i uid

firebase

new web app
SDK setup and configuration

vscode

firebase.js

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig{
apiKey: "your api key";
authDomain: "your authDomain";
databaseURL: "your dbURL";
projectId: "your projectId";
storageBucket: "your storageBucket";
messagingSenderId: "your messagingSenderId";
appId: "your appId";
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);

firebase > realtime database

rules

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

vscode

App.js
text input

import { db } from "./firebase" 
//firebase.js
import { uid } from "uid"

function App(){

return(
<div>
<input type="text" />
<button>submit</button>
</div>)
}

write

  const writeToDatabase = () => {
    const uuid = uid();
    set(ref(db, `/${uuid)`}, {
      todo,
      uuid,
    });
  };