Kaip nemokamai įdiegti „React“ programą naudojant „GitHub“ puslapius

Jei turite projektą ir norite jį priglobti nemokamai, nepirkdami domeno, naudoti GitHub puslapius yra puikus pasirinkimas. „GitHub Pages“ paverčia jūsų saugyklas į svetaines ir leidžia priglobti neribotą skaičių projektų svetainių.

Norint įdiegti „React“ svetainę su naršymu, reikia papildomos konfigūracijos, palyginti su statinės svetainės diegimu. Šioje pamokoje sužinosite visą procesą nuo „GitHub“ saugyklos sukūrimo iki priglobtos svetainės.

Sukurkite programą „React“.

Demonstravimo tikslais jums reikia sukurti React projektą su maršruto parinkimu, kurį įdiegsite vėliau. Tačiau jei turite esamą Reaguoti projektą, nedvejodami praleiskite šį veiksmą.

Terminale paleiskite kurti-reaguoti-programėlę komanda greitai pastatyti „React“ projektą:

npx sukurti-reaguoti-app react-gh

Eikite į sukurtą aplanką ir paleiskite programą.

npm paleisties pradžia

Tada atidarykite projekto aplanką su pageidaujamu kodo redaktorius. Viduje konors src aplanką, ištrinkite viską, išskyrus App.js ir index.js. Pakeiskite App.js turinį taip:

function App() {
 grįžti (


Github puslapiai

„React“ diegimas „Github“.




 );
}
eksportuoti numatytąją programą;

Pridėti maršrutą

Norėdami pridėti maršrutą prie programos, pirmiausia įdiekite react-router-dom:

npm įdiegti react-router-dom

Programoje App.js pridėkite nuorodą į puslapį apie:

importuoti { Link } iš "react-router-dom";
function App() {
 grįžti (


Apie
Github puslapiai

„React“ diegimas „Github“.




 );
}
eksportuoti numatytąją programą;

Kadangi App.js veiks kaip jūsų pagrindinis puslapis, jums tereikia sukurti Apie komponentas:

const Apie = () => {
 grįžti ( 


Namai
Apie puslapį




 );
}
eksportuoti pagal nutylėjimą Apie;

Dabar turite sukurti maršrutus ir sukonfigūruoti „React“ maršrutizatorių.

Modifikuokite index.js, kad URL atitiktų atitinkamus komponentus:

importuoti React iš "reaguoti";
importuoti ReactDOM iš „react-dom“;
importuoti programą iš „./App“;
importuoti { HashRouter, Routes, Route } iš "react-router-dom";
importuoti Apie iš "./Apie";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Atkreipkite dėmesį, kaip naudojote HashRouter vietoj BrowserRouter. Naudojant BrowserRouter sukeltų 404 klaidą. Taip yra todėl, kad maršruto parinkimas GitHub puslapiuose veikia skirtingai. Hashrouter nekelia klaidos, nes naudoja URL maišos dalį, kad sinchronizuotų vartotojo sąsają su URL.

Paskutinis žingsnis yra atlikti visus naujus „Git“ pakeitimus:

git pridėti.
git commit -m "Sukurti React programą"

Sukurkite „GitHub“ saugyklą

Nuo „GitHub“ puslapiai priglobs jūsų programą konvertuodami saugyklą į svetainę, turite sukurti „GitHub“ saugyklą. Eikite į „GitHub“ paskyrą ir sukurkite naują saugyklą tokiu pačiu pavadinimu kaip ir jūsų projektas.

Tada pridėkite „GitHub“ saugyklą prie vietinės saugyklos kaip nuotolinę:

git nuotolinio pridėti kilmę /.git

Galiausiai perkelkite vietinę saugyklą į „GitHub“:

git filialas -M pagrindinis
git push --set-upstream origin main

Įdiekite „React“ programą „GitHub“ puslapiuose

Norėdami naudoti „GitHub“ puslapius, pirmiausia turėsite jį įdiegti:

npm įdiegti gh-puslapius

gh puslapiai leis jums sukurti gh puslapiai filialas, kuriame įdiegsite savo kodą.

Tada eikite į savo package.json failą ir pridėkite pagrindinį puslapį, kuris bus pagrindinis programos URL:

"pagrindinis puslapis": "https://.github.io//",
"skriptai": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "reaguoti scenarijai prasideda",
 "build": "react-scripts build",
 "testas": "reaguoti scenarijų testas",
 "eject": "reaguoti scenarijus išstumti"
 }

Vykdykite šią komandą, kad užbaigtumėte diegimo procesą:

npm paleisti dislokuoti

Dabar jūsų programa įdiegta „GitHub“ ir galite ją aplankyti adresu https://.github.io/.

Atlikite daugiau naudodami „GitHub“ puslapius

„GitHub Pages“ suteikia paprastą būdą nemokamai įdiegti svetaines internete. Nors matėte tik tai, kaip galite įdiegti paprastą „React“ projektą, „GitHub Pages“ leidžia padaryti daug daugiau. Pavyzdžiui, galite sukurti pilną tinklaraštį naudodami Jekyll ir netgi priglobti jį naudodami pasirinktinį domeną.

Kaip nemokamai priglobti svetainę naudojant „GitHub“ puslapius

Skaitykite toliau

Apie autorių