Firebase

react.optersoft.workers.dev typescript/react/firebase

Esta página todavía no se ha traducido — se muestra en su idioma original:English

shell

deno run -A npm:create-vite@latest react-firebase --template react-ts

shell

cd react-firebase
deno install --allow-scripts --node-modules-dir --npm firebase tailwindcss @tailwindcss/vite

Create a file src/firebase.ts to initialize your connection:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "...",
  appId: "..."
};

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

In src/App.tsx, we will fetch the list of pets from Firestore and display them.

tsx

import { useEffect, useState } from 'react';
import { db } from './firebase';
import { collection, getDocs } from 'firebase/firestore';

interface Pet { id: string; name: string; type: string; }

function App() {
  const [pets, setPets] = useState<Pet[]>([]);

  useEffect(() => {
    const fetchPets = async () => {
      const querySnapshot = await getDocs(collection(db, "pets"));
      const petList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Pet));
      setPets(petList);
    };
    fetchPets();
  }, []);

  return (
    <div>
      <h1>🐾 Edge Pet Store</h1>
      <ul>
        {pets.map(pet => (
          <li key={pet.id}>{pet.name} ({pet.type})</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Run the development server:

Estás leyendo una vista previa.

Inicia sesión para leer el artículo completo. Cualquier cuenta abre 4 artículos gratuitos al mes; el alumnado y el profesorado leen las páginas de su curso sin límite.

Iniciar sesión