ReactとFirebaseを使用したリアルタイムWebアプリの構築

npm install firebase react-firebase-hooks

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

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  databaseURL: 'your-database-url',
  projectId: 'your-project-id',
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

import { ref, onValue } from 'firebase/database';

useEffect(() => {
  const dataRef = ref(database, 'messages/');
  onValue(dataRef, (snapshot) => {
    const data = snapshot.val();
    console.log(data);
  });
}, []);

import { ref, set } from 'firebase/database';

const sendMessage = (message) => {
  set(ref(database, 'messages/' + Date.now()), {
    text: message,
  });
};

try {
  await sendMessage('Hello Firebase');
} catch (error) {
  console.error('Error writing message:', error);
}

npm install -g firebase-tools
firebase login
firebase init
firebase deploy