Използвайте Firebase за вашето резервно хранилище на данни и разработвайте лесни приложения с лекота.
Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.
Според проучването на Stack Overflow за 2022 г. 21,14 процента от разработчиците използват Firebase, което я прави четвъртата най-популярна облачна платформа. Това е развиваща се технология за безпроблемно интегриране на бекенда.
С Firebase можете да разработите приложение с пълен стек, без да пишете нито един ред бекенд код. Научете как да свържете вашето приложение React.js с Firebase днес и да надграждате в движение.
Инсталирайте пакета Firebase
След създаване на вашето приложение React, променете директорията в главната папка на вашия проект и инсталирайте пакета Firebase, като изпълните:
npm Инсталирай firebase
Добавете вашето приложение React към проект на Firebase
Следващата стъпка е да създадете Firebase проект и да го свържете с вашето приложение React. Отидете на Firebase конзола:
- Кликнете Добавете проект за стартиране на нов проект във Firebase.
- Въведете име на проект, след което щракнете продължи.
- Кликнете продължи на следващата страница.
- Изберете своя акаунт във Firebase от падащото меню или щракнете Създаване на нов акаунт ако все още нямате такъв.
- Накрая щракнете Създайте проект.
- Кликнете продължи след като процесът приключи.
- След това щракнете върху иконата за уеб () към горния ляв ъгъл на следващата страница, за да настроите Firebase за мрежата.
- Въведете псевдоним за вашето приложение в предоставеното поле. След това щракнете Регистрирайте приложение.
- Копирайте генерирания код и го запазете за следващата стъпка (обсъдена в следващия раздел).
- Кликнете Продължете към конзолата.
- Има много опции на следващата страница. Превъртете надолу и изберете Cloud Firestore тъй като в този случай трябва само да настроите база данни.
- След това щракнете Създайте база данни.
- Кликнете Следващия. Изберете предпочитаното от вас местоположение на Firestore от падащото меню.
- След това щракнете Активирайте за създаване на база данни на Firestore.
Инициализирайте Firebase във вашето приложение React
Създайте нова папка във вашия проект src указател. Можете да извикате това firebase_setup. След това създайте a firebase.js файл в тази папка. След това поставете генерирания по-рано код в този файл.
Засега можете да съхранявате конфигурационния обект (firebaseConfig) в a .env файл. Но обмислете използването на по-сигурен начин за маскиране на тайните на React в производството. Данните, които съхранявате в a .env файл може лесно да изтече в компилацията на приложението ви.
Ако използвате опцията .env, добавете „REACT_APP“ към всяко име на променлива вътре .env. В противен случай приложението ви няма да чете низовете. Освен това рестартирайте вашия React сървър всеки път, когато промените подробностите в .env файл.
Например, за да въведете секретния ключ на Firebase на вашето приложение в .env файл:
REACT_APP_apiKey = вашият FirebaseAccessKey
По този начин можете да настроите фино генерирания код, както следва:
импортиране { 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 (приложение)Тествайте връзката си с Firebase
Можете да тествате връзката, като изпратите фиктивни данни към Firestore. Започнете със създаване на a дръжки папка във вашия проект src указател. Създайте манипулатор за изпращане в този файл. Можете да се обадите на това handlesubmit.js, например:
импортиране { addDoc, колекция } от "@firebase/firestore"
импортиране { пожарна } от "../firebase_setup/firebase"конст handleSubmit = (testdata) => {
конст ref = колекция (firestore, "test_data") // Firebase създава това автоматичнопозволявам данни = {
testData: тестови данни
}опитвам {
addDoc (справка, данни)
} улов(грешка) {
конзола.log (грешка)
}
}
износпо подразбиране handleSubmit
После вътре App.js:
импортиране './App.css';
импортиране handleSubmit от './handles/handlesubmit';
импортиране {useRef} от 'реагира';функцияПриложение() {
конст dataRef = useRef()конст submithandler = (e) => {
д.preventDefault()
handleSubmit(dataRef.текущ.стойност)
dataRef.current.value = ""
}връщане (
<div className="Приложение">
<форма onSubmit={submithandler}>
<тип вход = "текст" ref={dataRef} />
<тип бутон = "Изпращане">Запазване</button>
</form>
</div>
);
}
износпо подразбиране Приложение;
Стартирайте вашето приложение React и опитайте да изпратите данни чрез формуляра. Обновете конзолата за база данни на Firebase, за да видите изпратената информация във вашата колекция. С основите на място можете да изследвате много други неща, които Firebase може да направи за да видите как най-добре да го използвате.
Градете в движение с Firebase и React
Firebase е универсално решение за бекенд като услуга, което ви позволява ефективно да мащабирате приложението си. След като свържете вашето приложение React, можете да използвате многобройните му функции, за да създадете уебсайта си по ваш вкус.
Например комплектът инструменти за удостоверяване на Firebase е една от функциите, които може да искате да проучите.