Используйте Firebase для внутреннего хранилища данных и с легкостью разрабатывайте простые приложения.
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Согласно опросу Stack Overflow 2022 года, 21,14% разработчиков используют Firebase, что делает ее четвертой по популярности облачной платформой. Это развивающаяся технология для бесшовной интеграции серверной части.
С помощью Firebase вы можете разработать полнофункциональное приложение, не написав ни единой строки внутреннего кода. Узнайте, как подключить ваше приложение React.js к Firebase сегодня и строить на ходу.
Установите пакет Firebase
После создание вашего приложения React, измените каталог на корневую папку вашего проекта и установите пакет Firebase, выполнив:
нпм установить огневая база
Добавьте свое приложение React в проект Firebase
Следующий шаг — создать проект Firebase и связать его с вашим приложением React. Перейти к Консоль Firebase:
- Нажмите Добавить проект чтобы начать новый проект Firebase.
- Введите имя проекта, затем нажмите Продолжать.
- Нажмите Продолжать на следующей странице.
- Выберите свою учетную запись Firebase из раскрывающегося списка или нажмите Создать новый аккаунт если у вас его еще нет.
- Наконец, нажмите Создать проект.
- Нажмите Продолжать как только процесс завершится.
- Затем щелкните значок Интернета () в левом верхнем углу следующей страницы, чтобы настроить Firebase для Интернета.
- Введите псевдоним для вашего приложения в соответствующем поле. Затем нажмите Зарегистрировать приложение.
- Скопируйте сгенерированный код и сохраните его для следующего шага (обсуждается в следующем разделе).
- Нажмите Перейти к консоли.
- На следующей странице есть много вариантов. Прокрутите вниз и выберите Облако Firestore так как в этом случае вам нужно только настроить базу данных.
- Далее нажмите Создать базу данных.
- Нажмите Следующий. Выберите предпочитаемое местоположение Firestore из раскрывающегося списка.
- Затем нажмите Давать возможность для создания базы данных Firestore.
Инициализируйте Firebase в вашем приложении React
Создайте новую папку внутри вашего проекта источник каталог. Вы можете вызвать это firebase_setup. Далее создайте firebase.js файл внутри этой папки. Затем вставьте сгенерированный ранее код в этот файл.
На данный момент вы можете хранить объект конфигурации (firebaseConfig) внутри .env файл. Но рассмотрите возможность использования более безопасного способ замаскировать секреты React в производстве. Данные, которые вы храните в .env файл может легко просочиться в сборку вашего приложения.
При использовании параметра .env добавьте «REACT_APP» к имени каждой переменной внутри .env. В противном случае ваше приложение не будет читать строки. Кроме того, перезапускайте сервер React каждый раз, когда вы изменяете детали в .env файл.
Например, чтобы ввести секретный ключ Firebase вашего приложения в .env файл:
REACT_APP_apiKey = вашFirebaseAccessKey
Таким образом, вы можете настроить сгенерированный код следующим образом:
Импортировать {инициализировать приложение} от "firebase/приложение";
Импортировать {получитьFirestore} от "@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. Начните с создания ручки папка внутри вашего проекта источник каталог. Создайте обработчик отправки внутри этого файла. Вы можете назвать это хендлсумит.js, например:
Импортировать {добавить документ, коллекция} от "@firebase/firestore"
Импортировать { пожарный магазин } от "../firebase_setup/firebase"константа handleSubmit = (тестовые данные) => {
константа ref = коллекция (firestore, "test_data") // Firebase создает это автоматическипозволять данные = {
тестовые данные: тестовые данные
}пытаться {
addDoc (ссылка, данные)
} ловить(ошибка) {
консоль.лог (ошибка)
}
}
экспортпо умолчанию ручкаОтправить
Затем внутри App.js:
Импортировать './App.css';
Импортировать ручкаОтправить от './ручки/дескриптор отправки';
Импортировать { использовать ссылку } от 'реагировать';функцияПриложение() {
константа dataRef = использоватьRef()константа отправить обработчик = (е) => {
е.preventDefault()
ручкаОтправить(dataRef.текущий.ценить)
dataRef.current.value = ""
}возвращаться (
<div имя_класса ="Приложение">
<форма onSubmit={submithandler}>
<тип ввода= "текст" ссылка={данныеRef} />
<тип кнопки = "представлять на рассмотрение">Сохранять</button>
</form>
</div>
);
}
экспортпо умолчанию Приложение;
Запустите приложение React и попробуйте отправить данные через форму. Обновите консоль базы данных Firebase, чтобы увидеть представленную информацию в вашей коллекции. Имея базовые знания, вы можете изучить множество других что может сделать Firebase чтобы увидеть, как лучше всего использовать его.
Создавайте на ходу с Firebase и React
Firebase — это универсальное серверное решение как услуга, позволяющее эффективно масштабировать ваше приложение. Как только вы подключите свое приложение React, вы сможете использовать его многочисленные функции для создания своего веб-сайта по своему вкусу.
Например, инструментарий аутентификации Firebase — это одна из функций, которую вы, возможно, захотите изучить.
