React + Firebase Firestore: пошаговый CRUD

Важно: примеры используют модульный SDK Firebase (v9+) и React Hooks. Подставляйте свои значения конфигурации и правила безопасности Firebase перед выкатом в продакшен.

Фрагмент кода в текстовом редакторе

Что вам нужно знать заранее

React: функциональные компоненты и хуки useState, useEffect. Один рядок: useState хранит и обновляет состояние, useEffect управляет побочными эффектами.
Firebase: базовое представление о проекте Firebase и Firestore. Один рядок: Firestore — документно-ориентированная база данных в облаке.
npm или yarn для установки зависимостей.

Быстрая проверка окружения

Node.js (рекомендуется LTS). Локальные переменные окружения в React начинаются с REACTAPP.
Проект в Firebase Console с включённой Firestore.

Подключение React-приложения к Firebase Firestore

Если вы ещё не создали проект в Firebase Console — создайте и подключите Firestore.

В корне src создайте папку firebase_setup и файл firebase.js.
Вставьте конфигурацию вашего проекта во внутри файла firebase.js. Пример:

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

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

ALT: переменная firestore экспортируется и будет использоваться по всему приложению для запросов к Firestore.

Примечание о секретах: хотя пример использует .env, для продакшен-сборок лучше применять защищённые хранилища секретов на сервере CI/CD или proxy-слой (см. раздел Безопасность).

Установите зависимости:

npm install firebase uuid

uuid необязателен, но удобен для генерации уникальных идентификаторов на клиенте.

Структура DOM и состояния компонента

Ниже — минимальная структура App.js, используемая в примерах. Состояния:

info — массив значений для отображения.
ids — массив id документов Firestore (doc.id).
detail — текущее значение поля ввода.
isUpdate — флаг режима редактирования.
docId — id документа для обновления.

import './App.css';
import { useEffect, useState } from 'react';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } from "firebase/firestore";
import { firestore } from './firebase_setup/firebase';
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [info, setInfo] = useState([])
  const [isUpdate, setisUpdate] = useState(false)
  const [docId, setdocId] = useState("")
  const [detail, setDetail] = useState("")
  const [ids, setIds] = useState([])

  return (
    
      
        
        {
          isUpdate ? (
            <>
              
              
            
          ) : ()
        }
      

      {info.map((data, index)=>
      
        {data}

        

        
      
      )}
    
  );
}

export default App;

Запись данных в Firestore

Для добавления документов можно использовать addDoc (генерирует id) или setDoc (позволяет задать собственный id). В примере ниже используется addDoc.

Обработчики для поля и сабмита:

const handledatachange = (e) => {
  setDetail(e.target.value)
};

const submithandler = (e) => {
  e.preventDefault()
  const ref = collection(firestore, "test_data")

  let data = {
      uuid: uuidv4(),
      testData: detail
  }

  try {
      addDoc(ref, data)
  } catch(err) {
      console.log(err)
  }

  setDetail("")
}

Пояснения:

addDoc(ref, data) создаёт документ в коллекции test_data с автоматически сгенерированным id.
Поле uuid удобно для внутренней логики приложения, если нужно постоянное клиентское id.

ALT: визуализация данных в DOM после добавления записи.

Чтение данных из Firestore и реактивные обновления

Используйте onSnapshot, чтобы получать живые обновления из коллекции. Пример внутри useEffect:

useEffect(() => {
  const getData = async () => {
    const data = await query(collection(firestore, "test_data"));

    onSnapshot(data, (querySnapshot) => {
      const databaseInfo = [];
      const dataIds = []

      querySnapshot.forEach((doc) => {
        databaseInfo.push(doc.data().testData);
        dataIds.push(doc.id)
      });

      setIds(dataIds)
      setInfo(databaseInfo)
    });
  }

  getData()
}, [])

Пояснения:

onSnapshot подписывается на изменения и вызывает колбэк при каждом обновлении коллекции или документа.
setInfo и setIds обновляют состояние компонента и инициируют повторный рендер.

Обновление документов в Firestore

Для обновления используйте setDoc с опцией merge: true, чтобы не перезаписывать весь документ.

const handleupdate = (e) => {
  setisUpdate(true)
  setDetail(e.target.parentNode.children[0].textContent)
  setdocId(e.target.parentNode.children[0].getAttribute("data-id"))
};

const handlesubmitchange = async (e) => {
  e.preventDefault()
  const docRef = doc(firestore, 'test_data', docId);

  const updatedata = await {
    testData: detail
  };

  await setDoc(docRef, updatedata, { merge:true })
      .then(console.log("Data changed successfully"))

  setisUpdate(false)
  setDetail("")
}

Замечания по UX:

При клике Edit содержимое документа подставляется в поле ввода. Это удобно, но для сложных структур данных лучше использовать контролируемую форму с валидацией.

Форма React и рендеринг полей для редактирования

Удаление документов из Firestore

Пример обработчика удаления, который получает id из DOM и удаляет документ:

const handledelete = async (e) => {
  const docRef = doc(firestore, 'test_data', e.target.parentNode.children[0].getAttribute("data-id"));

  await deleteDoc(docRef)
      .then(() => {
        console.log(`${e.target.parentNode.children[0].textContent} has been deleted successfully.`)
      })
      .catch(error => {
        console.log(error);
      })
}

Рекомендация: в реальном приложении перед удалением показывайте подтверждение (modal) и используйте оптимистичное обновление UI с обработкой ошибок.

Безопасность и правила доступа Firestore

По умолчанию Firestore может быть открыт — измените правила доступа в Firebase Console прежде чем выкладывать:
- Для аутентифицированных пользователей ограничьте операции на основе uid.
- Для публичных данных используйте серверный слой или Cloud Functions.
Никогда не размещайте приватные ключи или сервисные аккаунты в клиентском коде.
Для чувствительных операций (платежи, сложная логика валидации) используйте backend или Cloud Functions.

Практики хранения конфигурации и секретов

.env для локальной разработки (файлы .env не должны попадать в репозиторий).
CI/CD: храните секреты в защищённых переменных окружения конвейера и подставляйте при сборке.
Для доступа к сервисным аккаунтам используйте серверный прокси или серверные функции.

Альтернативные подходы и когда это не подходит

Когда Firebase подходит:
- Быстрая разработка MVP без серверной части.
- Приложения с активной синхронизацией в реальном времени.
Когда Firebase может не подойти:
- Нужна сложная транзакционная логика на сервере.
- Требуется SQL-движок и сложные JOIN-операции.
- Регуляторные требования, требующие локального хранения данных.

Альтернативы: Supabase (Postgres + realtime), Hasura (GraphQL + Postgres), собственный backend на Node/Express или Rails.

Ментальные модели и эвристики

Клиент-серверная граница: доверяйте клиенту только презентацию, валидацию и UX; бизнес-логику держите на сервере, если нужна безопасность.
Обновление данных: если требуется атомарность в нескольких документах — используйте транзакции Firestore или функции на сервере.
Масштабирование: разбивайте коллекции по логическим сущностям и индексируйте поля, используемые в запросах.

Чек-листы по ролям

Разработчик:

Подключить firebase.js и проверить init.
Настроить .env и добавить в .gitignore.
Реализовать CRUD и обработку ошибок.
Написать unit/e2e тесты для основных сценариев.

QA:

Проверить поведение при отсутствии сети.
Проверить ренейминг коллекции и совместимость данных.
Проверить правила безопасности и попытки неавторизованных запросов.

PM:

Убедиться, что ограничения Firestore (размер документов, лимиты чтений/записей) удовлетворяют требованиям.
Определить SLA и стратегию бэкапов.

Мини‑методология: от идеи до продакшна (высокоуровнево)

Спроектировать модели данных и правила безопасности.
Настроить проект в Firebase Console и Firestore.
Подключить React-приложение и хранение конфигурации.
Реализовать CRUD с валидацией и обработкой ошибок.
Написать тесты, провести нагрузочное тестирование и проверку правил безопасности.
Задеплоить с контролем окружений и мониторингом.

Decision flowchart (выбор архитектуры)

flowchart TD
  A[Нужен realtime?] -->|Да| B[Firebase / Supabase Realtime]
  A -->|Нет| C[Требуется SQL?]
  C -->|Да| D[Postgres + Hasura/Supabase]
  C -->|Нет| E[Собственный backend или BaaS]
  B --> F[Использовать Firestore если нужен быстрый старт]
  D --> F
  E --> F

Критерии приёмки

Все CRUD-операции выполняются без ошибок в нормальном сценарии.
UI обновляется реактивно при изменении данных в Firestore.
Правила безопасности предотвращают неавторизованный доступ.
Тесты покрывают основные сценарии и проверяют граничные случаи.

Тестовые случаи и сценарии приёма

Создание записи: при заполнении и нажатии Save запись появляется в списке и в консоли Firebase.
Чтение данных: при добавлении документа в Firebase Console он появляется в UI клиента (onSnapshot).
Обновление записи: Edit подставляет данные в форму, Update изменяет документ в Firestore.
Удаление записи: Delete удаляет документ и элемент DOM исчезает.
Ошибка сети: приложение отображает сообщение об ошибке и позволяет повторить операцию.

Производительность и стоимость

Firestore тарифицируется по операциям чтения/записи/удаления и объёму хранения. Оптимизируйте количество чтений (агрегация, кеширование).
Используйте пагинацию и ограничения запросов, чтобы избежать большого количества одновременных чтений.

Примеры распространённых ошибок и как их избежать

Проблема: Клиент публикует сервисные ключи в репозитории. Решение: храните в CI/CD или на сервере.
Проблема: Открытые правила Firestore. Решение: настроить правила безопасности и тестировать их.
Проблема: Чрезмерное количество onSnapshot-подписок. Решение: отписывайтесь от них в clean-up useEffect.

Заключение

Использование React вместе с Firebase Firestore позволяет быстро строить отзывчивые приложения с минимальным бэкендом. Для продакшна важно спроектировать безопасность, управление секретами и стратегию снижения количества операций. Если нужна транзакционная модель или сложные запросы — рассмотрите гибридный подход с серверной логикой.

Ключевые шаги для старта: создать проект Firebase, добавить firebase.js в src, реализовать CRUD-обработчики, настроить правила безопасности и протестировать поведение в оффлайн/ошибочных сценариях.

Extras: следуйте чек‑листу и тестовым кейсам перед релизом, используйте мерчант-флоу для выбора архитектуры, описанный в диаграмме.

Краткое резюме

React + Firestore — быстрый путь для MVP и realtime-приложений.
На клиенте используйте addDoc/setDoc/deleteDoc и onSnapshot для реактивности.
Настройте правила безопасности и корректное хранение секретов.
Рассмотрите альтернативы при требованиях транзакционности или SQL.

Интеграция React с Firebase Firestore: создание CRUD-приложения