Рубрики
Без рубрики

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

Ashish Nandan Singh React и Firebase – это все, что вам нужно для того, чтобы принять вашу веб-аппса Много современных историй веб-разработчиков, не имею хороших окончаний из-за сложного количества технологий, связанных с технологиями, и подход к разработке, принятый для проделанной работы. Реальный вопрос, как может

Автор оригинала: FreeCodeCamp Community Member.

Ashish Nandan Singh

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

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

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

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

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

Так вот то, что мы собираемся прикрыть сегодня:

  • Создайте простое приложение React при создании React-App
  • Войдите в консоль Firebase и создайте новый проект
  • Разверните его на Firebase Хостинг с одной простой командой

Когда я изначально пытался развертывать Реагировать Веб-приложение для Firebase Хостинг и хотел получить веб-приложение Вверх и бега, я столкнулся с несколькими препятствиями. Я выяснил, что может быть полезно скомпилировать все исследования, которые я провел в полной статье, чтобы помочь сообществу. Так что давайте начнем.

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

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

Часть 1 – Создание приложения RACT

Вы, вероятно, знаете, что Create-raction-app myApp Лучше всего создать базовую бойную табличку для приложения React. Он не только создает очень базовую котующую табличку, но также добавляет необходимые зависимости, необходимые для реагирования на работу.

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

Начать, нам нужно получить Create-React-App установлен на нашей машине.

$ npm install -g create-react-app

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

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

$ create-react-app myapp

Это создаст каталог под названием MyApp Отказ Теперь нам нужно перемещаться в каталог и запустить команду ниже.

$ cd myapp$ npm start

После того, как вы запустите команду выше, локальный DEV-сервер должен запускаться и отображать начальное приложение Rect React в месте localhost: 3000.

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

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

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

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

Давайте посмотрим на История Firebase перед тем, как установить его.

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

Вернувшись в 2011 году, прежде чем известен как Firebase, это была запускающая сторона. ОБЕСПЕЧЕНИЕ Как продукт предоставлен разработчикам с API, который позволил интеграцию онлайн-функциональности в чате на их веб-сайт.

Компания заметила, что разработчики используют ОБЕСПЕЧЕНИЕ, чтобы синхронизировать данные приложения, такие как игровое состояние в режиме реального времени, через их пользователей, а не просто сообщению чата.

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

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

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

Логин Firebase

Так что давайте начнем с этого: перейти к https://firebase.google.com/ и войдите в систему с вашей учетной записью Google. Как только вы вошли в систему, нажмите Перейти к консоли Отказ Вы будете представлены с возможностью Создать новый проект Отказ

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

Часть 3 – Firebase & React

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

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

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

Нажмите на начать работу.

Перейдите в свой корневой каталог и введите команду выше в свой терминал. Это загрузит инструменты FireBase на вашем компьютере.

Далее и последний шаг – это инициализировать FireBase и развернуть исходный код в вашем каталоге для Firebase.

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

Реагирование повторно посещение, как обещано

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

Перейдите к каталогу, где создается ваше приложение.

Путь React Works заключается в том, что он позволяет создать версию сборки. Это гораздо министерзированная версия всех библиотеки кода Mammoth, которая она устанавливает, если у вас довольно плотное приложение.

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

$ npm run build

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

Заключение

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

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