Sådan implementerer du en React-app gratis med GitHub-sider

Hvis du har et projekt og ønsker at hoste det gratis uden at købe et domæne, er det et godt valg at bruge GitHub Pages. GitHub Pages konverterer dine arkiver til websteder og giver dig mulighed for at være vært for ubegrænsede projektwebsteder.

Implementering af et React-websted med navigation kræver ekstra konfiguration sammenlignet med implementering af et statisk websted. Denne tutorial leder dig gennem hele processen fra oprettelse af et GitHub-lager til at have et hostet websted.

Opret en React-app

Til demonstrationsformål skal du oprette et React-projekt med routing, som du vil implementere senere. Men hvis du har en eksisterende Reager projekt, er du velkommen til at springe dette trin over.

I terminalen skal du køre opret-reager-app kommando til hurtigt at stilladsere et React-projekt:

npx create-react-app react-gh

Naviger til den oprettede mappe og start din applikation.

npm løb start

Åbn derefter projektmappen med din foretrukne kode editor. I den src mappe, slet alt undtagen App.js og index.js. Erstat indholdet i App.js med følgende:

funktion App() {
 Vend tilbage (


Github sider

Implementering af React til Github




 );
}
eksport standard app;

Tilføj Routing

For at tilføje routing til din applikation skal du først installere reagere-router-dom:

npm installer react-router-dom

Tilføj linket til siden om i App.js:

importer { Link } fra "react-router-dom";
funktion App() {
 Vend tilbage (


Om
Github sider

Implementering af React til Github




 );
}
eksport standard app;

Da App.js vil fungere som din startside, behøver du kun at oprette Om komponent:

const Om = () => {
 Vend tilbage ( 


Hjem
Om side




 );
}
eksport standard Om;

Nu skal du oprette ruterne og konfigurere en React-router.

Rediger index.js for at matche URL'en til de respektive komponenter:

import Reager fra "reager";
importere ReactDOM fra "react-dom";
importer App fra "./App";
importer { HashRouter, Routes, Route } fra "react-router-dom";
importer Om fra "./Om";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Læg mærke til, hvordan du brugte HashRouter i stedet for BrowserRouter. Ved brug af BrowserRouter ville rejse en 404 fejl. Dette skyldes, at routing fungerer anderledes på GitHub-sider. Hashrouter rejser ikke en fejl, fordi den bruger hash-delen af ​​URL'en til at synkronisere brugergrænsefladen med URL'en.

Det sidste trin er at forpligte alle de nye ændringer til Git:

git tilføje.
git commit -m "Create React app"

Opret GitHub Repository

Siden GitHub-sider vil være vært for din applikation ved at konvertere depotet til et websted, skal du oprette et GitHub-depot. Gå til din GitHub-konto og opret et nyt lager med samme navn som dit projekt.

Tilføj derefter GitHub-depotet til dit lokale depot som en fjernbetjening:

git remote tilføje oprindelse /.git

Skub endelig det lokale lager til GitHub:

git branch -M main
git push --set-upstream oprindelse main

Implementer React-appen til GitHub-sider

For at bruge GitHub Pages skal du først installere det:

npm installere gh-pages

gh-sider giver dig mulighed for at oprette gh-sider filial, hvor du vil implementere din kode.

Gå derefter til din package.json fil og tilføj startsiden, som vil være appens hjemme-URL:

"hjemmeside": "https://.github.io//",
"scripts": {
 "predeploy": "npm køre build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts starter",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 }

Kør følgende kommando for at fuldføre installationsprocessen:

npm køre implementering

Din applikation er nu implementeret til GitHub, og du kan besøge den på https://.github.io/.

Gør mere med GitHub-sider

GitHub Pages giver en enkel måde at distribuere websteder til internettet gratis. Mens du kun så, hvordan du kan implementere et simpelt React-projekt, giver GitHub Pages dig mulighed for at gøre så meget mere. For eksempel kan du oprette en komplet blog ved hjælp af Jekyll og endda hoste den ved hjælp af et brugerdefineret domæne.

Sådan hoster du et websted gratis ved hjælp af GitHub-sider

Læs Næste

Om forfatteren