Поскольку Firebase выпустила свою новую модульную версию 9 для Интернета, подключение React к Firebase стало еще проще. Мы покажем вам, как с помощью одного короткого крючка.

Создание целой серверной системы или простой авторизации для приложения иногда может оказаться непосильной задачей. Особенно, если вы, как и я, только начали погружать пальцы в океан бэкенд-разработки. Вот почему одним из моих любимых является Firebase.

Firebase ранее был отягощен своим размером, что добавляло довольно много времени на сборку и рендеринг. В версии 9 Firebase представляет модульную опцию для импорта и использования различных сервисов, предоставляемых Firebase, таких как авторизация, firestore и база данных в реальном времени.

В этой первой статье я покажу вам, как инициализировать Firebase в вашем приложении React, а в следующей статье я покажу вам, как импортировать пакеты и использовать их в вашем приложении.

Итак, давайте посмотрим, как подключить Firebase v 9 к вашему приложению React.

Создайте новое приложение React (необязательно)

Предполагая, что у вас еще нет запущенного и работающего проекта React, самый простой способ запустить новый — запустить npx create-react-app firebase-app в командной строке, дождаться завершения инициализации, а затем перейти к новой папке вашего приложения React с помощью работает cd firebase-app.

Нам также нужно установить наши зависимости. Мы будем использовать модуль Firebase NPM для подключения к нашей базе данных Firebase и модуль dotenv NPM для хранения наших учетных данных конфигурации. В папке firebase-app запустите npm install firebase dotenv --save и дождитесь окончания установки.

На этом этапе не стесняйтесь удалять любые файлы, которые вы не будете использовать, например. App.test.js, reportWebVitals.js и setupTests.js. Если вы решите удалить их, не забудьте также удалить импорт из index.js.

Запустите npm start, чтобы убедиться, что все работает и ваше приложение работает!

Настройка дотенва

Создайте новый файл в корневой папке проекта с именем .env.development. Здесь мы будем хранить наши учетные данные конфигурации, которые на следующем шаге мы будем использовать для инициализации Firebase в нашем приложении. Ваши учетные данные конфигурации можно найти в консоли Firebase, щелкните шестеренку в меню слева, выберите «Настройки проекта» и прокрутите вниз (почти) до конца.

Добавить учетные данные конфигурации в файл dotenv не сложнее, чем следовать синтаксису ИМЯ=ЗНАЧЕНИЕ. Однако, чтобы наше приложение React могло получить эти переменные среды, нам нужно добавить к ним префикс REACT_APP_, как описано в документации по созданию приложения React. Обратите внимание: если вы используете другую среду, а не приложение Create React (например, Gatsby), префикс переменных среды может отличаться (например, GATSBY_).

Если вы планируете использовать это приложение также для производства или хотите протестировать сборку, создайте идентичный файл, все еще в корневой папке проекта, с именем .env.production. Здесь вы можете просто заполнить те же учетные данные конфигурации, что и для разработки, или вы можете заполнить учетные данные конфигурации отдельного проекта. Использование учетных данных конфигурации другого проекта позволит вам использовать одну базу данных для разработки и другую базу данных для производства*.

* Проверить, какой процесс вы запускаете, не сложнее, чем поставить (или console.log) {process.env.NODE_ENV} в оператор возврата вашего приложения и запустить приложение!

Крюк, линии и функции

В src вашего проекта создайте две папки: hooks и services. В папке services создайте файл с именем firebase.js. В папке hooks создайте файл с именем useFirebase.js.

firebase.js

В этом файле мы инициализируем наше приложение Firebase. С Firebase v9 это не сложнее, чем импортировать функцию initializeApp из "firebase/app". Скопируйте объект firebaseConfig из настроек проекта в консоли Firebase и замените все значения переменными среды, объявленными в вашем файле dotenv, например. process.env.REACT_APP_FIREBASE_APIKEY.

Нашим экспортом по умолчанию будет функция с именем getFirebase, которая вернет нам экземпляр клиента Firebase. Мы будем использовать этот экземпляр в нашем хуке useFirebase.

использоватьFirebase.js

Мы собираемся преобразовать наш экземпляр с !!. Если вы не знакомы с использованием !! в JavaScript, это один из способов преобразовать нелогическое значение в логическое значение. На мой взгляд, самый простой и стильный. Итак, почему мы это делаем? Это не только потому, что это выглядит круто, но и для мер безопасности. Помните, как наша функция getFirebase возвращает нам весь инициализированный клиент Firebase, если мы console.log то, что нам возвращается, мы можем видеть, что наши учетные данные конфигурации раскрываются в возвращаемом объекте под _options. Это также верно для версии сборки нашего приложения, что означает, что любой, у кого установлены React devtools, сможет увидеть наши учетные данные конфигурации и, таким образом, получить доступ к нашей базе данных. Если вместо этого мы предоставим логическое значение, это будет безопасный способ работы с firebase. Самому Firebase все равно, что у вас нет доступа к возвращаемому клиенту, лишь бы на сайте был подключенный клиент Firebase.

Тестирование соединения

Чтобы использовать наш новый хук useFirebase, мы просто импортируем его в наш корневой компонент в App.js и назначаем его переменной. Я нахожу firebase очень интуитивно понятным, но вы, конечно, можете назвать его как хотите.

Если мы console.log присвоим нашей переменной значение useFirebase, мы увидим, что сначала она возвращает false, а после установления соединения возвращает true. В следующей статье мы покажем вам, как это можно использовать для работы с другими функциями Firebase (такими как firestore, хранилище, аутентификация и т. д.). Но пока мы можем проверить, работает ли хук, либо записав его в журнал, либо (мой предпочтительный способ) записав его в нашем операторе возврата вместе с логическим оператором И и чем-то, что React должен отобразить.

Стоит отметить, что независимо от того, предоставили ли мы правильные учетные данные конфигурации или нет, наш хук возвращает true после инициализации клиента Firebase. Единственный способ узнать, правильно ли мы подключили приложение, — это попытаться получить доступ к Firebase, что мы покажем вам, как это сделать в следующей статье!

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.