Kā bez maksas izvietot React lietotni, izmantojot GitHub lapas

Ja jums ir projekts un vēlaties to mitināt bez maksas, neiegādājoties domēnu, GitHub Pages izmantošana ir lieliska izvēle. GitHub Pages pārvērš jūsu krātuves vietnēs un ļauj mitināt neierobežotu skaitu projektu vietņu.

Lai izvietotu React vietni ar navigāciju, ir nepieciešama papildu konfigurācija, salīdzinot ar statiskas vietnes izvietošanu. Šajā apmācībā ir sniegti norādījumi visam procesam, sākot no GitHub repozitorija izveides līdz mitinātai vietnei.

Izveidojiet React lietotni

Demonstrācijas nolūkos jums ir nepieciešams izveidot React projektu ar maršrutēšanu, ko izvietosit vēlāk. Tomēr, ja jums ir esošs Reaģēt projekts, droši izlaidiet šo soli.

Terminālī palaidiet izveidot-reaģēt-lietotni komanda, lai ātri izveidotu React projektu:

npx izveidot-react-app react-gh

Pārejiet uz izveidoto mapi un palaidiet lietojumprogrammu.

npm palaišanas sākums

Pēc tam atveriet projekta mapi ar vēlamo koda redaktors. Iekš src mapi, izdzēsiet visu, izņemot App.js un index.js. Aizstāt App.js saturu ar šādu:

function App() {

instagram viewer


 atgriezties (


Github lapas

React izvietošana vietnē Github




 );
}
eksportēt noklusējuma lietotni;

Pievienot maršrutēšanu

Lai programmai pievienotu maršrutēšanu, vispirms instalējiet reaģēt-router-dom:

npm instalējiet react-router-dom

Programmā App.js pievienojiet saiti uz lapu par:

importēt { Link } no "react-router-dom";
function App() {
 atgriezties (


Par
Github lapas

React izvietošana vietnē Github




 );
}
eksportēt noklusējuma lietotni;

Tā kā App.js darbosies kā jūsu sākumlapa, jums tikai jāizveido Par komponents:

const Par = () => {
 atgriezties ( 


Mājas
Par lapu




 );
}
eksporta noklusējuma Par;

Tagad jums ir jāizveido maršruti un jākonfigurē React maršrutētājs.

Modificējiet index.js, lai URL atbilstu attiecīgajiem komponentiem:

importēt React no "reaģēt";
importēt ReactDOM no "react-dom";
importēt lietotni no "./App";
importēt { HashRouter, Routes, Route } no "react-router-dom";
importēt About no "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("sakne")
);

Ievērojiet, kā lietojāt HashRouter tā vietā BrowserRouter. Izmantojot BrowserRouter radīs 404 kļūdu. Tas ir tāpēc, ka GitHub lapās maršrutēšana darbojas atšķirīgi. Hashrouter neizraisa kļūdu, jo tā izmanto URL jaucējdaļu, lai sinhronizētu lietotāja saskarni ar URL.

Pēdējais solis ir visu jauno Git izmaiņu veikšana:

git pievienot.
git commit -m "Izveidot React lietotni"

Izveidojiet GitHub repozitoriju

Kopš GitHub lapas mitinās jūsu lietojumprogrammu, pārvēršot repozitoriju par vietni, jums ir jāizveido GitHub repozitorijs. Dodieties uz savu GitHub kontu un izveidojiet jaunu repozitoriju ar tādu pašu nosaukumu kā jūsu projektam.

Pēc tam pievienojiet GitHub repozitoriju vietējai repozitorijai kā tālvadības pulti:

git remote pievienot izcelsmi /.git

Visbeidzot, pārvietojiet vietējo repozitoriju uz GitHub:

git filiāle -M galvenais
git push --set-upstream origin main

Izvietojiet React lietotni GitHub lapās

Lai izmantotu GitHub lapas, vispirms tā ir jāinstalē.

npm instalējiet gh-lapas

gh-lapas ļaus jums izveidot gh-lapas filiāle, kurā izvietosit savu kodu.

Tālāk dodieties uz savu pack.json failu un pievienojiet sākumlapu, kas būs lietotnes mājas URL:

"mājas lapa": "https://.github.io//",
"skripti": {
 "predeploy": "npm palaist build",
 "deploy": "gh-pages -d build", 
 "start": "sāk reaģēt-skripti",
 "build": "react-scripts build",
 "test": "reaģēt skriptu tests",
 "eject": "reaģēt-skripti izstumt"
 }

Palaidiet šo komandu, lai pabeigtu izvietošanas procesu:

npm palaist izvietošanu

Jūsu lietojumprogramma tagad ir izvietota GitHub, un varat to apmeklēt vietnē https://.github.io/.

Paveiciet vairāk, izmantojot GitHub lapas

GitHub Pages nodrošina vienkāršu veidu, kā bez maksas izvietot vietnes internetā. Lai gan jūs redzējāt tikai to, kā varat izvietot vienkāršu React projektu, GitHub Pages ļauj paveikt daudz vairāk. Piemēram, varat izveidot pilnvērtīgu emuāru, izmantojot Jekyll, un pat mitināt to, izmantojot pielāgotu domēnu.

Kā bez maksas mitināt vietni, izmantojot GitHub lapas

Lasiet Tālāk

Par autoru