Hacker News klón létrehozása a React segítségével

A Hacker News népszerű webhely a vállalkozók és a fejlesztők körében. Olyan tartalmakat tartalmaz, amelyek a számítástechnikára és a vállalkozói szellemre összpontosítanak.

A Hacker News egyszerű elrendezése bizonyos személyeknek megfelelhet. Ha azonban vonzóbb és személyre szabott verzióra vágyik, hasznos API-k segítségével létrehozhatja saját testreszabott Hacker News-élményét. Ezenkívül a Hacker News klón felépítése segíthet megszilárdítani React képességeit.

A projekt- és fejlesztési szerver beállítása

A projekthez szükséges csomagok a következők:

• React Router az útválasztás kezeléséhez a Egyoldalas alkalmazás (SPA).
instagram viewer
• HTMLReactParser a által visszaadott HTML elemzéséhez Alkalmazásprogramozási felület (API).
• MomentJS az API által visszaadott dátumok kezelésére.

Nyissa meg a terminált, és futtassa:

fonal létre vite

Használhatja a Node Package Manager (NPM) ha inkább a fonal helyett. A fenti parancsnak a Vite build eszközt kell használnia egy alapprojekt felépítéséhez. Nevezze el projektjét, és amikor a rendszer kéri a keretrendszert, válassza ki Reagál és állítsa be a változatot JavaScript.

Most CD a projekt mappába, és telepítse a korábban említett csomagokat a következő parancsok futtatásával a terminálban:

fonal add html-react-parser
fonal add react-router-dom
fonal add pillanat
fonal dev

Az összes csomag telepítése és a fejlesztői kiszolgáló elindítása után nyissa meg a projektet bármelyik kódszerkesztőben, és hozzon létre három mappát a src mappa nevezetesen: alkatrészek, horgok, és oldalakat.

Ban,-ben alkatrészek mappát, adjon hozzá két fájlt Megjegyzések.jsx és Navbar.jsx. Ban,-ben horgok mappát, adjon hozzá egy fájlt useFetch.jsx. Aztán a oldalakat mappát, adjon hozzá két fájlt ListPage.jsx és PostPage.jsx.

Törölje a App.css fájlt, és cserélje ki a tartalmát main.jsx fájl a következővel:

import Reagál tól től'reagál'
import { BrowserRouter } tól től"react-router-dom"
import ReactDOM tól től'react-dom/client'
import App tól től'./App.jsx'
import'./index.css'
ReactDOM.createRoot(dokumentum.getElementById('gyökér')).Vakol(



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

Ban,-ben App.jsx fájlt, távolítsa el az összes alapkódot, és módosítsa a fájlt úgy, hogy csak a funkcionális összetevő maradjon meg:

funkcióApp() {
Visszatérés (
 <>
 </>
 )
}
exportalapértelmezett App

Importálja a szükséges modulokat:

import { Útvonalak, Útvonal } tól től"react-router-dom"
import Listaoldal tól től"./pages/ListPage"
import Navbar tól től'./components/Navbar'
import PostPage tól től"./pages/PostPage"

A React töredékben adja hozzá a Útvonalak alkatrészek hárommal Útvonal gyermekkomponensek elérési utakkal: /, /:type, és /item/:id illetőleg.

'/'
 elem={<> <Navbar /><Listaoldal /></>}>
 </Route>
'/:típus'
 elem={<> <Navbar /><Listaoldal /></>}>
 </Route>
'/tárgy azonosító'
 elem={}>
 </Route>
</Routes>

A useFetch Custom Hook létrehozása

Ez a projekt két API-t használ. Az első API felelős az adott kategóriában lévő bejegyzések listájának lekéréséért (típus), míg a második API az Algolia API, amely egy adott bejegyzés és annak lekéréséért felelős Hozzászólások.

Nyissa meg a useFetch.jsx fájlba, adja meg a horgot alapértelmezett exportálásként, és importálja a useState és useEffect horgok.

import { useState, useEffect } tól től"reagál";
exportalapértelmezettfunkcióuseFetch(típus, id) {
}

Határozzon meg három állapotváltozót, nevezetesen: adat, hiba, és Betöltés, a megfelelő beállító funkcióival.

const [data, setData] = useState();
const [hiba, setError] = useState(hamis);
const [betöltés, setLoading] = useState(igaz);

Ezután adja hozzá a useEffect horog a függőségekkel: id és típus.

useEffect(() => {
}, [azonosító, típus])

Ezután a visszahívási függvényben adja hozzá a függvényt fetchData() hogy lekérje az adatokat a megfelelő API-król. Ha az átadott paraméter az típus, használja az első API-t. Ellenkező esetben használja a második API-t.

asyncfunkciófetchData() {
hagyja válasz, url, paraméter;
ha (típus) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 paraméter = type.toLowerCase(); 
 }
másha (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 paraméter = id.toLowerCase(); 
 }
próbáld ki {
 válasz = várja fetch(`${url}${parameter}`);
 } fogás (hiba) {
 setError(igaz);
 }
ha (válasz) ha (response.status !== 200) {
 setError(igaz);
 } más {
hagyja adatok = várja válasz.json();
 setLoading(hamis);
 setData (adat);
 }
}
fetchData();

Végül küldje vissza a Betöltés, hiba, és adat állapotváltozókat objektumként.

Visszatérés { betöltés, hiba, adatok };

A bejegyzések listájának megjelenítése a kért kategóriától függően

Amikor a felhasználó ide navigál / vagy /:type, React kell renderelni a Listaoldal összetevő. A funkció megvalósításához először importálja a szükséges modulokat:

import { useNavigate, useParams } tól től"react-router-dom";
import useFetch tól től"../hooks/useFetch";

Ezután határozza meg a funkcionális komponenst, majd rendelje hozzá a dinamikus paramétert, típus hoz típus változó. Ha a dinamikus paraméter nem elérhető, állítsa be a típus változó -ra hírek. Ezután hívja a useFetch horog.

exportalapértelmezettfunkcióListaoldal() {
hagyja { type } = useParams();
const navigate = useNavigate();
ha (!típus) type = "hírek";
const { betöltés, hiba, adatok } = useFetch (típus, nulla);
}

Ezután adja vissza a megfelelő JSX kódot attól függően, hogy melyik Betöltés, hiba, vagy adat változók igazak.

ha (hiba) {
Visszatérés<div>Valami elromlott!div>
}
ha (Betöltés) {
Visszatérés<div>Betöltésdiv>
}
ha (adat) {
dokumentum.title = type.toUpperCase();
Visszatérés<div>
"lista-típus">{type}</div>
{data.map(tétel =>
"tétel">
"cikk-cím"
 onClick={() => navigate(`/elem/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"elem-link"
 onClick={() => open(`${item.url}`)}>
 ({elem.domain})</span>}
 </div>)}
 </div>
 </div>
}

A PostPage komponens létrehozása

Először importálja a megfelelő modulokat és összetevőket, majd határozza meg az alapértelmezett funkcionális összetevőt, és rendelje hozzá a id dinamikus paramétert a id változó, és hívja a useFetch horog. Ügyeljen arra, hogy megsemmisítse a választ.

import { Link, useParams } tól től"react-router-dom";
import elemezni tól től"html-react-parser";
import pillanat tól től"pillanat";
import Hozzászólások tól től"../components/Comments";
import useFetch tól től"../hooks/useFetch";
exportalapértelmezettfunkcióPostPage() {
const { id } = useParams();
const { betöltés, hiba, adatok } = useFetch(nulla, id);
}

És csakúgy, mint a Listaoldal komponens, jelenítse meg a megfelelő JSX-et a következő változók állapota alapján: Betöltés, hiba, és adat.

ha (hiba) {
Visszatérés<div>Valami elromlott!div>
}
ha (Betöltés) {
Visszatérés<div>Betöltésdiv>
}
ha (adat) {
dokumentum.title=data.title;
Visszatérés<div>
"postai cím">{data.title}</div>
"utómetaadatok">
 {data.url && 
 osztálynév="post-link">Látogassa meg a webhelyet</Link>}
"utószerző">{data.author}</span>
"utóidő">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"utószöveg">
 {elemzés (adat.szöveg)}</div>}
"utólagos megjegyzések">
"comments-label">Megjegyzések</div>

 </div>
 </div>
}

Importálja a elemezni modul és a pillanat modult. Határozza meg az alapértelmezett funkcionális összetevőt Hozzászólások amely beveszi a megjegyzésekAdatok tömb kellékként, áthalad a tömbökön, és megjeleníti a Csomópont komponens minden elemhez.

import elemezni tól től"html-react-parser";
import pillanat tól től"pillanat";
exportalapértelmezettfunkcióHozzászólások({ commentsData }) {
Visszatérés<>
 {commentsData.map(commentData =><CsomópontcommentData={commentData}kulcs={commentData.id}
 />)}
 </>
}

Ezután határozza meg a Csomópont funkcionális komponens közvetlenül a alatt Hozzászólások összetevő. A Csomópont komponens a megjegyzést, a metaadatokat és az egyes megjegyzésekre adott válaszokat (ha van ilyen) önmaga rekurzív megjelenítésével jeleníti meg.

funkcióCsomópont({ commentData }) {
Visszatérés<divosztály név="megjegyzés">
 {
 commentData.text &&
 <>
"megjegyzés-metaadatok">
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
"megjegyzés-szöveg">
 {elemzés (commentData.text)}</div>
 </>
 }
'megjegyzés-válaszok'>
 {(commentData.children) && 
 commentData.children.map(gyermek =>
)}
 </div>
 </div>
}

A fenti kódblokkban elemezni felelős a benne tárolt HTML elemzéséért commentData.text, míg pillanat felelős a megjegyzés idejének elemzéséért és a relatív idő visszaadásáért a mostantól() módszer.

A Navbar komponens létrehozása

Nyissa meg a Navbar.jsx fájlt, és importálja a NavLink modul a react-router-dom modult. Végül határozza meg a funkcionális komponenst, és adjon vissza egy szülőt nav elem öttel NavLink a megfelelő kategóriákra (vagy típusokra) mutató elemek.

import { NavLink } tól től"react-router-dom"
exportalapértelmezettfunkcióNavbar() {
Visszatérés<nav>
"/hírek">Otthon</NavLink>
"/legjobb">Legjobb</NavLink>
"/előadás">Megjelenítés</NavLink>
"/kérdez">Kérdezz</NavLink>
"/jobs">Munkák</NavLink>
 </nav>
}

Gratula! Ön most építette fel saját front-end kliensét a Hacker News számára.

Erősítse meg reakciókészségeit a klón alkalmazás létrehozásával

A Hacker News klón megépítése a React segítségével segíthet megszilárdítani React készségeit, és praktikus egyoldalas alkalmazást biztosít a munkavégzéshez. Sokféleképpen viheti tovább a dolgokat. Például hozzáadhat bejegyzések és felhasználók keresésének lehetőségét az alkalmazáshoz.

Ahelyett, hogy a semmiből próbálná meg saját útválasztóját megépíteni, jobb, ha olyan szakemberek által készített eszközt használ, akik elkötelezettek a SPA-k létrehozásának megkönnyítésében.