Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.
Използвайки комбинацията от React и Firebase, можете да създадете супер отзивчиви приложения. Ако вече сте запознати с React, научаването как да интегрирате Firebase е отлична следваща стъпка.
За да разберете основите на обработката на данни от Firebase, трябва да научите как да сдвоите неговата база данни Firestore с React, за да създадете CRUD приложение. Използвайки това знание, можете да започнете да създавате мащабируеми приложения с пълен стек с малко или нулев бекенд код.
Свържете вашето приложение React към Firebase Firestore
Ако още не сте го направили, отидете на конзолата на Firebase и свържете Firestore към вашия проект React.
Процесът е лесен, ако вече сте го направили създаде вашето приложение React.
След това направете нов firebase_setup директория във вашия проект src папка. Създавам firebase.js файл в тази папка. Поставете конфигурационния код, който ще получите, докато създавате Firebase проект в новия файл:
импортиране { initializeApp } от "firebase/приложение";
импортиране {getFirestore} от "@firebase/firestore"конст firebaseConfig = {
apiKey: процес.env.REACT_APP_apiKey,
authDomain: процес.env.REACT_APP_authDomain,
projectId: процес.env.REACT_APP_projectId,
storageBucket: процес.env.REACT_APP_storageBucket,
messagingSenderId: процес.env.REACT_APP_messagingSenderId,
appId: процес.env.REACT_APP_appId,
измерванеId: процес.env.REACT_APP_measurementId
};
конст приложение = initializeApp (firebaseConfig);
износконст firestore = getFirestore (приложение)
The пожарна променлива съдържа вашата среда на Firebase Firestore. Ще използвате това в цялото приложение, докато правите заявки за API.
Въпреки че този код използва метода .env за маскиране на конфигурационната информация, има по-добри начини за съхраняване на тайни в React.
Сега инсталирайте firebase и uuid библиотеки във вашето приложение React. Докато uuid не е задължителен, можете да го използвате като уникален идентификатор за всеки документ, публикуван в базата данни на Firestore.
npm Инсталирай firebase uuid
Ето демонстрация на това, което ще изградите с React и Firestore:
Запишете данни в базата данни на Firestore
Можете да използвате setDoc или addDoc метод за добавяне на документи към Firebase. The addDoc методът има предимството, че инструктира Firebase да генерира уникален идентификатор за всеки запис.
За да започнете, импортирайте следните зависимости в App.js:
импортиране './App.css';
импортиране {useEffect, useState} от 'реагира';
импортиране { addDoc, колекция, setDoc, deleteDoc, doc, заявка, onSnapshot } от "firebase/firestore";
импортиране { пожарна } от './firebase_setup/firebase';
импортиране {v4 като uuidv4} от 'uuid';
Преди да продължите, вижте DOM структурата и състоянията, които този урок използва:
функцияПриложение() {
конст [информация, setInfo] = useState([])
конст [isUpdate, setisUpdate] = useState(невярно)
const [docId, setdocId] = useState("")
const [подробност, setDetail] = useState("")
конст [ids, setIds] = useState([])връщане (
<div className="Приложение">
<форма>
<тип вход = "текст" стойност={подробност} onChange={handledatachange} />
{
isUpdate? (
<>
<бутон onClick={handlesubmitchange} тип = "Изпращане">Актуализация</button>
<бутон onClick={() => { setisUpdate (false); setDetail("")}}>
х
</button>
</>
): (<бутон onClick={submithandler} type="Изпращане">Запазване</button>)
}
</form>{info.map((данни, индекс)=>
<div key={ids[index]} className='контейнер за данни' id='контейнер за данни'>
<p className='данни' id='данни' data-id ={ids[index]} key={ids[index]}>{данни}</стр>
<бутон className='бутон за изтриване' id='бутон за изтриване' onClick={handledelete}>
Изтрий
</button><бутон className='бутон за актуализиране' id='бутон за актуализиране' onClick={handleupdate}>
редактиране
</button>
</div>
)}
</div>
);
}
износпо подразбиране Приложение;
След това създайте манипулатор на подаването, за да записвате данни в базата данни на Firestore. Това е onSubmit събитие. Така че ще го използвате в бутона за изпращане.
Освен това създайте манипулатор за промяна. Това събитие слуша промените в полето на формуляра и предава входа в масив (the детайл масив в този случай). Това влиза в базата данни.
конст handledatachange = (e) => {
setDetail(д.мишена.стойност)
};конст submithandler = (e) => {
д.preventDefault()
const ref = колекция (firestore, "тестови_данни")позволявам данни = {
uuid: uuidv4(),
testData: детайл
}опитвам {
addDoc (справка, данни)
} улов(грешка) {
конзола.log (грешка)
}
setDetail("")
}
Докато Firebase автоматично генерира идентификатори на документи (освен ако не го предотвратите), полето UUID също така служи като уникален идентификатор за всеки документ.
Прочетете данни от базата данни на Firestore
Извличане на данни от базата данни на Firestore в рамките на useEffect кука с помощта на метода на заявка Firestore:
useEffect(() => {
конст getData = асинхронен () => {
конст данни = изчакайте заявка (колекция (firestore, "test_data"));onSnapshot (данни, (querySnapshot) => {
конст база данниИнфо = [];
конст dataIds = []querySnapshot.за всеки((doc) => {
база данниИнфо.натискане(док.данни().testData);
dataIds.натискане(док.документ за самоличност)
});setIds (dataIds)
setInfo (информация за база данни)
});
}
getData()
}, [])
Горният код използва заявката на Firebase, за да получи моментна снимка на данните, изпратени до Firestore, използвайки onSnapshot функция.
Моментната снимка позволява на приложението ви да слуша промените в бекенда. Той актуализира клиента автоматично всеки път, когато някой пише в базата данни.
The setInfo state грабва данните във всеки документ. Ще картографирате през това (the инфо масив), докато рендирате в DOM.
The setIds състояние проследява всички идентификатори на документи (предавани като Идентификационни номера масив). Можете да използвате всеки идентификатор, за да изпълните заявките за изтриване и актуализиране на всеки документ. След това можете да подадете всеки ID на документ като DOM атрибут, докато картографирате през инфо масив.
Ето използването на състоянието в рамките на DOM (както е показано в предишния кодов фрагмент):
Актуализирайте съществуващите данни във Firestore
Използвай setDoc метод за актуализиране на документ или поле в документ.
Дефинирайте два манипулатора за действието за актуализиране. Единият управлява бутона за изпращане на редактираните данни (handlesubmitchange), а другият е за бутона, който пренаписва данните в полето за въвеждане за редактиране (handleupdate):
конст handleupdate = (e) => {
setisUpdate(вярно)
setDetail(д.мишена.parentNode.деца[0].textContent)
setdocId(д.мишена.parentNode.деца[0].getAttribute("data-id"))
};конст handlesubmitchange = асинхронен (e) => {
д.preventDefault()
const docRef = doc (firestore, 'тестови_данни', docId);конст актуализирани данни = изчакайте {
testData: детайл
};изчакайтеsetDoc(docRef, актуализирани данни, { сливане:вярно })
.след това (console.log("Данните са променени успешно"))
setisUpdate(невярно)
setDetail("")
}
Както е показано в предишния кодов фрагмент, ето изобразяването на DOM за действията за създаване и актуализиране:
The handleupdate функцията е насочена към всеки идентификатор на документ в DOM, използвайки неговия път на възел. Той използва това, за да направи заявка за всеки документ от базата данни, за да направи промени. Бутонът Редактиране използва тази функция.
Така isUpdate (проследено от setisUpdate състояние) връща вярно когато потребител щракне върху бутона Редактиране. Това действие извежда бутона Актуализиране, който изпраща редактираните данни, когато потребител щракне върху него. Екстрата х бутонът затваря действието за редактиране при щракване—чрез настройка isUpdate да се невярно.
Ако isUpdate е невярно, вместо това DOM запазва първоначалния бутон Запазване.
Изтриване на данни от Firestore
Можете да изтриете съществуващи данни от Firestore, като използвате deleteDoc метод. Както направихте за действието Актуализиране, извлечете всеки документ, използвайки неговия уникален идентификатор, като насочите неговия DOM атрибут, използвайки пътя на възела:
конст handledelete = асинхронен (e) => {
const docRef = doc (firestore, 'тестови_данни', e.target.parentNode.children[0].getAttribute("data-id"));
изчакайте deleteDoc (docRef)
.then(() => {
конзола.log(`${e.target.parentNode.children[0].textContent} е изтрито успешно.`)
})
.улов(грешка => {
конзола.log (грешка);
})
}
Предайте горната функция в бутона Изтриване. Той премахва данните от базата данни и DOM, когато потребител щракне върху тях.
Сдвоете Firebase с най-добрата си Frontend Framework
Firebase ви помага да пишете по-малко код, докато заявявате данни директно от страната на клиента. Освен React, той поддържа други рамки на JavaScript, включително Angular.js, Vue.js и много други.
Сега, след като видяхте как работи с React, може също да искате да се научите да го сдвоявате с Angular.js.
