Мы создаем наши приложения React, но мы можем просматривать их только на своем собственном компьютере. Как мы можем опубликовать его публично? Давайте рассмотрим это вместе
Во-первых, давайте внесем необходимые коррективы в приложение перед его публикацией.
Что это ?
Шаг 1.Протестируйте свои коды. Самый простой способ — протестировать все наши функции и компоненты в браузере. Мы можем протестировать с блокировкой try-catch наши функции, запросы API и т. д., чтобы получить более здоровые результаты ошибок. Если есть ошибки, мы можем увидеть наши выходные данные ошибок в консоли.
Шаг 2. Оптимизируйте код, чтобы повысить производительность. Например, улучшения, сделанные с помощью функции React.memo. Если кратко обобщить функцию React.memo, то React.memo — это компонент высшего уровня. Если ваш компонент отображается с теми же результатами с теми же реквизитами, мы можем сохранить и вызвать его с помощью React.memo, этот процесс повысит производительность приложения.
Шаг 3. Создайте рабочее приложение.
Шаг 4. Разверните приложение
Это были наши необходимые настройки. Теперь, прежде чем мы перейдем к этапу публикации, давайте добавим улучшение производительности, о котором я упоминал в шаге 2.
Обычно мы импортируем наши компоненты непосредственно в наше приложение, но недостатком этого является то, что App.js загружает все компоненты непосредственно в локальный каталог при первой загрузке, чего мы не хотим, потому что, если он загрузит все компоненты, произойдет потеря производительности. .Хорошо, если мы будем загружать компоненты на локальный сервер только тогда, когда это необходимо, мы улучшим производительность нашего приложения, верно? Если мы воспользуемся для этого функцией React.lazy, то получим то, что хотим.
Мы называем наши компоненты, как в строках 6 и 7. Поэтому при первой установке приложения мы не загружаем все компоненты, а загружаем только нужные компоненты.
Когда мы нажимаем на второй компонент, мы видим, что наш счетчик и наш второй компонент загружается, поэтому мы не испытываем потери производительности при первой загрузке нашего приложения.
Теперь мы можем создать наше приложение (Шаг 3). Запустите нашу команду сборки с помощью терминала и получите наш файл сборки.
После запуска нашего кода на терминале создается наш файл сборки. Этот файл (сборка) содержит весь код, который вам нужно развернуть в конце. Теперь, когда все наши тесты и оптимизации завершены, последний шаг — развернуть приложение через firebase. .Откройте firebase и создайте проект.
Теперь мы увидим код пакета для установки, скопируйте этот код, затем перейдите в терминал и вставьте, запустите.
Теперь давайте инициализируем собственный проект. Так же, как и в первом шаге, запустите наш код с помощью терминала, и если вы не вошли в систему до этого, вы увидите экран входа в систему, и вы должны войти в систему.
После входа в систему и инициализации firebase вы увидите это сообщение, вам нужно написать «y» и нажать Enter
Выберите свое приложение и общедоступный каталог, а не общедоступный файл, вам нужно написать сборку (файл). Я упоминал ранее
Шаги были такими, теперь давайте развернем.
Скопируйте код, откройте терминал и вставьте, запустите. Этот код будет развертывать ваше реагирующее приложение
Да, мы сделали это, теперь щелкните URL-адрес хостинга, и вы увидите свое приложение :)
Мой основной URL-адрес приложения: https://deploy-app-test-3aa60.web.app
Ссылки на эту статью:
Я объяснил вам, как опубликовать ваше реагирующее приложение на Firebase. Я надеюсь, что это было полезно, я был бы очень признателен, если бы вы могли прислать мне части, которые, по вашему мнению, отсутствуют или неверны.
Контакты: LinkedIn
