Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Используя комбинацию React и Firebase, вы можете создавать суперотзывчивые приложения. Если вы уже знакомы с React, изучение того, как интегрировать Firebase, станет отличным следующим шагом.
Чтобы понять основы обработки данных Firebase, вы должны узнать, как связать базу данных Firestore с React для создания приложения CRUD. Используя эти знания, вы можете приступить к созданию масштабируемых приложений с полным стеком с минимальным или нулевым внутренним кодом.
Подключите свое приложение React к Firebase Firestore
Если вы еще этого не сделали, перейдите в консоль Firebase и подключите Firestore к вашему проекту React.
Процесс прост, если вы уже создал ваше приложение React.
Далее делаем новый firebase_setup каталог внутри вашего проекта источник папка. Создать firebase.js файл внутри этой папки. Вставьте код конфигурации, который вы получите при создании проекта Firebase, в новый файл:
Импортировать {инициализировать приложение} от "firebase/приложение";
Импортировать {getFirestore} от "@firebase/firestore"константа firebaseConfig = {
APIKey: процесс.env.REACT_APP_apiKey,
authDomain: процесс.env.REACT_APP_authDomain,
идентификатор проекта: процесс.env.REACT_APP_projectId,
хранилищеВедро: процесс.env.REACT_APP_storageBucket,
идентификатор отправителя сообщений: процесс.env.REACT_APP_messagingSenderId,
идентификатор приложения: процесс.env.REACT_APP_appId,
идентификатор измерения: процесс.env.REACT_APP_measurementId
};
константа приложение = InitializeApp (firebaseConfig);
экспортконстанта firestore = getFirestore (приложение)
пожарный склад переменная содержит вашу среду Firebase Firestore. Вы будете использовать это во всем приложении при отправке запросов API.
Хотя этот код использует метод .env для маскировки информации о конфигурации, способы хранения секретов в React.
Теперь установите огневая база и UUID библиотеки в вашем приложении React. Хотя uuid является необязательным, вы можете использовать его как уникальный идентификатор для каждого документа, размещенного в базе данных Firestore.
нпм установить огневая база UUID
Вот демонстрация того, что вы собираетесь создавать с помощью React и Firestore:
Запись данных в базу данных Firestore
Вы можете использовать setDoc или добавитьДокумент способ добавления документов в Firebase. добавитьДокумент Преимущество метода заключается в том, что он указывает Firebase генерировать уникальный идентификатор для каждой записи.
Для начала импортируйте в App.js следующие зависимости:
Импортировать './App.css';
Импортировать { useEffect, useState } от 'реагировать';
Импортировать { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } от "firebase/firestore";
Импортировать { пожарный магазин } от './firebase_setup/firebase';
Импортировать { v4 как uuidv4 } от 'уид';
Прежде чем продолжить, посмотрите на структуру DOM и состояния, которые используются в этом руководстве:
функцияПриложение() {
константа [информация, setInfo] = useState([])
константа [isUpdate, setisUpdate] = useState(ЛОЖЬ)
const [docId, setdocId] = useState("")
const [деталь, setDetail] = useState("")
константа [идентификаторы, setIds] = useState ([])возвращаться (
<div имя_класса ="Приложение">
<форма>
<тип ввода= "текст" значение = {подробно} onChange = {handledatachange} />
{
обновление? (
<>
<кнопка onClick={handlesubmitchange} тип = "представлять на рассмотрение">Обновлять</button>
<кнопка onClick={() => { setisUpdate (ложь); установитьДеталь("")}}>
Икс
</button>
</>
): (<кнопка onClick={submithandler} тип="представлять на рассмотрение">Сохранять</button>)
}
</form>{info.map((данные, индекс)=>
<ключ div={id[index]} className='контейнер данных' идентификатор ='контейнер данных'>
<р имя_класса ='данные' идентификатор ='данные' идентификатор данных = {идентификаторы [индекс]} ключ = {идентификаторы [индекс]}>{данные}</п>
<кнопка className='кнопка удаления' идентификатор ='кнопка удаления' onClick={handledelete}>
Удалить
</button><кнопка className='кнопка обновления' идентификатор ='кнопка обновления' onClick={handleupdate}>
Редактировать
</button>
</div>
)}
</div>
);
}
экспортпо умолчанию Приложение;
Затем создайте обработчик отправки для записи данных в базу данных Firestore. Это onSubmit событие. Таким образом, вы будете использовать его в кнопке отправки.
Кроме того, создайте обработчик изменений. Это событие прослушивает изменения в поле формы и передает ввод в массив (т. деталь массив в данном случае). Это входит в базу данных.
константа handledatachange = (e) => {
setDetail(е.цель.ценить)
};константа отправить обработчик = (е) => {
е.preventDefault()
const ref = коллекция (firestore, "test_data")позволять данные = {
uuid: uuidv4(),
testData: подробно
}пытаться {
addDoc (ссылка, данные)
} ловить(ошибка) {
консоль.лог (ошибка)
}
установитьДеталь("")
}
Хотя Firebase автоматически генерирует идентификаторы документов (если вы не запретите это), поле UUID также служит уникальным идентификатором для каждого документа.
Чтение данных из базы данных Firestore
Получить данные из базы данных Firestore в использованиеЭффект ловушка с использованием метода запроса Firestore:
использовать эффект (() => {
константа получитьданные = асинхронный () => {
константа данные = Ждите запрос (коллекция (firestore, "test_data"));onSnapshot (данные, (querySnapshot) => {
константа информация о базе данных = [];
константа идентификаторы данных = []снимок запроса.для каждого((док) => {
информация о базе данных.толкать(документ.данные().testData);
идентификаторы данных.толкать(документ.идентификатор)
});setIds (идентификаторы данных)
setInfo (информация о базе данных)
});
}
получить данные()
}, [])
В приведенном выше коде используется запрос Firebase для получения моментального снимка данных, отправленных в Firestore с помощью onSnapshot функция.
Моментальный снимок позволяет вашему приложению прослушивать изменения в серверной части. Он автоматически обновляет клиент каждый раз, когда кто-то записывает данные в базу данных.
setInfo state захватывает данные в каждом документе. Вы будете отображать это ( Информация массив) при рендеринге в DOM.
setIds состояние отслеживает все идентификаторы документов (передаются как Идентификаторы множество). Вы можете использовать каждый идентификатор для выполнения запросов на удаление и обновление для каждого документа. Затем вы можете передать идентификатор каждого документа в качестве атрибута DOM при отображении через Информация множество.
Вот использование состояния в DOM (как показано в предыдущем фрагменте кода):
Обновить существующие данные в Firestore
Использовать setDoc способ обновления документа или поля в документе.
Определите два обработчика для действия обновления. Один обрабатывает кнопку отправки для отредактированных данных (обработатьотправитьизменение), а другой — для кнопки, которая перезаписывает данные в поле ввода для редактирования (обработать обновление):
константа handleupdate = (e) => {
setisUpdate(истинный)
setDetail(е.цель.parentNode.дети[0].textContent)
setdocId(е.цель.parentNode.дети[0].getAttribute(&цитата;идентификатор данных&цитата;))
};константа дескриптор отправки изменения = асинхронный (е) => {
е.preventDefault()
const docRef = doc (firestore, 'test_data', идентификатор документа);константа обновить данные = Ждите {
testData: подробно
};ЖдитеsetDoc(docRef, обновить данные, { сливаться:истинный })
.тогда (console.log("Данные успешно изменены"))
setisUpdate(ЛОЖЬ)
установитьДеталь("")
}
Как показано в предыдущем фрагменте кода, вот рендеринг DOM для действий создания и обновления:
обработать обновление Функция нацеливается на каждый идентификатор документа в DOM, используя его путь к узлу. Он использует это для запроса каждого документа из базы данных для внесения изменений. Кнопка Edit использует эту функцию.
Так isUpdate (отслеживается setisUpdate состояние) возвращается истинный когда пользователь нажимает кнопку «Изменить». Это действие вызывает кнопку «Обновить», которая отправляет отредактированные данные, когда пользователь щелкает ее. Дополнительный Икс кнопка закрывает действие редактирования при нажатии — путем установки isUpdate к ЛОЖЬ.
Если isUpdate является ЛОЖЬ, вместо этого DOM сохраняет исходную кнопку «Сохранить».
Удалить данные из Firestore
Вы можете удалить существующие данные из Firestore с помощью удалитьДокумент метод. Как и в случае с действием «Обновить», извлеките каждый документ, используя его уникальный идентификатор, указав его атрибут DOM с помощью пути к узлу:
константа обработать удаление = асинхронный (е) => {
const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("идентификатор данных"));
Ждите удалитьДокумент (docRef)
.то(() => {
консоль.бревно(`${e.target.parentNode.children[0].textContent} был успешно удален.`)
})
.ловить(ошибка => {
консоль.лог (ошибка);
})
}
Передайте вышеуказанную функцию кнопке Удалить. Он удаляет данные из базы данных и DOM, когда пользователь щелкает по ним.
Соедините Firebase с вашим лучшим интерфейсным фреймворком
Firebase помогает вам писать меньше кода при запросе данных непосредственно на стороне клиента. Помимо React, он поддерживает другие фреймворки JavaScript, включая Angular.js, Vue.js и многие другие.
Теперь, когда вы увидели, как это работает с React, вы также можете научиться сочетать его с Angular.js.
