Ako vytvoriť Hacker News Clone pomocou React

Hacker News je populárna webová stránka medzi podnikateľmi a vývojármi. Obsahuje obsah zameraný na informatiku a podnikanie.

Jednoduché usporiadanie Hacker News môže vyhovovať niektorým jednotlivcom. Ak však túžite po príťažlivejšej a prispôsobenejšej verzii, môžete využiť užitočné rozhrania API na vytvorenie vlastného prispôsobeného zážitku Hacker News. Vytvorenie klonu Hacker News vám tiež môže pomôcť upevniť vaše schopnosti React.

Nastavenie projektového a vývojového servera

Balíky potrebné pre tento projekt zahŕňajú:

• React Router na obsluhu smerovania v Jednostránková aplikácia (SPA).
instagram viewer
• HTMLReactParser na analýzu kódu HTML vráteného súborom Aplikačné programové rozhranie (API).
• MomentJS na spracovanie dátumov vrátených rozhraním API.

Otvorte terminál a spustite:

priadza vytvára vite

Môžete tiež použiť Správca balíkov uzlov (NPM) ak to uprednostňujete pred priadzou. Vyššie uvedený príkaz by mal používať nástroj na zostavenie Vite na lešenie základného projektu. Pomenujte svoj projekt a po zobrazení výzvy na zadanie rámca vyberte Reagovať a nastavte variant na JavaScript.

Teraz cd do priečinka projektu a nainštalujte balíky uvedené vyššie spustením nasledujúcich príkazov v termináli:

priadza pridať html-react-parser
priadza prida reagovat-router-dom
priadze pridať moment
priadza výv

Po nainštalovaní všetkých balíkov a spustení vývojového servera otvorte projekt v ľubovoľnom editore kódu a vytvorte tri priečinky v src priečinok a to: komponentov, háčiky, a stránky.

V komponentov priečinok, pridajte dva súbory Comments.jsx a Navbar.jsx. V háčiky priečinok, pridajte jeden súbor useFetch.jsx. Potom v stránky priečinok, pridajte dva súbory ListPage.jsx a PostPage.jsx.

Odstrániť App.css súbor a nahradiť obsah súboru main.jsx súbor s nasledujúcim:

importovať Reagovať od'reagovať'
importovať { BrowserRouter } od„react-router-dom“
importovať ReactDOM od'react-dom/client'
importovať App od'./App.jsx'
importovať'./index.css'
ReactDOM.createRoot(dokument.getElementById('root')).vykresliť(



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

V App.jsx súbor, odstráňte všetok štandardný kód a upravte súbor tak, aby vám zostal iba funkčný komponent:

funkciuApp() {
vrátiť (
 <>
 </>
 )
}
exportpredvolená App

Importujte potrebné moduly:

importovať { Routes, Route } od„react-router-dom“
importovať ListPage od'./pages/ListPage'
importovať Navbar od'./components/Navbar'
importovať PostPage od'./pages/PostPage'

Vo fragmente React pridajte Trasy komponenty s tromi Trasa podradené komponenty s cestami: /, /:type, a /item/:id resp.

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

Vytvorenie vlastného háku useFetch

Tento projekt používa dve rozhrania API. Prvé API je zodpovedné za načítanie zoznamu príspevkov v danej kategórii (typ), zatiaľ čo druhé API je Algolia API, ktoré je zodpovedné za načítanie konkrétneho príspevku a jeho komentáre.

Otvor useFetch.jsx definujte háčik ako predvolený export a importujte súbor useState a useEffect háčiky.

importovať { useState, useEffect } od"reagovať";
exportpredvolenáfunkciuuseFetch(typ, id) {
}

Definujte tri stavové premenné, a to: údajov, chyba, a načítavas ich príslušnými nastavovacími funkciami.

konšt [data, setData] = useState();
konšt [chyba, setError] = useState(falošný);
konšt [loading, setLoading] = useState(pravda);

Potom pridajte a useEffect háčik so závislosťami: id a typu.

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

Ďalej vo funkcii spätného volania pridajte funkciu fetchData() na získanie údajov z príslušných rozhraní API. Ak je odovzdaný parameter typu, použite prvé API. V opačnom prípade použite druhé API.

asyncfunkciufetchData() {
nech odpoveď, adresa URL, parameter;
ak (typ) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parameter = type.toLowerCase(); 
 }
inakak (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parameter = id.toLowerCase(); 
 }
skúste {
 odpoveď = čakať priniesť (`${url}${parameter}`);
 } chytiť (chyba) {
 setError(pravda);
 }
ak (odpoveď) ak (stav odpovede !== 200) {
 setError(pravda);
 } inak {
nech údaje = čakať response.json();
 setLoading(falošný);
 setData (údaje);
 }
}
fetchData();

Nakoniec vráťte načítava, chyba, a údajov stavové premenné ako objekt.

vrátiť { načítavanie, chyba, údaje };

Vykreslenie zoznamu príspevkov v závislosti od požadovanej kategórie

Kedykoľvek používateľ prejde na / alebo /:type, Reagovať by malo vykresliť ListPage komponent. Ak chcete implementovať túto funkciu, najprv importujte potrebné moduly:

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

Potom definujte funkčný komponent a potom priraďte dynamický parameter, typu k typu premenlivý. Ak dynamický parameter nie je dostupný, nastavte typu premenlivý na správy. Potom zavolajte na useFetch háčik.

exportpredvolenáfunkciuListPage() {
nech { typ } = useParams();
konšt navigovať = používaťNavigovať();
ak (!typ) typ = "novinky";
konšt { načítavanie, chyba, údaje } = useFetch (typ, nulový);
}

Ďalej vráťte príslušný kód JSX v závislosti od toho, ktorý z nich načítava, chyba, alebo údajov premenných je pravda.

ak (chyba) {
vrátiť<div>Niečo sa pokazilo!div>
}
ak (načítava) {
vrátiť<div>Načítavadiv>
}
ak (údaje) {
dokument.title = type.toUpperCase();
vrátiť<div>
'typ-listu'>{type}</div>
{data.map(položka =>
"položka">
"názov položky"
 onClick={() => navigovať(`/item/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"odkaz na položku"
 onClick={() => open(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Vytvorenie komponentu PostPage

Najprv importujte príslušné moduly a komponenty, potom definujte predvolený funkčný komponent a priraďte ho id dynamický parameter k id premenná a zavolajte useFetch háčik. Uistite sa, že odpoveď deštruktujete.

importovať { Link, useParams } od"react-router-dom";
importovať rozobrať od'html-react-parser';
importovať moment od"moment";
importovať Komentáre od"../components/Comments";
importovať useFetch od"../hooks/useFetch";
exportpredvolenáfunkciuPostPage() {
konšt { id } = useParams();
konšt { načítavanie, chyba, údaje } = useFetch(nulový, id);
}

A rovnako ako s ListPage komponent, vykreslite príslušný JSX na základe stavu nasledujúcich premenných: načítava, chyba, a údajov.

ak (chyba) {
vrátiť<div>Niečo sa pokazilo!div>
}
ak (načítava) {
vrátiť<div>Načítavadiv>
}
ak (údaje) {
dokument.title=data.title;
vrátiť<div>
"post-title">{data.title}</div>
"post-metadata">
 {data.url && 
 className="post-link">Navštívte webovú stránku</Link>}
"post-autor">{data.author}</span>
"post-time">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"príspevok">
 {parse (data.text)}</div>}
"príspevky">
"označenie komentárov">Komentáre</div>

 </div>
 </div>
}

Importovať rozobrať modul a moment modul. Definujte predvolený funkčný komponent Komentáre ktorá berie do komentáreÚdaje pole ako podpera, prechádza cez polia a vykresľuje a Uzol komponent pre každý prvok.

importovať rozobrať od'html-react-parser';
importovať moment od"moment";
exportpredvolenáfunkciuKomentáre({ commentsData }) {
vrátiť<>
 {commentsData.map(commentData =><UzolcommentData={commentData}kľúč={commentData.id}
 />)}
 </>
}

Ďalej definujte Uzol funkčný komponent priamo pod Komentáre komponent. The Uzol komponent vykresľuje komentár, metadáta a odpovede na každý komentár (ak existuje) rekurzívnym vykresľovaním.

funkciuUzol({ commentData }) {
vrátiť<divclassName="komentár">
 {
 commentData.text &&
 <>
'komentár-metaúdaje'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'komentár-text'>
 {parse (commentData.text)}</div>
 </>
 }
'komentár-odpovede'>
 {(commentData.children) && 
 commentData.children.map(dieťa =>
)}
 </div>
 </div>
}

Vo vyššie uvedenom bloku kódu rozobrať je zodpovedný za analýzu kódu HTML uloženého v commentData.text, zatiaľ čo moment je zodpovedný za analýzu času komentára a vrátenie relatívneho času pomocou odteraz() metóda.

Vytvorenie komponentu Navbar

Otvor Navbar.jsx súbor a importujte súbor NavLink modul z reagovať-smerovač-dom modul. Nakoniec definujte funkčný komponent a vráťte rodiča nav prvok s piatimi NavLink prvky poukazujúce na príslušné kategórie (alebo typy).

importovať { NavLink } od"react-router-dom"
exportpredvolenáfunkciuNavbar() {
vrátiť<nav>
"/novinky">Domov</NavLink>
"/najlepšie">Najlepšie</NavLink>
"/šou">Zobraziť</NavLink>
"/opýtať sa">Spýtaj sa</NavLink>
"/pracovné miesta">Práca</NavLink>
 </nav>
}

Gratulujem! Práve ste si vytvorili vlastného front-end klienta pre Hacker News.

Upevnite svoje schopnosti reagovať vytvorením aplikácie klonovania

Vytvorenie klonu Hacker News pomocou React môže pomôcť upevniť vaše zručnosti React a poskytnúť praktickú aplikáciu na jednu stránku, na ktorej môžete pracovať. Existuje mnoho spôsobov, ako môžete veci posunúť ďalej. Do aplikácie môžete napríklad pridať možnosť vyhľadávania príspevkov a používateľov.

Namiesto pokusov o zostavenie vlastného smerovača od nuly je lepšie použiť nástroj vytvorený profesionálmi, ktorí sa venujú zjednodušeniu vytvárania SPA.