react firebase crud realtime database
tejan
Posted on June 4, 2022
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,
});
};
💖 💪 🙅 🚩
tejan
Posted on June 4, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
privacy Caught in the Crunch My Journey from Snacks to 2 Million Exposed Users Privacy
November 30, 2024
devchallenge Submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
November 30, 2024