Hoe een React-app gratis te implementeren met GitHub-pagina's

Als je een project hebt en het gratis wilt hosten zonder een domein te kopen, is het gebruik van GitHub Pages een goede keuze. GitHub Pages converteert uw repositories naar websites en stelt u in staat een onbeperkt aantal projectsites te hosten.

Het implementeren van een React-site met navigatie vereist extra configuratie in vergelijking met het implementeren van een statische site. Deze tutorial leidt je door het hele proces, van het maken van een GitHub-repository tot het hebben van een gehoste site.

Maak een React-app

Voor demonstratiedoeleinden moet u: maak een React-project aan met routering die u later zult implementeren. Als u echter een bestaande Reageer project, sla deze stap gerust over.

Voer in de terminal de maak-reageer-app commando om snel een React-project te ondersteunen:

npx create-react-app react-gh

Navigeer naar de aangemaakte map en start uw applicatie.

npm run start

Open vervolgens de projectmap met uw voorkeur code-editor. In de src map, verwijder alles behalve App.js en index.js. Vervang de inhoud in App.js door het volgende:

functie App() {
 opbrengst (


Github-pagina's

React implementeren op Github




 );
}
export standaard app;

Routering toevoegen

Om routering aan uw toepassing toe te voegen, installeert u eerst reageren-router-dom:

npm install react-router-dom

Voeg in App.js de link toe aan de over-pagina:

importeer { Link } van "react-router-dom";
functie App() {
 opbrengst (


Wat betreft
Github-pagina's

React implementeren op Github




 );
}
export standaard app;

Aangezien App.js zal fungeren als uw startpagina, hoeft u alleen de Wat betreft onderdeel:

const Over = () => {
 opbrengst ( 


Thuis
Over pagina




 );
}
export standaard Over;

Nu moet u de routes maken en een React-router configureren.

Wijzig index.js zodat de URL overeenkomt met de respectieve componenten:

import Reageren vanuit "reageren";
importeer ReactDOM van "react-dom";
importeer app van "./App";
importeer { HashRouter, Routes, Route } van "react-router-dom";
import Over van "./Over";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Let op hoe je gebruikt HashRouter in plaats van BrowserRouter. Gebruik makend van BrowserRouter zou een 404-error opleveren. Dit komt omdat routering anders werkt op GitHub-pagina's. Hashrouter geeft geen fout omdat het het hash-gedeelte van de URL gebruikt om de gebruikersinterface met de URL te synchroniseren.

De laatste stap is het vastleggen van alle nieuwe wijzigingen in Git:

git toevoegen.
git commit -m "Maak React-app aan"

GitHub-opslagplaats maken

Sinds GitHub-pagina's uw applicatie host door de repository naar een website te converteren, moet u een GitHub-repository maken. Ga naar je GitHub-account en maak een nieuwe repository aan met dezelfde naam als je project.

Voeg vervolgens de GitHub-repository toe aan uw lokale repository als een externe:

git remote origin toevoegen /.git

Duw tot slot de lokale repository naar GitHub:

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

React-app implementeren op GitHub-pagina's

Om GitHub Pages te gebruiken, moet je het eerst installeren:

npm installeer gh-pages

gh-pagina's stelt u in staat om de gh-pagina's branch waar u uw code gaat implementeren.

Ga vervolgens naar je pakket.json bestand en voeg de startpagina toe die de start-URL van de app zal zijn:

"startpagina": "https://.github.io//",
"scripts": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts starten",
 "build": "react-scripts bouwen",
 "test": "react-scripts testen",
 "eject": "react-scripts worden uitgeworpen"
 }

Voer de volgende opdracht uit om het implementatieproces te voltooien:

npm uitvoeren implementeren

Uw toepassing is nu geïmplementeerd op GitHub en u kunt deze bezoeken op https://.github.io/.

Doe meer met GitHub-pagina's

GitHub Pages biedt een eenvoudige manier om websites gratis op internet te plaatsen. Terwijl je alleen zag hoe je een eenvoudig React-project kunt implementeren, kun je met GitHub Pages zoveel meer doen. U kunt bijvoorbeeld een volledige blog maken met Jekyll en deze zelfs hosten met een aangepast domein.

Een gratis website hosten met GitHub-pagina's

Lees volgende

Over de auteur