Kako ustvariti klon hekerskih novic z uporabo React

Hacker News je priljubljeno spletno mesto med podjetniki in razvijalci. Vsebuje vsebine, osredotočene na računalništvo in podjetništvo.

Preprosta postavitev Hacker News lahko ustreza nekaterim posameznikom. Če pa želite bolj privlačno in prilagojeno različico, lahko uporabite uporabne API-je za ustvarjanje lastne prilagojene izkušnje Hacker News. Tudi izdelava klona Hacker News vam lahko pomaga utrditi vaše sposobnosti React.

Nastavitev projektnega in razvojnega strežnika

Paketi, potrebni za ta projekt, vključujejo:

• React Router za upravljanje z usmerjanjem v Enostranska aplikacija (SPA).
instagram viewer
• HTMLReactParser za razčlenjevanje HTML-ja, ki ga vrne Vmesnik za programiranje aplikacij (API).
• MomentJS za obdelavo datumov, ki jih vrne API.

Odprite terminal in zaženite:

preje ustvariti vite

Uporabite lahko tudi Node Package Manager (NPM) če vam je ljubše od preje. Zgornji ukaz mora uporabiti orodje za gradnjo Vite za gradnjo osnovnega projekta. Poimenujte svoj projekt in ko boste pozvani k ogrodju, izberite Reagiraj in nastavite različico na JavaScript.

zdaj cd v mapo projekta in namestite prej omenjene pakete z izvajanjem naslednjih ukazov v terminalu:

yarn add html-react-parser
yarn add react-router-dom
preje dodajte trenutek
preja dev

Ko namestite vse pakete in zaženete razvojni strežnik, odprite projekt v poljubnem urejevalniku kode in ustvarite tri mape v src mapa in sicer: komponente, kavlji, in strani.

V komponente dodajte dve datoteki Comments.jsx in Navbar.jsx. V kavlji mapo, dodajte eno datoteko useFetch.jsx. Nato v strani dodajte dve datoteki ListPage.jsx in PostPage.jsx.

Izbriši App.css datoteko in zamenjajte vsebino datoteke main.jsx datoteka z naslednjim:

uvoz Reagiraj od'reagirati'
uvoz {BrowserRouter} od'react-router-dom'
uvoz ReactDOM od'react-dom/client'
uvoz aplikacija od'./App.jsx'
uvoz'./index.css'
ReactDOM.createRoot(dokument.getElementById('root')).render(



 </BrowserRouter>
 </React.StrictMode>,
)

V App.jsx odstranite vso okvirno kodo in spremenite datoteko tako, da vam ostane samo funkcionalna komponenta:

funkcijoaplikacija() {
vrnitev (
 <>
 </>
 )
}
izvozprivzeto aplikacija

Uvozite potrebne module:

uvoz { Poti, pot } od'react-router-dom'
uvoz ListPage od'./pages/ListPage'
uvoz Navbar od'./components/Navbar'
uvoz PostPage od'./pages/PostPage'

V fragmentu React dodajte Poti komponente s tremi Pot podrejene komponente s potmi: /, /:type, in /item/:id oz.

'/'
 element={<> <Navbar /><ListPage /></>}>
 </Route>
'/:tip'
 element={<> <Navbar /><ListPage /></>}>
 </Route>
'/item/:id'
 element={}>
 </Route>
</Routes>

Ustvarjanje kljuke po meri useFetch

Ta projekt uporablja dva API-ja. Prvi API je odgovoren za pridobivanje seznama objav v določeni kategoriji (vrsta), medtem ko je drugi API Algolia API, ki je odgovoren za pridobivanje določene objave in njene komentarji.

Odprite useFetch.jsx datoteko, definirajte kavelj kot privzeti izvoz in uvozite useState in useEffect kavlji.

uvoz {useState, useEffect} od"reagirati";
izvozprivzetofunkcijouseFetch(tip, id) {
}

Definirajte tri spremenljivke stanja, in sicer: podatke, napaka, in nalaganje, z njihovimi ustreznimi nastavitvenimi funkcijami.

konst [podatki, setData] = useState();
konst [napaka, setError] = useState(lažno);
konst [nalaganje, setLoading] = useState(prav);

Nato dodajte a useEffect kavelj z odvisnostmi: id in vrsta.

useEffect(() => {
}, [id, vrsta])

Nato v funkciji povratnega klica dodajte funkcijo fetchData() za pridobitev podatkov iz ustreznih API-jev. Če je podani parameter vrsta, uporabite prvi API. V nasprotnem primeru uporabite drugi API.

asinhfunkcijofetchData() {
pustiti odziv, url, parameter;
če (tip) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parameter = type.toLowerCase(); 
 }
drugačeče (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parameter = id.toLowerCase(); 
 }
poskusi {
 odgovor = čakati prinesi (`${url}${parameter}`);
 } ulov (napaka) {
 setError(prav);
 }
če (odgovor) če (odziv.stanje !== 200) {
 setError(prav);
 } drugače {
pustiti podatki = čakati odziv.json();
 setLoading(lažno);
 setData (podatki);
 }
}
pridobi podatke ();

Končno vrnite nalaganje, napaka, in podatke spremenljivke stanja kot objekt.

vrnitev { nalaganje, napaka, podatki };

Upodabljanje seznama objav glede na zahtevano kategorijo

Kadar koli uporabnik navigira do / oz /:type, React bi moral upodobiti ListPage komponento. Za implementacijo te funkcije najprej uvozite potrebne module:

uvoz {useNavigate, useParams} od"react-router-dom";
uvoz useFetch od"../hooks/useFetch";

Nato definirajte funkcionalno komponento in nato dodelite dinamični parameter, vrsta do vrsta spremenljivka. Če dinamični parameter ni na voljo, nastavite vrsta spremenljivka do novice. Nato pokličite useFetch kavelj.

izvozprivzetofunkcijoListPage() {
pustiti { type } = useParams();
konst navigate = useNavigate();
če (!tip) tip = "novice";
konst { nalaganje, napaka, podatki } = useFetch (tip, nič);
}

Nato vrnite ustrezno kodo JSX, odvisno od tega, kateri od nalaganje, napaka, oz podatke spremenljivke je res.

če (napaka) {
vrnitev<div>Nekaj ​​je šlo narobe!div>
}
če (nalaganje) {
vrnitev<div>nalaganjediv>
}
če (podatki) {
dokument.title = type.toUpperCase();
vrnitev<div>
'vrsta seznama'>{type}</div>
{data.map(postavka =>
"predmet">
"naslov-predmet"
 onClick={() => navigate(`/predmet/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"povezava do predmeta"
 onClick={() => odpri(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Ustvarjanje komponente PostPage

Najprej uvozite ustrezne module in komponente, nato določite privzeto funkcionalno komponento, dodelite id dinamični parameter za id spremenljivko in pokličite useFetch kavelj. Poskrbite, da boste uničili odgovor.

uvoz { Povezava, useParams } od"react-router-dom";
uvoz razčleniti od'html-react-parser';
uvoz trenutek od"trenutek";
uvoz Komentarji od"../components/Comments";
uvoz useFetch od"../hooks/useFetch";
izvozprivzetofunkcijoPostPage() {
konst { id } = useParams();
konst { nalaganje, napaka, podatki } = useFetch(nič, id);
}

In tako kot pri ListPage komponento, upodobi ustrezen JSX na podlagi stanja naslednjih spremenljivk: nalaganje, napaka, in podatke.

če (napaka) {
vrnitev<div>Nekaj ​​je šlo narobe!div>
}
če (nalaganje) {
vrnitev<div>nalaganjediv>
}
če (podatki) {
dokument.title=data.title;
vrnitev<div>
"post-naslov">{data.title}</div>
"post-metapodatki">
 {data.url && 
 className="post-link">Obiščite spletno stran</Link>}
"po avtorju">{data.author}</span>
"po času">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"post-besedilo">
 {razčleni (podatki.besedilo)}</div>}
"objavljeni komentarji">
"komentarji-oznaka">Komentarji</div>

 </div>
 </div>
}

Uvozite razčleniti modul in trenutek modul. Določite privzeto funkcionalno komponento Komentarji ki sprejme v commentsData matriko kot rekvizit, prečka matrike in upodablja a Vozlišče komponento za vsak element.

uvoz razčleniti od'html-react-parser';
uvoz trenutek od"trenutek";
izvozprivzetofunkcijoKomentarji({ commentsData }) {
vrnitev<>
 {commentsData.map(commentData =><VozliščecommentData={commentData}ključ={commentData.id}
 />)}
 </>
}

Nato definirajte Vozlišče funkcionalna komponenta tik pod Komentarji komponento. The Vozlišče komponenta upodobi komentar, metapodatke in odgovori na vsak komentar (če obstaja) z rekurzivnim upodabljanjem.

funkcijoVozlišče({ commentData }) {
vrnitev<divclassName="komentar">
 {
 commentData.text &&
 <>
'metapodatki komentarjev'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'komentar-besedilo'>
 {parse (commentData.text)}</div>
 </>
 }
'komentar-odgovori'>
 {(commentData.children) && 
 commentData.children.map(otrok =>
)}
 </div>
 </div>
}

V zgornjem kodnem bloku razčleniti je odgovoren za razčlenjevanje HTML-ja, shranjenega v commentData.text, medtem trenutek je odgovoren za razčlenjevanje časa komentarja in vračanje relativnega časa z uporabo od sedaj() metoda.

Ustvarjanje komponente Navbar

Odprite Navbar.jsx datoteko in uvozite NavLink modul iz reagirati-usmerjevalnik-dom modul. Končno definirajte funkcionalno komponento in vrnite nadrejenega nav element s petimi NavLink elementi, ki kažejo na ustrezne kategorije (ali vrste).

uvoz {NavLink} od"react-router-dom"
izvozprivzetofunkcijoNavbar() {
vrnitev<nav>
"/novice">Domov</NavLink>
"/najboljši">Najboljše</NavLink>
"/prikaži">Pokaži</NavLink>
"/vprašaj">Vprašaj</NavLink>
"/službe">Delovna mesta</NavLink>
 </nav>
}

Čestitke! Pravkar ste zgradili lastnega sprednjega odjemalca za Hacker News.

Utrdite svoje sposobnosti React z izdelavo aplikacije Clone

Izdelava klona Hacker News z Reactom lahko pomaga utrditi vaše spretnosti React in zagotovi praktično enostransko aplikacijo za delo. Obstaja veliko načinov, kako lahko stvari peljete dlje. Aplikaciji lahko na primer dodate možnost iskanja objav in uporabnikov.

Namesto da poskušate zgraditi svoj usmerjevalnik iz nič, je bolje uporabiti orodje, ki so ga izdelali strokovnjaki, ki so predani temu, da olajšajo ustvarjanje SPA.