Kuinka ottaa React-sovellus käyttöön ilmaiseksi GitHub-sivuilla

Jos sinulla on projekti ja haluat isännöidä sitä ilmaiseksi ostamatta verkkotunnusta, GitHub-sivujen käyttö on loistava valinta. GitHub Pages muuntaa arkistot verkkosivustoiksi ja antaa sinun isännöidä rajattomasti projektisivustoja.

React-sivuston käyttöönotto navigoinnin avulla vaatii lisämäärityksiä verrattuna staattisen sivuston käyttöönottoon. Tämä opetusohjelma opastaa sinut koko prosessin läpi GitHub-tietovaraston luomisesta isännöidyn sivuston luomiseen.

Luo React-sovellus

Esittelytarkoituksiin sinun täytyy Luo React-projekti reitityksellä, jonka otat käyttöön myöhemmin. Kuitenkin, jos sinulla on olemassa Reagoi projekti, voit ohittaa tämän vaiheen.

Suorita terminaalissa luo-reagoi-sovellus komento React-projektin nopeaan rakentamiseen:

npx create-react-app react-gh

Siirry luotuun kansioon ja käynnistä sovellus.

npm ajon aloitus

Avaa seuraavaksi haluamasi projektikansio koodieditori. Vuonna src kansio, poista kaikki paitsi App.js ja index.js. Korvaa App.js: n sisältö seuraavalla:

function App() {
 paluu (


Github-sivut

Reactin käyttöönotto Githubissa




 );
}
Vie oletussovellus;

Lisää reititys

Jos haluat lisätä reitityksen sovellukseesi, asenna ensin react-router-dom:

npm install react-router-dom

Lisää App.js: ssä linkki tietosivulle:

tuo { Link } "react-router-dom":sta;
function App() {
 paluu (


Noin
Github-sivut

Reactin käyttöönotto Githubissa




 );
}
Vie oletussovellus;

Koska App.js toimii kotisivuna, sinun tarvitsee vain luoda Noin komponentti:

const Tietoja = () => {
 paluu ( 


Koti
Tietoja sivusta




 );
}
vienti oletus Tietoja;

Nyt sinun on luotava reitit ja määritettävä React-reititin.

Muokkaa index.js: ää vastaamaan URL-osoitetta vastaaviin komponentteihin:

tuonti React from "react";
tuo ReactDOM "react-domista";
tuo sovellus osoitteesta "./App";
tuonti { HashRouter, Routes, Route } "react-router-dom":sta;
tuonti Tietoja kohteesta "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("juuri")
);

Huomaa kuinka käytit HashRouter sijasta BrowserRouter. Käyttämällä BrowserRouter aiheuttaisi 404-virheen. Tämä johtuu siitä, että reititys toimii eri tavalla GitHub-sivuilla. Hashrouter ei aiheuta virhettä, koska se käyttää URL-osoitteen hash-osaa käyttöliittymän synkronointiin URL-osoitteen kanssa.

Viimeinen vaihe on kaikkien uusien muutosten tekeminen Gitiin:

git add .
git commit -m "Luo React-sovellus"

Luo GitHub-arkisto

Siitä asti kun GitHub-sivut isännöi sovellustasi muuntamalla arkiston verkkosivustoksi, sinun on luotava GitHub-arkisto. Siirry GitHub-tilillesi ja luo uusi arkisto, jolla on sama nimi kuin projektisi.

Lisää seuraavaksi GitHub-arkisto paikalliseen tietovarastoon etänä:

git remote add origin /.git

Työnnä lopuksi paikallinen arkisto GitHubiin:

git haara -M main
git push --set-upstream origin main

Ota React-sovellus käyttöön GitHub-sivuilla

Jotta voit käyttää GitHub-sivuja, sinun on ensin asennettava se:

npm asentaa gh-sivut

gh-sivuja avulla voit luoda gh-sivuja haara, jossa otat koodisi käyttöön.

Siirry seuraavaksi omaan package.json tiedosto ja lisää kotisivu, josta tulee sovelluksen koti-URL-osoite:

"kotisivu": "https://.github.io//",
"skriptit": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts testi",
 "eject": "react-scripts eject"
 }

Suorita seuraava komento suorittaaksesi käyttöönottoprosessin loppuun:

npm run käyttöönotto

Sovelluksesi on nyt otettu käyttöön GitHubissa ja voit vierailla siinä osoitteessa https://.github.io/.

Tee enemmän GitHub-sivuilla

GitHub Pages tarjoaa yksinkertaisen tavan ottaa verkkosivustoja käyttöön Internetiin ilmaiseksi. Vaikka näit vain kuinka voit ottaa käyttöön yksinkertaisen React-projektin, GitHub Pages antaa sinun tehdä paljon enemmän. Voit esimerkiksi luoda täydellisen blogin Jekyllin avulla ja jopa isännöidä sitä mukautetun verkkotunnuksen avulla.

Kuinka isännöidä verkkosivustoa ilmaiseksi GitHub-sivujen avulla

Lue Seuraava

Kirjailijasta