Kuinka luoda hakkeriuutisklooni Reactin avulla

Hacker News on suosittu verkkosivusto yrittäjien ja kehittäjien keskuudessa. Se sisältää tietojenkäsittelytieteeseen ja yrittäjyyteen keskittyvää sisältöä.

Hacker Newsin yksinkertainen ulkoasu saattaa sopia tietyille henkilöille. Jos kuitenkin haluat houkuttelevamman ja henkilökohtaisemman version, voit käyttää hyödyllisiä sovellusliittymiä luodaksesi oman mukautetun Hacker News -kokemuksesi. Lisäksi Hacker News -kloonin rakentaminen voi auttaa sinua vahvistamaan React-taitojasi.

Projekti- ja kehityspalvelimen määrittäminen

Tähän projektiin tarvittavat paketit sisältävät:

• React Router reitityksen käsittelyyn Yhden sivun hakemus (SPA).
instagram viewer
• HTMLReactParser :n palauttaman HTML: n jäsentämiseen Application Programming Interface (API).
• MomentJS API: n palauttamien päivämäärien käsittelyyn.

Avaa terminaali ja suorita:

lanka luo vite

Voit myös käyttää Node Package Manager (NPM) jos pidät siitä enemmän kuin lankaa. Yllä olevan komennon tulisi käyttää Vite-rakennustyökalua perusprojektin rakentamiseen. Nimeä projektisi ja valitse kehys, kun sitä pyydetään Reagoi ja aseta variantiksi JavaScript.

Nyt CD projektikansioon ja asenna aiemmin mainitut paketit suorittamalla seuraavat komennot terminaalissa:

lanka lisää html-react-parser
lanka add react-router-dom
lanka lisää hetki
lanka dev

Kun olet asentanut kaikki paketit ja käynnistänyt kehityspalvelimen, avaa projekti missä tahansa koodieditorissa ja luo kolme kansiota src kansio nimittäin: komponentit, koukut, ja sivuja.

Vuonna komponentit kansio, lisää kaksi tiedostoa Comments.jsx ja Navbar.jsx. Vuonna koukut kansio, lisää yksi tiedosto useFetch.jsx. Sitten sisällä sivuja kansio, lisää kaksi tiedostoa ListPage.jsx ja PostPage.jsx.

Poista App.css tiedosto ja korvaa sen sisältö main.jsx tiedosto seuraavalla:

tuonti Reagoi alkaen'reagoi'
tuonti { BrowserRouter } alkaen"react-router-dom"
tuonti ReactDOM alkaen'react-dom/client'
tuonti Sovellus alkaen'./App.jsx'
tuonti'./index.css'
ReactDOM.createRoot(asiakirja.getElementById('juuri')).render(



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

Vuonna App.jsx tiedosto, poista kaikki yleiskoodi ja muokkaa tiedostoa siten, että jäljellä on vain toiminnallinen komponentti:

toimintoSovellus() {
palata (
 <>
 </>
 )
}
viedäoletuksena Sovellus

Tuo tarvittavat moduulit:

tuonti { Reitit, reitti } alkaen"react-router-dom"
tuonti ListPage alkaen'./pages/ListPage'
tuonti Navbar alkaen'./components/Navbar'
tuonti Postitussivu alkaen'./pages/PostPage'

Lisää React-fragmentti Reitit komponentteja kolmella Reitti lapsikomponentit poluilla: /, /:type, ja /item/:id vastaavasti.

'/'
 element={<> <Navbar /><ListPage /></>}>
 </Route>
'/:tyyppi'
 element={<> <Navbar /><ListPage /></>}>
 </Route>
'/tuote/:id'
 element={}>
 </Route>
</Routes>

UseFetch Custom Hookin luominen

Tämä projekti käyttää kahta sovellusliittymää. Ensimmäinen API on vastuussa tietyn luokan viestiluettelon hakemisesta (tyyppi), kun taas toinen API on Algolia API, joka vastaa tietyn viestin ja sen hakemisesta kommentteja.

Avaa useFetch.jsx tiedosto, määritä koukku oletusvienti ja tuo useState ja useEffect koukut.

tuonti { useState, useEffect } alkaen"reagoi";
viedäoletuksenatoimintouseFetch(tyyppi, id) {
}

Määrittele kolme tilamuuttujaa, nimittäin: tiedot, virhe, ja Ladataan, ja niiden asetustoiminnot.

konst [data, setData] = useState();
konst [error, setError] = useState(väärä);
konst [lataus, setLoading] = useState(totta);

Lisää sitten a useEffect koukku riippuvuuksilla: id ja tyyppi.

useEffect(() => {
}, [tunnus, tyyppi])

Lisää seuraavaksi takaisinsoittotoimintoon toiminto fetchData() noutaaksesi tiedot asianmukaisista sovellusliittymistä. Jos ohitettu parametri on tyyppi, käytä ensimmäistä API: ta. Muussa tapauksessa käytä toista API: ta.

asynktoimintofetchData() {
antaa vastaus, url, parametri;
jos (tyyppi) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametri = type.toLowerCase(); 
 }
muujos (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametri = id.toLowerCase(); 
 }
yrittää {
 vastaus = odottaa hae(`${url}${parameter}`);
 } ottaa kiinni (virhe) {
 setError(totta);
 }
jos (vastaus) jos (response.status !== 200) {
 setError(totta);
 } muu {
antaa data = odottaa vastaus.json();
 setLoading(väärä);
 setData (data);
 }
}
haeData();

Lopuksi palauta Ladataan, virhe, ja tiedot tilamuuttujat objektina.

palata { lataus, virhe, tiedot };

Viestiluettelon näyttäminen pyydetyn kategorian mukaan

Aina kun käyttäjä navigoi kohteeseen / tai /:type, Reactin pitäisi tehdä ListPage komponentti. Tämän toiminnon toteuttamiseksi tuo ensin tarvittavat moduulit:

tuonti { useNavigate, useParams } alkaen"react-router-dom";
tuonti useFetch alkaen"../hooks/useFetch";

Määritä sitten toiminnallinen komponentti ja määritä sitten dynaaminen parametri, tyyppi kohtaan tyyppi muuttuja. Jos dynaaminen parametri ei ole käytettävissä, aseta tyyppi muuttuja uutiset. Soita sitten useFetch koukku.

viedäoletuksenatoimintoListPage() {
antaa { type } = useParams();
konst navigoi = useNavigate();
jos (!tyyppi) tyyppi = "uutiset";
konst { lataus, virhe, tiedot } = useFetch (tyyppi, tyhjä);
}

Palauta seuraavaksi asianmukainen JSX-koodi riippuen siitä, mikä niistä Ladataan, virhe, tai tiedot muuttujat on totta.

jos (virhe) {
palata<div>Jotain meni pieleen!div>
}
jos (Ladataan) {
palata<div>Ladataandiv>
}
jos (data) {
asiakirja.title = type.toUpperCase();
palata<div>
'list-type'>{tyyppi}</div>
{data.map(kohde =>
"tuote">
"tuote-nimike"
 onClick={() => navigoi(`/tuote/${item.id}`)}>
 {item.title}
 </div>
 {tuote.verkkotunnus && 
"tuote-linkki"
 onClick={() => open(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

PostPage-komponentin luominen

Tuo ensin sopivat moduulit ja komponentit, määritä sitten oletustoiminnallinen komponentti ja määritä id dynaaminen parametri id muuttuja ja soita useFetch koukku. Varmista, että tuhoat vastauksen.

tuonti { Link, useParams } alkaen"react-router-dom";
tuonti jäsentää alkaen'html-react-parser';
tuonti hetki alkaen"hetki";
tuonti Kommentit alkaen"../komponentit/kommentit";
tuonti useFetch alkaen"../hooks/useFetch";
viedäoletuksenatoimintoPostitussivu() {
konst { id } = useParams();
konst { lataus, virhe, tiedot } = useFetch(tyhjä, id);
}

Ja aivan kuten kanssa ListPage komponentti, renderöi sopiva JSX seuraavien muuttujien tilan perusteella: Ladataan, virhe, ja tiedot.

jos (virhe) {
palata<div>Jotain meni pieleen!div>
}
jos (Ladataan) {
palata<div>Ladataandiv>
}
jos (data) {
asiakirja.title=data.title;
palata<div>
"jälkiotsikko">{data.title}</div>
"jälkikuvaustiedot">
 {data.url && 
 luokannimi="post-link">Käy Web-sivustolla</Link>}
"jälkikirjailija">{data.author}</span>
"jälkiaika">
 {hetki (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"jälkiteksti">
 {jäsennys (data.text)}</div>}
"postikommentit">
"kommentit-etiketti">kommentit</div>

 </div>
 </div>
}

Tuo jäsentää moduuli ja hetki moduuli. Määritä oletusarvoinen toiminnallinen komponentti Kommentit joka ottaa sisään kommentitData taulukko rekvisiittana, kulkee taulukoiden läpi ja tekee a Solmu komponentti jokaiselle elementille.

tuonti jäsentää alkaen'html-react-parser';
tuonti hetki alkaen"hetki";
viedäoletuksenatoimintoKommentit({ commentsData }) {
palata<>
 {commentsData.map(kommenttiData =><SolmukommenttiData={commentData}avain={commentData.id}
 />)}
 </>
}

Määritä seuraavaksi Solmu toiminnallinen komponentti suoraan alla Kommentit komponentti. The Solmu komponentti renderöi kommentin, metatiedot ja vastaukset jokaiseen kommenttiin (jos sellaisia ​​on) renderöimällä itsensä rekursiivisesti.

toimintoSolmu({ commentData }) {
palata<divluokan nimi="kommentti">
 {
 commentData.text &&
 <>
'kommentti-metadata'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'kommentti-teksti'>
 {jäsennys (commentData.text)}</div>
 </>
 }
'kommentti-vastaukset'>
 {(commentData.children) && 
 commentData.children.map(lapsi =>
)}
 </div>
 </div>
}

Yllä olevassa koodilohkossa jäsentää on vastuussa tallennetun HTML: n jäsentämisestä commentData.text, sillä aikaa hetki on vastuussa kommentin ajan jäsentämisestä ja suhteellisen ajan palauttamisesta käyttämällä tästä lähtien() menetelmä.

Navbar-komponentin luominen

Avaa Navbar.jsx tiedosto ja tuo NavLink moduuli react-router-dom moduuli. Lopuksi määritä toiminnallinen komponentti ja palauta ylätaso nav elementti viidellä NavLink elementtejä, jotka osoittavat asianmukaisiin luokkiin (tai tyyppeihin).

tuonti { NavLink } alkaen"react-router-dom"
viedäoletuksenatoimintoNavbar() {
palata<nav>
"/uutiset">Koti</NavLink>
"/parhaat">Paras</NavLink>
"/näytä">Näytä</NavLink>
"/kysyä">Kysy</NavLink>
"/työpaikat">Työt</NavLink>
 </nav>
}

Onnittelut! Olet juuri rakentanut oman etupään asiakkaan Hacker Newsille.

Vahvista reagointitaitosi rakentamalla kloonisovellus

Hacker News -kloonin rakentaminen Reactin avulla voi vahvistaa React-taitojasi ja tarjota käytännöllisen yksisivuisen sovelluksen työskentelyä varten. On monia tapoja, joilla voit viedä asioita pidemmälle. Voit esimerkiksi lisätä sovellukseen mahdollisuuden etsiä viestejä ja käyttäjiä.

Sen sijaan, että yrität rakentaa omaa reititintäsi tyhjästä, on parempi käyttää työkalua, jonka ovat rakentaneet ammattilaiset, jotka ovat omistautuneet helpottamaan SPA-alueiden luomista.