Како бесплатно применити Реацт апликацију са ГитХуб страницама

Ако имате пројекат и желите да га бесплатно хостујете без куповине домена, коришћење ГитХуб страница је одличан избор. ГитХуб Пагес конвертује ваша спремишта у веб локације и омогућава вам да угостите неограничене веб локације пројекта.

Примена Реацт локације са навигацијом захтева додатну конфигурацију у поређењу са постављањем статичне локације. Овај водич вас води кроз цео процес од креирања ГитХуб спремишта до хостованог сајта.

Направите Реацт апликацију

У сврху демонстрације, потребно је креирајте Реацт пројекат са рутирањем које ћете касније применити. Међутим, ако имате постојећу Реацт пројекат, слободно прескочите овај корак.

У терминалу покрените цреате-реацт-апп команда за брзо постављање Реацт пројекта:

нпк цреате-реацт-апп реацт-гх

Идите до креираног фолдера и покрените апликацију.

нпм рун старт

Затим отворите фасциклу пројекта са жељеном уредник кода. У срц фолдер, избришите све осим Апп.јс и индек.јс. Замените садржај у Апп.јс следећим:

фунцтион Апп() {
 повратак (


Гитхуб странице

Примена Реацт на Гитхуб




 );
}
извоз подразумеване апликације;

Додај рутирање

Да бисте својој апликацији додали рутирање, прво инсталирајте реаговати-рутер-дом:

нпм инсталл реацт-роутер-дом

У Апп.јс додајте везу на страницу са информацијама:

импорт { Линк } из "реацт-роутер-дом";
фунцтион Апп() {
 повратак (


О томе
Гитхуб странице

Примена Реацт на Гитхуб




 );
}
извоз подразумеване апликације;

Пошто ће Апп.јс деловати као ваша почетна страница, потребно је само да креирате О томе саставни део:

цонст О = () => {
 повратак ( 


Кућа
Абоут Паге




 );
}
екпорт дефаулт Абоут;

Сада морате да креирате руте и конфигуришете Реацт рутер.

Измените индек.јс тако да УРЛ одговара одговарајућим компонентама:

импорт Реацт фром "реацт";
импорт РеацтДОМ из "реацт-дом";
увоз апликације из "./Апп";
импорт { ХасхРоутер, Роутес, Роуте } из "реацт-роутер-дом";
импорт Абоут фром "./Абоут";
РеацтДОМ.рендер(



} />
}/>


,
 доцумент.гетЕлементБиИд("роот")
);

Обратите пажњу како сте користили ХасхРоутер уместо БровсерРоутер. Користећи БровсерРоутер би изазвало грешку 404. То је зато што рутирање функционише другачије на ГитХуб страницама. Хасхроутер не изазива грешку јер користи хеш део УРЛ-а за синхронизацију корисничког интерфејса са УРЛ-ом.

Последњи корак је уношење свих нових промена у Гит:

гит адд .
гит цоммит -м "Креирај Реацт апликацију"

Направите ГитХуб спремиште

Од ГитХуб странице ће угостити вашу апликацију претварањем спремишта у веб локацију, потребно је да креирате ГитХуб спремиште. Идите на свој ГитХуб налог и направите ново спремиште са истим именом као и ваш пројекат.

Затим додајте ГитХуб спремиште у своје локално спремиште као даљински:

гит даљинско додавање порекла /.гит

На крају, гурните локално спремиште на ГитХуб:

гит грана -М главна
гит пусх --сет-упстреам оригин маин

Поставите Реацт апликацију на ГитХуб странице

Да бисте користили ГитХуб странице, прво морате да га инсталирате:

нпм инсталирајте гх-странице

гх-пагес ће вам омогућити да креирате гх-пагес грана где ћете применити свој код.

Затим идите на своју пацкаге.јсон датотеку и додајте почетну страницу која ће бити почетна УРЛ адреса апликације:

"почетна страница": "хттпс://.гитхуб.ио//",
"скрипте": {
 "предеплои": "нпм рун буилд",
 "деплои": "гх-пагес -д буилд", 
 "старт": "реаговане скрипте почињу",
 "буилд": "реацт-сцриптс буилд",
 "тест": "тест реаговања скрипти",
 "ејецт": "реацт-сцриптс ејецт"
 }

Покрените следећу команду да бисте довршили процес постављања:

нпм рун деплои

Ваша апликација је сада распоређена на ГитХуб и можете је посетити на хттпс://.гитхуб.ио/.

Урадите више са ГитХуб страницама

ГитХуб Пагес пружа једноставан начин бесплатног постављања веб локација на интернет. Иако сте тек видели како можете да примените једноставан Реацт пројекат, ГитХуб Пагес вам омогућава да урадите много више. На пример, можете да креирате потпуни блог користећи Јекилл, па чак и да га хостујете користећи прилагођени домен.

Како бесплатно хостовати веб локацију користећи ГитХуб странице

Реад Нект

О аутору