Како да повежете своју Реацт апликацију са Фиребасе-ом

Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.

Према истраживању Стацк Оверфлов из 2022. године, 21,14 одсто програмера користи Фиребасе, што га чини четвртом најпопуларнијом платформом у облаку. То је технологија која се развија за беспрекорну интеграцију позадине.

Са Фиребасе-ом можете развити апликацију са пуним стеком без писања ниједног реда позадинског кода. Научите како да повежете своју Реацт.јс апликацију са Фиребасе-ом данас и градите у покрету.

Инсталирајте Фиребасе пакет

После креирање ваше Реацт апликације, промените директоријум у основну фасциклу свог пројекта и инсталирајте Фиребасе пакет тако што ћете покренути:

нпм инсталирај фиребасе

Додајте своју Реацт апликацију у Фиребасе пројекат

Следећи корак је креирање Фиребасе пројекта и повезивање са вашом Реацт апликацијом. Иди на Фиребасе конзола:

1. Кликните Додајте пројекат да започнете нови Фиребасе пројекат.
2. Унесите назив пројекта, а затим кликните Настави.
3. Кликните Настави на следећој страници.
4. Изаберите свој Фиребасе налог из падајућег менија или кликните Направи нови налог ако га већ немате.
5. На крају, кликните Креирајте пројекат.
6. Кликните Настави када се процес заврши.
7. Затим кликните на икону Веб () у горњем левом углу следеће странице да бисте подесили Фиребасе за веб.
8. Унесите надимак за своју апликацију у дато поље. Затим кликните Региструјте апликацију.
9. Копирајте генерисани код и сачувајте га за следећи корак (о коме се говори у следећем одељку).
10. Кликните Наставите до конзоле.
11. Постоји много опција на следећој страници. Померите се надоле и изаберите Цлоуд Фиресторе пошто у овом случају само треба да подесите базу података.
12. Затим кликните Креирајте базу података.
13. Кликните Следећи. Изаберите жељену локацију Фиресторе из падајућег менија.
14. Затим кликните Омогући да креирате Фиресторе базу података.

Иницијализујте Фиребасе у вашој Реацт апликацији

Направите нову фасциклу унутар свог пројекта срц именик. Можете позвати ово фиребасе_сетуп. Затим креирајте а фиребасе.јс датотеку у тој фасцикли. Затим налепите претходно генерисани код у ову датотеку.

За сада, можете да ускладиштите конфигурациони објекат (фиребасеЦонфиг) унутар а .енв фајл. Али размислите о коришћењу сигурнијег начин да маскирате тајне Реацт-а у производњи. Подаци које чувате у а .енв датотека може лако да процури у изради ваше апликације.

На пример, да бисте унели Фиребасе тајни кључ своје апликације у .енв фајл:

РЕАЦТ_АПП_апиКеи = иоурФиребасеАццессКеи

Дакле, можете фино подесити генерисани код на следећи начин:

увоз { инитиализеАпп } из "фиребасе/апп";
увоз { гетФиресторе } из „@фиребасе/фиресторе“
конст фиребасеЦонфиг = {
апиКеи: процес.енв.РЕАЦТ_АПП_апиКеи,
аутхДомаин: процес.енв.РЕАЦТ_АПП_аутхДомаин,
пројецтИд: процес.енв.РЕАЦТ_АПП_пројецтИд,
сторагеБуцкет: процес.енв.РЕАЦТ_АПП_сторагеБуцкет,
мессагингСендерИд: процес.енв.РЕАЦТ_АПП_мессагингСендерИд,
аппИд: процес.енв.РЕАЦТ_АПП_аппИд,
Ид мерења: процес.енв.РЕАЦТ_АПП_меасурементИд
};
конст апп = инитиализеАпп (фиребасеЦонфиг);
извозконст фиресторе = гетФиресторе (апликација)

Тестирајте своју Фиребасе везу

Можете тестирати везу слањем лажних података у Фиресторе. Почните креирањем а ручке фолдер унутар вашег пројекта срц именик. Направите обрађивач за слање унутар ове датотеке. Можеш назвати ово хандлесубмит.јс, на пример:

увоз { аддДоц, колекција } из „@фиребасе/фиресторе“
увоз {фиресторе} из "../фиребасе_сетуп/фиребасе"
конст хандлеСубмит = (тестдата) => {
конст реф = збирка (фиресторе, "тест_дата") // Фиребасе ово креира аутоматски
дозволити подаци = {
 тестДата: тестни подаци
 }
покушати {
 аддДоц (реф, подаци)
 } улов(ерр) {
конзола.лог (грешка)
 }
}
извозУобичајено хандлеСубмит

Онда унутра Апп.јс:

увоз './Апп.цсс';
увоз хандлеСубмит из './хандлес/хандлесубмит';
увоз { усеРеф } из 'реаговати';
функцијаАпликација() {
конст датаРеф = усеРеф()
конст субмитхандлер = (е) => {
е.превентДефаулт()
хандлеСубмит(датаРеф.Тренутни.вредност)
 датаРеф.цуррент.валуе = ""
 }
повратак (
<див цлассНаме="Апликација">
<форм онСубмит={субмитхандлер}>
<тип уноса= "текст" реф={датаРеф} />
<тип дугмета = "прихвати">сачувати</button>
</form>
</div>
 );
}
извозУобичајено Апликација;

Покрените своју Реацт апликацију и покушајте да пошаљете податке путем обрасца. Освежите конзолу Фиребасе базе података да бисте видели послате информације у својој колекцији. Са основама на месту, можете истражити многе друге ствари које Фиребасе може да уради да видите како га најбоље искористити.

Градите у покрету уз Фиребасе и Реацт

Фиребасе је свестрано решење за позадину као услуга које вам омогућава да ефикасно скалирате своју апликацију. Када повежете своју Реацт апликацију, можете искористити њене бројне функције да бисте изградили своју веб локацију по свом укусу.

На пример, Фиребасе комплет алата за аутентификацију је једна од функција које бисте можда желели да истражите.