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

Создайте и разверните личную веб-страницу с React (часть I)

Создание личного приложения за 20 минут с использованием страниц React и GitHub .. Теги с JavaScript, ES6, реагируют.

Предварительные условия

Вам нужно на вашем компьютере установлен

  • Nodejs (версия> 6.10 хорошая)
  • NPM (версия> 5.12 в порядке)

Вам также нужно:

  • Счет GitHub
  • Клиент Git Command-Line

Создание проекта

После проверки все правильно установлено. Мы можем начать наш проект с помощью следующей команды NPX Create-ract-app My-App Затем мы установим пакет GH-PAGES в качестве «dev-зависимости» приложения CD My-App NPM Установите GH-страницы --save-dev Характеристики Мы добавим некоторые свойства для Package.json. На верхнем уровне добавьте свойство домой:

//...
"homepage": "http://gitname.github.io/my-app"

[Gitname] → Ваше имя пользователя GitHub [My-App] → Ваш путь проекта, в этом примере My-App Также давайте добавим некоторые пользовательские сценарии для развертывания Page Pages, в разделе «Сценарии»: {…} нашего Package.json

...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Ссылка на репозиторий Под нашим путь проекта давайте создадим Git Reppo: Git init Это создаст пустой файл .git. Теперь мы должны добавить URL удаленный репозиторий на наше репо: Git Remote Добавить Происхождение https://github.com/gitname/my-app.git

Развертывание

Давайте теперь будем генерировать производственную сборку вашего приложения и развернуть его на страницы GitHub. NPM Run. развертывать

Ваше приложение теперь должно быть доступно на указанном вами URL.

Что здесь случилось?

Когда мы выполняем команду запуска, библиотека нажимает все встроенные файлы в филиал Gh-Pages, и GitHub автоматически принимает эту ветку и создает домен и публикует наш код.

  • (Необязательно) толкает источники для мастера Я рекомендую толкать исходные файлы на ветвь Master, чтобы сохранить источники, способные изменения в любое время из любого места.
git add .
git commit -m "First source code commit"
git push origin master

Следующие шаги: как добавить контент

Это первый результат для моего проекта.

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

Оригинал: “https://dev.to/migueloop/create-and-deploy-a-personal-web-page-with-react-parti-mce”