Cum să implementați o aplicație React gratuit cu paginile GitHub

Dacă aveți un proiect și doriți să îl găzduiți gratuit fără a cumpăra un domeniu, folosirea GitHub Pages este o alegere excelentă. Paginile GitHub vă transformă depozitele în site-uri web și vă permite să găzduiți site-uri de proiecte nelimitate.

Implementarea unui site React cu navigare necesită o configurare suplimentară în comparație cu implementarea unui site static. Acest tutorial vă ghidează prin întregul proces, de la crearea unui depozit GitHub până la crearea unui site găzduit.

Creați o aplicație React

În scopuri demonstrative, trebuie creați un proiect React cu rutare pe care o veți implementa ulterior. Cu toate acestea, dacă aveți un existent Proiectul React, nu ezitați să omiteți acest pas.

În terminal, rulați create-react-app comandă pentru a construi rapid un proiect React:

npx create-react-app react-gh

Navigați la folderul creat și porniți aplicația.

npm run start

Apoi, deschideți folderul de proiect cu cel preferat editor de cod. În src folder, ștergeți totul, cu excepția App.js și index.js. Înlocuiți conținutul din App.js cu următoarele:

function App() {
 întoarcere (


Pagini Github

Implementarea React pe Github




 );
}
exportați aplicația implicită;

Adăugați rutare

Pentru a adăuga rutare la aplicația dvs., mai întâi, instalați reacţionează-router-dom:

npm instalează react-router-dom

În App.js, adăugați linkul către pagina despre:

import { Link } din "react-router-dom";
function App() {
 întoarcere (


Despre
Pagini Github

Implementarea React pe Github




 );
}
exportați aplicația implicită;

Deoarece App.js va acționa ca pagină de pornire, trebuie doar să creați Despre componenta:

const Despre = () => {
 întoarcere ( 


Acasă
Despre Pagina




 );
}
export implicit Despre;

Acum, trebuie să creați rutele și să configurați un router React.

Modificați index.js pentru a potrivi adresa URL cu componentele respective:

import React din "react";
import ReactDOM din "react-dom";
importați aplicația din „./App”;
import { HashRouter, Routes, Route } din "react-router-dom";
import Despre din „./Despre”;
ReactDOM.render(



} />
}/>


,
 document.getElementById(„rădăcină”)
);

Observați cum ați folosit HashRouter în loc de BrowserRouter. Folosind BrowserRouter ar genera o eroare 404. Acest lucru se datorează faptului că rutarea funcționează diferit în paginile GitHub. Hashrouter nu generează o eroare deoarece folosește porțiunea hash a adresei URL pentru a sincroniza interfața de utilizare cu adresa URL.

Pasul final este efectuarea tuturor noilor modificări la Git:

git add .
git commit -m „Creează aplicația React”

Creați depozitul GitHub

De cand Pagini GitHub va găzdui aplicația dvs. prin conversia depozitului într-un site web, trebuie să creați un depozit GitHub. Accesați contul dvs. GitHub și creați un nou depozit cu același nume ca și proiectul dvs.

Apoi, adăugați depozitul GitHub la depozitul dvs. local ca telecomandă:

git remote adaugă origine /.git

În cele din urmă, împingeți depozitul local în GitHub:

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

Implementați aplicația React în paginile GitHub

Pentru a utiliza Paginile GitHub, va trebui mai întâi să le instalați:

npm instalează gh-pages

gh-pagini vă va permite să creați gh-pagini ramură unde îți vei implementa codul.

Apoi, mergeți la dvs pachet.json fișier și adăugați pagina de pornire care va fi adresa URL de pornire a aplicației:

"pagina principală": "https://.github.io//",
„scripturi”: {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 „start”: „începe scripturile de reacție”,
 "build": "build-scripturi de reacții",
 "test": "test de reactie-scripturi",
 "eject": "ejectarea reacției-scripturilor"
 }

Rulați următoarea comandă pentru a finaliza procesul de implementare:

npm run deploy

Aplicația ta este acum implementată în GitHub și o poți vizita la https://.github.io/.

Faceți mai multe cu paginile GitHub

Paginile GitHub oferă o modalitate simplă de implementare gratuită a site-urilor web pe internet. Deși ați văzut doar cum puteți implementa un proiect React simplu, GitHub Pages vă permite să faceți mult mai mult. De exemplu, puteți crea un blog complet folosind Jekyll și chiar îl puteți găzdui folosind un domeniu personalizat.

Cum să găzduiești un site web gratuit folosind paginile GitHub

Citiți în continuare

Despre autor