Kako stvoriti klon hakerskih vijesti koristeći React

Hacker News je popularna web stranica među poduzetnicima i programerima. Sadrži sadržaj usmjeren na informatiku i poduzetništvo.

Jednostavan izgled Hacker Newsa može odgovarati određenim pojedincima. Međutim, ako želite privlačniju i personaliziraniju verziju, možete upotrijebiti korisne API-je za stvaranje vlastitog prilagođenog iskustva Hacker News. Također, izgradnja klona Hacker News može vam pomoći da učvrstite svoje React vještine.

Postavljanje projektnog i razvojnog poslužitelja

Paketi potrebni za ovaj projekt uključuju:

• React Router za rukovanje usmjeravanjem u Aplikacija na jednoj stranici (SPA).
instagram viewer
• HTMLReactParser za raščlanjivanje HTML-a koji vraća Programsko sučelje aplikacije (API).
• MomentJS za rukovanje datumima koje vraća API.

Otvorite terminal i pokrenite:

pređa stvoriti vite

Također možete koristiti Node Package Manager (NPM) ako vam je draže od pređe. Gornja naredba trebala bi koristiti Vite alat za izradu skele osnovnog projekta. Imenujte svoj projekt i kada se od vas zatraži okvir, odaberite Reagirati i postavite varijantu na JavaScript.

Sada CD u mapu projekta i instalirajte ranije spomenute pakete pokretanjem sljedećih naredbi u terminalu:

yarn add html-react-parser
yarn dodati reakciju-usmjerivač-dom
pređa dodati trenutak
pređa dev

Nakon instaliranja svih paketa i pokretanja razvojnog poslužitelja, otvorite projekt u bilo kojem uređivaču koda i kreirajte tri mape u src mapa naime: komponente, udice, i stranice.

u komponente mapu, dodajte dvije datoteke Komentari.jsx i Navbar.jsx. u udice mapu, dodajte jednu datoteku useFetch.jsx. Zatim u stranice mapu, dodajte dvije datoteke ListPage.jsx i PostPage.jsx.

Izbriši App.css datoteku i zamijenite sadržaj datoteke glavni.jsx datoteka sa sljedećim:

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



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

u App.jsx datoteku, uklonite sav šablonski kod i izmijenite datoteku tako da vam ostane samo funkcionalna komponenta:

funkcijaaplikacija() {
povratak (
 <>
 </>
 )
}
izvozzadano aplikacija

Uvezite potrebne module:

uvoz { Rute, ruta } iz'react-router-dom'
uvoz ListPage iz'./pages/ListPage'
uvoz Navigacijska traka iz'./components/Navbar'
uvoz PostPage iz'./pages/PostPage'

U React fragment dodajte Rute komponente s tri Ruta dijete komponente sa stazama: /, /:type, i /item/:id odnosno.

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

Stvaranje prilagođene kuke useFetch

Ovaj projekt koristi dva API-ja. Prvi API je odgovoran za dohvaćanje popisa objava u određenoj kategoriji (tip), dok je drugi API Algolia API koji je odgovoran za dohvaćanje određene objave i njezine komentari.

Otvori useFetch.jsx datoteku, definirajte kuku kao zadani izvoz i uvezite useState i useEffect udice.

uvoz {useState, useEffect} iz"reagirati";
izvozzadanofunkcijauseFetch(vrsta, id) {
}

Definirajte tri varijable stanja, naime: podaci, greška, i Učitavam, s odgovarajućim funkcijama postavljača.

konst [podaci, setData] = useState();
konst [greška, setError] = useState(lažno);
konst [učitavanje, setLoading] = useState(pravi);

Zatim dodajte a useEffect kuka s ovisnostima: iskaznica i tip.

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

Zatim u funkciji povratnog poziva dodajte funkciju dohvatiPodatke() za dohvaćanje podataka iz odgovarajućih API-ja. Ako je proslijeđeni parametar tip, koristite prvi API. U protivnom upotrijebite drugi API.

asinkronifunkcijadohvatiPodatke() {
neka odgovor, url, parametar;
ako (tip) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametar = type.toLowerCase(); 
 }
drugoako (iskaznica) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametar = id.toLowerCase(); 
 }
probati {
 odgovor = čekati dohvati (`${url}${parameter}`);
 } ulov (pogreška) {
 setError(pravi);
 }
ako (odgovor) ako (odgovor.status !== 200) {
 setError(pravi);
 } drugo {
neka podaci = čekati odgovor.json();
 setLoading(lažno);
 setData (podaci);
 }
}
dohvatiPodatke();

Na kraju, vratite Učitavam, greška, i podaci varijable stanja kao objekt.

povratak { učitavanje, pogreška, podaci };

Izrada popisa postova ovisno o traženoj kategoriji

Kad god korisnik navigira do / ili /:type, React bi trebao prikazati ListPage komponenta. Da biste implementirali ovu funkcionalnost, prvo uvezite potrebne module:

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

Zatim definirajte funkcionalnu komponentu i zatim dodijelite dinamički parametar, tip prema tip varijabla. Ako dinamički parametar nije dostupan, postavite tip varijabla za vijesti. Zatim nazovite useFetch kuka.

izvozzadanofunkcijaListPage() {
neka { tip } = useParams();
konst navigacija = useNavigate();
ako (!tip) tip = "vijesti";
konst { učitavanje, pogreška, podaci } = useFetch (tip, ništavan);
}

Zatim vratite odgovarajući JSX kod ovisno o tome koji od Učitavam, greška, ili podaci varijable je istina.

ako (pogreška) {
povratak<div>Nešto je pošlo po zlu!div>
}
ako (Učitavam) {
povratak<div>Učitavamdiv>
}
ako (podaci) {
dokument.title = type.toUpperCase();
povratak<div>
'vrsta popisa'>{type}</div>
{data.map(artikal =>
"artikal">
"naslov-stavke"
 onClick={() => navigacija(`/stavka/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"veza-stavka"
 onClick={() => otvori(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Stvaranje PostPage komponente

Najprije uvezite odgovarajuće module i komponente, zatim definirajte zadanu funkcionalnu komponentu, dodijelite iskaznica dinamički parametar za iskaznica varijablu i nazovite useFetch kuka. Obavezno destrukturirajte odgovor.

uvoz { Link, useParams } iz"react-router-dom";
uvoz raščlaniti iz'html-react-parser';
uvoz trenutak iz"trenutak";
uvoz Komentari iz"../components/Comments";
uvoz useFetch iz"../hooks/useFetch";
izvozzadanofunkcijaPostPage() {
konst { id } = useParams();
konst { učitavanje, pogreška, podaci } = useFetch(ništavan, iskaznica);
}

I baš kao i kod ListPage komponente, generirajte odgovarajući JSX na temelju stanja sljedećih varijabli: Učitavam, greška, i podaci.

ako (pogreška) {
povratak<div>Nešto je pošlo po zlu!div>
}
ako (Učitavam) {
povratak<div>Učitavamdiv>
}
ako (podaci) {
dokument.title=podaci.naslov;
povratak<div>
"post-naslov">{podaci.naslov}</div>
"post-metapodaci">
 {data.url && 
 ime klase="post-link">Posjetite web stranicu</Link>}
"post-autor">{data.author}</span>
"nakon vremena">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"post-tekst">
 {parse (data.text)}</div>}
"post-komentari">
"komentari-oznaka">Komentari</div>

 </div>
 </div>
}

Uvezi raščlaniti modul i trenutak modul. Definirajte zadanu funkcionalnu komponentu Komentari koji uzima u commentsData niz kao podupirač, prolazi kroz nizove i prikazuje a Čvor komponenta za svaki element.

uvoz raščlaniti iz'html-react-parser';
uvoz trenutak iz"trenutak";
izvozzadanofunkcijaKomentari({ commentsData }) {
povratak<>
 {commentsData.map(commentData =><ČvorcommentData={commentData}ključ={commentData.id}
 />)}
 </>
}

Zatim definirajte Čvor funkcionalna komponenta točno ispod Komentari komponenta. The Čvor komponenta renderira komentar, metapodatke i odgovara na svaki komentar (ako postoji) rekurzivnim renderiranjem.

funkcijaČvor({ commentData }) {
povratak<divnaziv klase="komentar">
 {
 commentData.text &&
 <>
'komentar-metapodaci'>
{commentData.author}</span>

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

U gornjem bloku koda, raščlaniti je odgovoran za analiziranje HTML-a pohranjenog u commentData.text, dok trenutak je odgovoran za analizu vremena komentara i vraćanje relativnog vremena pomoću od sada() metoda.

Stvaranje Navbar komponente

Otvori Navbar.jsx datoteku i uvoz NavLink modul iz reagirati-usmjerivač-dom modul. Na kraju, definirajte funkcionalnu komponentu i vratite roditelja nav element s pet NavLink elementi koji upućuju na odgovarajuće kategorije (ili vrste).

uvoz {NavLink} iz"react-router-dom"
izvozzadanofunkcijaNavigacijska traka() {
povratak<nav>
"/vijesti">Početna</NavLink>
"/najbolje">Najbolje</NavLink>
"/pokazati">Pokaži</NavLink>
"/pitaj">Pitaj</NavLink>
"/poslovi">Poslovi</NavLink>
 </nav>
}

svaka čast! Upravo ste izgradili vlastiti front-end klijent za Hacker News.

Učvrstite svoje React vještine izgradnjom klon aplikacije

Izrada klona Hacker News s Reactom može pomoći u učvršćivanju vaših React vještina i pružiti praktičnu aplikaciju na jednoj stranici za rad. Postoji mnogo načina na koje možete stvari poduzeti dalje. Na primjer, aplikaciji možete dodati mogućnost pretraživanja objava i korisnika.

Umjesto da pokušavate izgraditi vlastiti usmjerivač od nule, bolje je koristiti alat koji su izradili profesionalci koji su posvećeni olakšavanju stvaranja SPA-ova.