React и Firebase – это все, что вам нужно для размещения ваших веб-приложений

1656617897 react i firebase – eto vse chto vam nuzhno dlya

автор Ашиш Нандан Сингх

kE3b4TOXtlEYpwhRvtSMi87mkWPaTfzbWOC9

Многие современные истории веб-разработки не имеют хорошего конца из-за сложного количества привлеченных технологий и подход к разработке, принятый для выполнения работы.

Настоящий вопрос заключается в том, как мы можем сделать это путешествие менее болезненным, или я должен сказать, более плодотворным и эффективным? В идеале выбираемые технологии должны быть хорошо закреплены и иметь большую поддержку общины.

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

Предпосылки:

  • Вы знаете некоторые React, по крайней мере основы
  • У вас установлены Node.js и NPM
  • Вы знаете, как пользоваться командной строкой

Итак, вот что мы сегодня рассмотрим:

  • Создайте простую программу React с помощью create-react-app
  • Войдите в консоль Firebase и создайте новый проект
  • Разверните его на Firebase Хостинг с помощью одной простой команды

Когда я сначала попытался развернуть a Отреагировать веб-приложение к Firebase хостинг и хотел получить веб-приложение Я столкнулся с несколькими препятствиями. Я понял, что может быть полезно объединить все исследования, которые я проводил, в исчерпывающую статью, чтобы помочь сообществу. Итак начнем.

На высоком уровне эта статья разделена на три части:

  1. Получите очень основное Отреагировать приложение на месте
  2. Создать Firebase счет
  3. Подключите наши Firebase консоль к нашей Отреагировать приложение

Часть 1 – создайте приложение React

Вы, должно быть, это знаете create-react-app myapp это самый лучший способ создать базовый шаблон для программы React. Он не только создает очень простой шаблон, но и добавляет необходимые зависимости, необходимые для запуска React.

Если вы не осознаете настоящую магию и силу этой однострочной команды, попробуйте создать каталог React с нуля. Только тогда вы осознаете настоящую боль. Большое спасибо тем разработчикам, которые сначала настроили эту команду.

Чтобы начать, нам нужно получить create-react-app установлены на нашей машине.

$ npm install -g create-react-app

Флаг -g в команде выше устанавливает пакет NPM на машину глобально.

Когда это будет сделано, мы используем этот пакет для получения базового шаблона для React.

$ create-react-app myapp

Это создаст каталог под названием myapp. Теперь нам необходимо перейти в каталог и запустить команду ниже.

$ cd myapp$ npm start

После выполнения вышеприведенной команды локальный сервер разработчиков должен запустить и отобразить начальную программу React в этом месте локальный хост: 3000

Надеюсь, это было быстро и легко. У нас есть последний шаг, который нам нужно выполнить, но давайте посмотрим Firebase сначала. После этого мы вернемся к последнему шагу из React.

Часть 2 — Настройка Firebase

Давайте сначала разберемся, что Firebase перед тем, как мы погрузимся в его настройку.

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

Давайте посмотрим на историю Firebase, прежде чем настроить его.

Краткая история

Еще в 2011 году, до того как был известен как Firebase, это был стартап под названием Envolve. Envolve в качестве продукта предоставил разработчикам API, который позволил интегрировать функции онлайн-чата на их веб-сайт.

Компания заметила, что разработчики использовали Envolve для синхронизации данных программы, таких как состояние игры в режиме реального времени между своими пользователями, а не только сообщениями чата.

Это заставило основателей Envolve Джеймса Тамплина и Эндрю Ли разделить систему чата и архитектуру реального времени. В апреле 2012 года Firebase была создана как отдельная компания, которая предоставила функции Backend-as-a-Service в режиме реального времени.

После того, как его приобрела Google в 2014 году, Firebase быстро превратилась в многофункционального гиганта мобильной и веб-платформы, какова она сегодня.

Это единственное изображение описывает Firebase во всей его мощности.

AHeQftRHGKMPbL1hrGjjNwSy50WR1hznRDum
Одним словом Firebase

Вход в Firebase

Итак, давайте начнем с этого: выделите и войдите с помощью своего аккаунта Google. После того, как вы вошли, нажмите на Перейдите к консоли. Вам будет предоставлена ​​возможность Создайте новый проект.

После создания проекта у вас есть возможность добавить Firebase в любое мобильное приложение Android или iOS и даже веб-приложения.

Часть 3 – Firebase и React

Нажмите на опцию, чтобы Добавьте Firebase в веб-приложение. Вы получите диалоговое окно с фрагментом кода.

q29q6TWFRpO8fBSqa2Iew9yalAp1cv9xYTrr

Добавьте этот фрагмент кода в нижнюю часть своего index.html файл в вашем проекте. Убедитесь, что этот фрагмент кода добавлен перед любым из других тегов сценария в вашем index.html файл.

Если вы внимательно посмотрите на изображение выше, вы увидите, что в самом низу есть несколько ссылок. Нажмите первую ссылку и проверьте Начните работу с Firebase для веб-приложений. Вам будет представлен экран ниже.

RjW3YKRiGKdBHAOOVG4VIaaocSea-mfv03aT

Нажмите кнопку Начать.

mdzfKVYwIKbA52JVK2Cx06HwKoDZqfIoBffH

Выделите свой корневой каталог и введите команду выше в своем терминале. Это скачать инструменты Firebase на вашу машину локально.

Следующим и последним шагом является инициализация Firebase и развертывание исходного кода в вашем каталоге Firebase.

qy-wadU6iKB0MbUpuR5RiKNzchc4SMGZPuxF

После того, как вы нажали кнопку «Завершить», выполнили все приведенные выше действия и ввели их в свой терминал, у вас должен появиться список записей последнего развертывания, показанный на веб-странице.

u20bSEdlkw0FxqgixU3LvUx7yoChgPS1Iuzg

Повторное посещение React, как и было обещано

Помните, в React выше я сказал, что мы вернемся, чтобы сделать последнюю вещь? Сейчас мы это сделаем.

Выделите каталог, в котором создана программа.

Принцип работы React заключается в том, что позволяет создавать версию сборки. Это значительно уменьшенная версия всей огромной библиотеки кода, которую она устанавливает, если у вас достаточно плотная программа.

Чтобы получить эту минимизированную и сжатую версию, мы можем использовать наш терминал и одну очень полезную команду:

$ npm run build

Это создает новую папку в каталоге программы с именем строить. Эта папка содержит несколько файлов, которые являются важнейшими частями всей программы React.

Вывод

Если вы внимательно проделали все шаги и немного прочитали официальную документацию, все это должно быть простой прогулкой.

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

Добавить комментарий

Ваш адрес email не будет опубликован.