В этой статье я познакомлю вас с некоторыми удивительными фокусами. Мы приступим к реализации проекта с использованием React.js и Node.js без каких-либо локальных установок. Все, что вам понадобится, — это стабильное и высококачественное подключение к Интернету, чтобы добиться этого замечательного подвига.

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

Начнем наше путешествие… ✈️

  1. Вставьте предоставленный URL-адрес в адресную строку вашего веб-браузера, чтобы посетить веб-сайт; Домашняя страница этого веб-сайта похожа на изображение, показанное ниже.
    URL-адрес: https://stackblitz.com/

2. Нажмите кнопку «Войти». После нажатия кнопки «Войти» мы перенаправимся на страницу, показанную ниже.

3. Войдите в свою учетную запись GitHub. После завершения процесса входа вы будете перенаправлены на страницу панели управления.

4. Вы увидите кнопку «Новый проект», позволяющую создать новый проект.

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

6. Нажмите на любой проект, и он автоматически создаст базовую настройку в соответствии с конкретными требованиями выбранного проекта. Здесь я создаю проект React JavaScript.

7. После завершения установки вы будете перенаправлены в редактор кода.

8. Как вы можете видеть на изображении выше, слева они имеют структуру папок. С правой стороны вы можете увидеть работающее приложение React, а в среднем контейнере находится редактор кода, напоминающий что-то вроде VS Code.

9. Вверху по центру вы увидите текст «React Starter». После этого текста находится значок открытого замка с раскрывающимся списком. Просто нажмите на этот значок, и откроется всплывающее окно.

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

11. Теперь давайте углубимся в самый важный аспект: безопасность нашего проекта. Поскольку он размещается в облаке, обеспечение его безопасности имеет первостепенное значение. На том же всплывающем экране, чуть ниже поля описания, вы найдете «URL-адрес проекта» и «Статус видимости». По умолчанию обе эти настройки предоставлено StackBlitz, с параметром видимости «public», что означает, что оно видно всем. Однако в целях безопасности нашего проекта нам необходимо изменить эти настройки.

12. Чтобы повысить безопасность, начните с изменения URL-адреса проекта на безопасную комбинацию букв и цифр, чтобы любому было трудно угадать URL-адрес. Затем измените статус видимости с «публичный» на «секретный (доступен по URL-адресу)». Это гарантирует безопасность вашего проекта.

13. Если вы хотите предоставить кому-либо доступ к редактированию проекта, просто поделитесь с ним URL-адресом проекта.

14. Давайте внесем изменения в код React и посмотрим, как это быстро отразится на панели вывода с правой стороны. Здесь я добавляю HTML-код, как показано на изображении ниже.

Преимущества StackBlitz:

  1. Не нужно ничего устанавливать на локальный компьютер.
  2. Легко поделитесь выходным URL-адресом с руководителем группы или клиентом для визуализации.
  3. Обеспечивает конфиденциальность проекта бесплатно.
  4. Вы можете создавать неограниченное количество проектов в разных технологиях.

Надеюсь, эта информация окажется полезной на вашем пути развития. Спасибо, что нашли время прочитать это.