Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.
Користећи комбинацију Реацт-а и Фиребасе-а, можете произвести апликације које реагују супер. Ако сте већ упознати са Реацт-ом, учење како да интегришете Фиребасе је одличан следећи корак.
Да бисте разумели основе Фиребасе-овог руковања подацима, требало би да научите како да упарите његову Фиресторе базу података са Реацт-ом да бисте направили ЦРУД апликацију. Користећи то знање можете почети да креирате скалабилне апликације пуног стека са малим или нултим позадинским кодом.
Повежите своју Реацт апликацију са Фиребасе Фиресторе-ом
Ако то већ нисте урадили, идите на Фиребасе конзолу и повежите Фиресторе са вашим Реацт пројектом.
Процес је лак ако већ јесте креирали своју Реацт апликацију.
Затим направите нови фиребасе_сетуп директоријум унутар вашег пројекта срц фолдер. Створити фиребасе.јс датотеку у овој фасцикли. Налепите конфигурациони код који ћете добити док креирате Фиребасе пројекат унутар нове датотеке:
увоз { инитиализеАпп } из "фиребасе/апп";
увоз {гетФиресторе} из „@фиребасе/фиресторе“конст фиребасеЦонфиг = {
апиКеи: процес.енв.РЕАЦТ_АПП_апиКеи,
аутхДомаин: процес.енв.РЕАЦТ_АПП_аутхДомаин,
пројецтИд: процес.енв.РЕАЦТ_АПП_пројецтИд,
сторагеБуцкет: процес.енв.РЕАЦТ_АПП_сторагеБуцкет,
мессагингСендерИд: процес.енв.РЕАЦТ_АПП_мессагингСендерИд,
аппИд: процес.енв.РЕАЦТ_АПП_аппИд,
Ид мерења: процес.енв.РЕАЦТ_АПП_меасурементИд
};
конст апп = инитиализеАпп (фиребасеЦонфиг);
извозконст фиресторе = гетФиресторе (апликација)
Тхе фиресторе променљива садржи ваше Фиребасе Фиресторе окружење. Ово ћете користити у целој апликацији док постављате АПИ захтеве.
Иако овај код користи .енв метод за маскирање информација о конфигурацији, постоје бољи начини чувања тајни у Реацт-у.
Сада, инсталирајте фиребасе и ууид библиотеке у вашој Реацт апликацији. Иако је ууид опционалан, можете га користити као јединствени идентификатор за сваки документ објављен у бази података Фиресторе.
нпм инсталирај фиребасе ууид
Ево демонстрације онога што ћете да направите са Реацт и Фиресторе:
Упишите податке у Фиресторе базу података
Можете користити сетДоц или аддДоц метод за додавање докумената у Фиребасе. Тхе аддДоц Метода има предност у томе што налаже Фиребасе-у да генерише јединствени ИД за сваки запис.
За почетак увезите следеће зависности у Апп.јс:
увоз './Апп.цсс';
увоз { усеЕффецт, усеСтате } из 'реаговати';
увоз { аддДоц, цоллецтион, сетДоц, делетеДоц, доц, куери, онСнапсхот } из "фиребасе/фиресторе";
увоз {фиресторе} из './фиребасе_сетуп/фиребасе';
увоз { в4 као ууидв4 } из 'ууид';
Пре него што наставите, погледајте ДОМ структуру и стања која овај водич користи:
функцијаАпликација() {
конст [инфо, сетИнфо] = усеСтате([])
конст [исУпдате, сетисУпдате] = усеСтате(лажно)
цонст [доцИд, сетдоцИд] = усеСтате("")
цонст [детаљ, сетДетаил] = усеСтате("")
конст [идс, сетИдс] = усеСтате([])повратак (
<див цлассНаме="Апликација">
<форму>
<тип уноса= "текст" валуе={детаил} онЦханге={хандледатацханге} />
{
исУпдате? (
<>
<дугме онЦлицк={хандлесубмитцханге} типе = "прихвати">ажурирање</button>
<дугме онЦлицк={() => { сетисУпдате (фалсе); сетДетаил("")}}>
Икс
</button>
</>
): (<дугме онЦлицк={субмитхандлер} типе="прихвати">сачувати</button>)
}
</form>{инфо.мап((подаци, индекс)=>
<див кључ={идс[индекс]} име класе='дата-цонтаинер' ид='дата-цонтаинер'>
<п цлассНаме='података' ид='података' дата-ид ={идс[индек]} кеи={идс[индек]}>{подаци}</п>
<дугме Име класе='дугме за уклањање' ид='дугме за брисање' онЦлицк={хандледелете}>
Избриши
</button><дугме Име класе='дугме за ажурирање' ид='дугме за ажурирање' онЦлицк={хандлеупдате}>
Уредити
</button>
</div>
)}
</div>
);
}
извозУобичајено Апликација;
Затим креирајте обрађивач слања за писање података у Фиресторе базу података. Ово је онСубмит догађај. Тако да ћете га користити у дугмету за слање.
Поред тога, креирајте руковалац променама. Овај догађај слуша промене у пољу обрасца и прослеђује унос у низ ( детаљ низ у овом случају). Ово иде у базу података.
конст хандледатацханге = (е) => {
сетДетаил(е.таргет.вредност)
};конст субмитхандлер = (е) => {
е.превентДефаулт()
цонст реф = колекција (фиресторе, "тест подаци")дозволити подаци = {
ууид: ууидв4(),
тестДата: детаљ
}покушати {
аддДоц (реф, подаци)
} улов(ерр) {
конзола.лог (грешка)
}
сетДетаил("")
}
Док Фиребасе аутоматски генерише ИД-ове докумената (осим ако то не спречите), поље УУИД такође служи као јединствени идентификатор за сваки документ.
Прочитајте податке из Фиресторе базе података
Преузмите податке из Фиресторе базе података у оквиру усеЕффецт кука користећи метод упита Фиресторе:
усеЕффецт(() => {
конст гетДата = асинц () => {
конст подаци = чекати упит (колекција (фиресторе, "тест_дата"));онСнапсхот (подаци, (куериСнапсхот) => {
конст база података = [];
конст датаИдс = []куериСнапсхот.за сваки((доц) => {
датабасеИнфо.пусх(доц.дата().тест подаци);
датаИдс.пусх(доц.ид)
});сетИдс (датаИдс)
сетИнфо (датабасеИнфо)
});
}
гетДата()
}, [])
Горњи код користи Фиребасе упит да добије снимак података послатих Фиресторе-у помоћу онСнапсхот функција.
Снимак омогућава вашој апликацији да слуша промене у позадини. Он аутоматски ажурира клијента сваки пут када неко пише у базу података.
Тхе сетИнфо држава граби податке у сваком документу. Прецртаћете кроз ово ( инфо низ) током рендеровања у ДОМ.
Тхе сетИдс стање прати све ИД-ове докумената (проследи као Идс низ). Можете користити сваки ИД за покретање упита за брисање и ажурирање на сваком документу. Затим можете проследити сваки ИД документа као ДОМ атрибут док мапирате кроз инфо низ.
Ево употребе стања унутар ДОМ-а (као што је приказано у претходном исечку кода):
Ажурирајте постојеће податке у Фиресторе-у
Користити сетДоц метод за ажурирање документа или поља у документу.
Дефинишите два руковаоца за акцију ажурирања. Један управља дугметом за слање измењених података (хандлесубмитцханге), док је други за дугме које преписује податке у поље за унос за уређивање (хандлеупдате):
конст хандлеупдате = (е) => {
сетисУпдате(истина)
сетДетаил(е.таргет.парентНоде.деца[0].тектЦонтент)
сетдоцИд(е.таргет.парентНоде.деца[0].гетАттрибуте(&куот;дата-ид&куот;))
};конст хандлесубмитцханге = асинц (е) => {
е.превентДефаулт()
цонст доцРеф = доц (фиресторе, 'тест подаци', доцИд);конст упдатедата = чекати {
тестДата: детаљ
};чекатисетДоц(доцРеф, упдатедата, { спојити:истина })
.онда (цонсоле.лог("Подаци су успешно промењени"))
сетисУпдате(лажно)
сетДетаил("")
}
Као што је приказано у претходном исечку кода, ево ДОМ приказа за радње креирања и ажурирања:
Тхе хандлеупдате функција циља сваки ИД документа у ДОМ-у користећи путању свог чвора. Ово користи за испитивање сваког документа из базе података да би извршио измене. Дугме Уреди користи ову функцију.
Тако исУпдате (пратио је сетисУпдате држава) враћа истина када корисник кликне на дугме Уреди. Ова радња покреће дугме Ажурирај, које шаље измењене податке када корисник кликне на њега. Додатак Икс дугме затвара радњу за уређивање када се кликне — подешавањем исУпдате до лажно.
Ако исУпдате је лажно, ДОМ уместо тога задржава почетно дугме Сачувај.
Избришите податке из Фиресторе-а
Можете избрисати постојеће податке из Фиресторе-а користећи делетеДоц методом. Као што сте урадили за акцију ажурирања, преузмите сваки документ користећи његов јединствени ИД тако што ћете циљати његов ДОМ атрибут користећи путању чвора:
конст хандледелете = асинц (е) => {
цонст доцРеф = доц (фиресторе, 'тест подаци', е.таргет.парентНоде.цхилдрен[0].гетАттрибуте("дата-ид"));
чекати делетеДоц (доцРеф)
.онда(() => {
конзола.Пријава(`${е.таргет.парентНоде.цхилдрен[0].тектЦонтент} је успешно обрисан.`)
})
.улов(грешка => {
конзола.лог (грешка);
})
}
Пренесите горњу функцију у дугме Делете. Он уклања податке из базе података и ДОМ-а када корисник кликне на њих.
Упарите Фиребасе са својим најбољим фронтенд оквиром
Фиребасе вам помаже да пишете мање кода док тражите податке директно са клијентске стране. Поред Реацт-а, подржава и друге ЈаваСцрипт оквире, укључујући Ангулар.јс, Вуе.јс и многе друге.
Сада када сте видели како функционише са Реацт-ом, можда бисте желели да научите да га упарите са Ангулар.јс.
